This README provides a comprehensive overview of the CarShop application, a React-based application that allows users to customize their dream car.
- React: Frontend framework for building the user interface.
- @tanstack/react-router: Routing library for managing navigation and application flow.
- MaterialUI: UI component library for styling and creating visually appealing components.
- Zustand: Global state management library for managing application state.
- Car Customization: Users can customize their car by choosing from various options for:
- Body: Different car body styles (e.g., hatchback, pickup, coupe).
- Drive: Different drivetrain options (e.g., front-wheel drive, rear-wheel drive).
- Paint: Different paint colors and finishes (e.g., metallic, matte).
- Step-by-Step Process: The customization process is guided through a series of steps using react-router.
- Global State Management: Zustand ensures that all customization choices are consistently reflected across the application.
- Fetching Data: The application fetches the names and prices of car parts from the database.
- Order Summary: Displays the chosen parts along with their prices and calculates the total price.
- Order Saving: Saves the entire order, including customer personal data and selected parts, to the database.
- Clon the repository
- Install dependencies - npm install
- Run server - npm run json-server
- Start the development server: npm start