Routes

The app uses the following routes to navigate between pages:

• Home (/): Displays the products available for sale.
• Products (/products): Displays a list of products (same as Home).
• Product Detail (/product/:id): Displays the detailed view of a product, including the option to add to cart and view related products.
• Cart (/cart): Displays the products currently added to the cart and allows modification of quantities.
• Orders (/orders): This page is still under development and will be available for logged-in users to view their previous orders.

Functionality

Product Detail Page

• To view the details of a product, simply click on a product displayed on the homepage.
• On the product detail page, you can:
  • View detailed product information, including the name, price, description, and images.
  • Add the product to your cart using the "Add to Cart" button.
  • Modify the product quantity in the cart using the "+" and "-" increment and decrement buttons.

Cart Page

• In the cart, you can view all added items.
• You can modify the quantity of each item (still working on fixing a small bug related to how the numbers are reflecting).
• The checkout form component has been implemented but is not yet fully functional, so it's not displayed yet.

Orders Page (In Progress)

• The orders page is under development.
• Future Plan: Implement a system where logged-in users can view and manage their past orders and make payments. Users who are not logged in will be shown their current order in progress and prompted to log in or sign up.

Future Improvements

• Orders Page: To be fully implemented and restricted to logged-in users.
• Authentication: Users must log in or sign up before viewing their orders.
• Checkout: Could integrate a payment system like stripe.

Accomplishments

• Successfully built and deployed the Products page, Product Detail page, and Cart page (partially).
• Implemented a responsive layout and Navbar.
• Created interactive Search and Category components for product filtering.
• Ensured that the application is accessible and responsive across all screen sizes.
• Create a mock login and authentication since I am not connected to any database.
• Take an order to completion.
• Protected order complete page and conditionally render the Login or checkout depending if a user is authenticated.

Technologies Used

• React: Chosen for its fast client-side rendering and high user interactivity.
• TailwindCSS: Utilized for styling and creating a responsive design.
• React Router: Used for navigation and routing between pages.
• TypeScript: Provides static typing to catch errors early and improve the development experience.
• React Icons: A library used for adding customizable icons throughout the application.
• Toastify: Used for showing user-friendly toast notifications (success, error, etc.).
• Classnames: A utility for conditionally joining class names together, simplifying the process of dynamic styling.

Installation

To run the project locally:

1. Clone the repository:

   git clone https://github.com/your-username/milky-express-shop.git
   
   

2. Navigate into the project directory:

   cd milky-express-shop
   
   

3. Install dependencies:

   npm install
   
   

4. Start the development server::

   npm run dev
   
   

5. Start the development server::

   npm run dev
   
   

6. Visit http://localhost:5173 in your browser to view the app.