This project is a simple e-commerce shop page that allows users to browse products, add them to a cart, and manage their shopping cart. It demonstrates clean coding practices, state management using React Context, and scalable design principles.
- Product Browsing: Users can scroll through the product list.
- Adding to Cart: Clicking "Add to Cart" adds the product to the cart and updates the cart total.
- Viewing Cart: Clicking the cart icon opens the cart.
- Removing from Cart: Clicking the trash icon on a item removes it.
Frontend: React, Next.js, CSS Modules, React Context.
Several important design decisions were made to balance simplicity, scalability, and development speed. Here are the primary choices:
- Used React Context instead of Redux for state management, specifically for the cart functionality because React Context is simpler to implement and was sufficient for this project’s scale.
- Redux would introduce more boilerplate and complexity, which was unnecessary for the relatively simple state management needs of the cart.
- Skipped integrating a UI library initially to focus on functional features.
- Documented trade-offs and prioritization in the development process.
- Refactored the project to use TypeScript.
- Refactor the project to use TypeScript for improved scalability and maintainability.
- Integrate Tailwind CSS to enhance styling and responsiveness
- Enhance test coverage with unit and integration tests.
- Add advanced functionality such as product filtering and sorting.
- Clone the project
git clone https://saraiovieira/shop-page.git- Go to the project directory
cd shop-page- Install dependencies
npm install- Create a .env file and add a variable
API_URLfor the data source
API_URL=https://www.kencko.com/api/v1/products/US?shop_domain=vip-kencko.myshopify.com- Run the development server:
npm run dev- Open http://localhost:3000 in your browser to view the app.
- Contributions, issues, and feature requests are welcome! Feel free to fork the repository and submit a pull request.