Fresh Cart

Live Demo

---

Overview

This project is a modern E-Commerce web application built with cutting-edge technologies to provide a seamless online shopping experience. The platform features a user-friendly interface, responsive design, and powerful backend integration.

---

Features

• User Authentication: Secure login and registration system.
• Product Listings: Dynamic and visually appealing product gallery.
• Search and Filters: Advanced search functionality with filters.
• Shopping Cart: Add, update, and remove items from the cart.
• Order Management: Place and track orders effortlessly.
• Offline Detection: Notifies users when offline.
• Responsive Design: Optimized for mobile, tablet, and desktop.
• Real-Time Notifications: Toast notifications for important events.

---

Technologies Used

Frontend

• React: Building a dynamic and responsive user interface.
• React Router DOM: Client-side routing for seamless navigation.
• React Query: Data fetching and caching.
• Formik: Simplified form handling.
• Yup: Form validation.
• React Toastify & React Hot Toast: User-friendly notifications.
• Swiper: Interactive product carousels.
• React Helmet: Manage document head for SEO.

Design

• Tailwind CSS: Utility-first CSS framework for responsive design.
• Font Awesome: Icons for UI enhancement.
• Fontsource: Custom fonts for typography.

Backend & Utilities

• Axios: API requests and data handling.
• JWT Decode: Authentication token handling.

Development Tools

• Vite: Fast build tool and development server.
• ESLint: Code quality and linting.
• PostCSS: CSS transformations.

---

Installation & Setup

1. Clone the Repository:

   git clone https://github.com/elref7i/E-commerce.git
   cd E-commerce

2. Install Dependencies:

   npm install

3. Run the Development Server:

   npm run dev

4. Build for Production:

   npm run build

5. Preview Production Build:

   npm run preview

---

Project Structure

E-commerce/
├── src/
│   ├── components/       # Reusable UI components
│   ├── pages/            # Application pages
│   ├── hooks/            # Custom React hooks
│   ├── utils/            # Helper functions
│   └── assets/           # Static files (images, fonts)
├── public/               # Public assets
├── package.json          # Project metadata and dependencies
└── tailwind.config.js    # Tailwind CSS configuration

---

Contributing

Contributions are welcome! Please fork the repository and submit a pull request for any enhancements or bug fixes.

---

License

This project is licensed under the MIT License.

---

Contact

For any inquiries or feedback, please reach out to elref7i.