Audiophile

Description

An online store for ordering headphones and speakers. The website contains a landing page, category pages, product pages, a cart and checkout page.

Live site

Code

Stack

React

Next.js

Sass

CSS Modules

Vercel

Project Purpose and Goal

I aimed to create an online store with an intuitive cart and checkout process, prioritizing a smooth shopping experience. I also ensured that product listings were dynamic, allowing for easy updates. My goal was to develop not just an online store but a flexible platform that adapts to both business and customer needs.

Web Stack and Explanation

For this project, I chose Next.js, primarily for its efficient routing capabilities ideal for handling numerous product pages. Next.js facilitates dynamic routing, enabling individual product pages to be generated and updated effortlessly. This feature is particularly beneficial for e-commerce.

Problems and Thought Process

The website's architecture needed to efficiently organize products under three main categories. My approach involved modularizing the content into distinct components: a 'Product' component nested within a 'Product Page' component, which itself resides inside a 'Product-Section' component, all encapsulated by a 'Category' component. This hierarchical structure leverages Next.js's dynamic routing capabilities, utilizing slugs to generate a single manageable file for each category. To ensure the website remains functional with frequently updated product data, I implemented utility functions dedicated to fetching and supplying this data to the respective page components. This design choice not only simplifies content management but also enhances the site's adaptability to changes in product offerings.

Lessons Learned

Through this project, I gained an appreciation for the critical role of strategizing before embarking on any development work. Initially, my eagerness to dive into the project led me to overlook some of the powerful features offered by Next.js. This oversight led to refactoring of many components to utilize these features. This challenge proved to be a valuable learning opportunity. It allowed me to explore various architectural approaches and understand the flexibility in application design. I emerged from this experience with a codebase that is significantly more streamlined and efficient. This journey has reinforced the concept that while initial setbacks can be disheartening, they often lead to greater outcomes in the long term.