I chose Next.js for this project because it provides SSR, which is key for search engine positioning and reaching customers. I also made use of its SSG capabilities - product and category (speakers, headphones, etc.) pages are generated at build time. Adding a new product is as easy as putting it in the database and revalidating these paths. Lastly, the monorepo architecture of Next.js allowed me to share types between the frontend and backend.

Since information about individual carts is useful for analytics (among other things), I decided to store it on the server. The client is connected to the cart by an ID in local storage.

I implemented this functionality with React Query. It gave me the tools to handle loading states as well as optimistic updates, which ensure the cart works smoothly.

I wanted the checkout form to provide users with descriptive error messages and validate data before sending it for further processing.

For this job, I chose React Hook Form and Zod. Both have elegant APIs and integrate wonderfully with TypeScript. They're also widely used in the industry.

Working on this project taught me a lot about component-based architecture and responsive web design. It also showed me how managing CSS in a larger project can be a challenge.

If I were to build a similar application again, I would consider using Tailwind for its gentle built-in design system. Using a CMS could also be beneficial. It would let the business manage their products without interacting with the database.