Welcome to the Fake Store project! This is a web application built with React and Vite that simulates a shopping experience using the Fake Store API. The project utilizes TypeScript, Material UI, Emotion, and React Router for navigation, along with the useContext hook for state management.
- React: A JavaScript library for building user interfaces.
- Vite: A fast build tool that provides a great developer experience.
- TypeScript: A typed superset of JavaScript that helps catch errors early.
- Material UI: A popular React UI framework that offers a wide range of components.
- Emotion: A performant and flexible CSS-in-JS library for styling.
- React Router: A library for routing in React applications.
- useContext: A React hook used for state management.
To get started with the project, follow these steps:
-
Clone the repository:
git clone https://github.com/yourusername/fake-store-project.git
-
Navigate to the project directory:
cd fake-store -
Install the dependencies:
npm install
-
Install Material UI and Material Icons:
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
-
Run the development server:
npm run dev
-
Open your browser and navigate to http://localhost:5173/ to view the application.
This application allows users to browse through a variety of products fetched from the Fake Store API. Users can view product details and add items to their shopping cart. The useContext hook is employed to manage the state of the shopping cart throughout the application.
- Display a list of products with images, titles, and prices.
- Product details page with more information about each product.
- Add and remove items from the shopping cart.
- View a favorites page to see products marked as favorites.
- Responsive design for a great user experience on all devices.
The product data is sourced from the Fake Store API. The images used in this project are from Pexels. License This project is licensed under the MIT License. See the LICENSE file for details.