Litt & kvert

This project is a modern, full-stack e-commerce storefront built with Next.js and TypeScript. It demonstrates a feature-rich online shopping experience, including dynamic product pages, a debounced search functionality for real-time feedback, and a fully integrated shopping cart using Zustand for global state management.

The application is styled with Sass for a modular and maintainable component-based design. For the contact form, it leverages React Hook Form combined with Zod for robust, schema-based validation. The project also includes a comprehensive testing suite with Jest and React Testing Library and a streamlined development workflow enforced by ESLint, Prettier, and Husky pre-commit hooks.

Reflection and Improvements

After reviewing the project, I've identified several areas where I've grown and places where the project could be enhanced with my current skills.

• Improved State Management on Checkout Success: The checkout success page relies on the cart's state before it's cleared to display order details. This works, but if a user refreshes the page, the order information is lost. A better approach would be to pass order details through encrypted URL parameters or use sessionStorage to persist the data across a refresh, making the confirmation page more reliable.

• Enhanced API and Error Handling: The API fetching logic in getProduct.ts and getProducts.ts is functional but throws a generic error message for any failed request. I would now implement more descriptive error handling to distinguish between different HTTP statuses (e.g., 404 Not Found vs. 500 Server Error), providing clearer feedback to the user and for debugging purposes.

• Configuration and Security: The base API URL is hardcoded in src/app/api/constants.ts. Moving this to an environment variable (.env.local) would be a significant improvement. This prevents sensitive information from being exposed in the source code and allows for different endpoints for development and production environments.

• Test Coverage: While unit tests exist for several components, the project would benefit from broader test coverage. I would add integration tests for user flows like adding an item to the cart and completing the checkout process. Additionally, I would write tests for the state management logic within the Zustand store to ensure all cart actions behave as expected under different conditions.

• Accessibility (ARIA Usage): The homepage's main heading (<h1>) is empty and uses an aria-label instead of containing visible text. For better SEO and accessibility, the <h1> tag should wrap the primary visible title on the page. I would refactor this to ensure the page structure is more meaningful for screen readers and search engines.