This project is an e-commerce website developed using the Fake Store API. It was prototyped on Figma and implemented using TypeScript and Vite React.
- Displays product categories
- Allows users to view category details
- Shows products within a category
- Provides detailed product information
- Enables users to select quantity and add products to the cart
- Displays the active cart
- Allows users to remove products from the cart
- Supports order cancellation, which clears the cart
- Allows users to confirm orders and displays a success screen
- Provides a search functionality to find products by name
- Calculates the total amount of the cart
- User can see all product categories
- User can enter a category to see its details
- User can see the products within a category
- User can enter a product to see its details
- User can view the details of a product
- User can select the quantity and add products to the cart
- User can see the active cart
- User can remove a product from the cart
- User can cancel the order, clearing the cart
- User can confirm the order and see a success screen
- User can search for products by name
- The system calculates the total amount of the cart
- The system persists the state of the cart across sessions
- The system preloads data for smoother navigation
- Sass: Used for styling the project.
- Atomic Design: Implemented the project based on the concept of atomic design. Learn more about Atomic Design
- Dependencies: @types/react-star-ratings, axios, react-responsive-carousel, react-router-dom, react-spinners, react-star-ratings, react-toastify.
- TypeScript: Developed the project using TypeScript.
- Vite React: Used Vite as the build tool for the React project.
To install the dependencies and run the project, follow these steps:
- Clone the repository.
- Install dependencies:
npm install. - Start the development server:
npm run dev.
This project was developed by Luiz Barbosa.