CodeMode365 / E-commerce-Site

Ecommerce Site

This project is an Ecommerce site built using React, Vite, Redux Toolkit, Mantine UI, React Icons, and Sweet Alert. It provides a frontend implementation of an Ecommerce website without any backend API integration.

Table of Contents

• Introduction
• Features
• Requirements
• Getting Started
• Project Structure
• Available Scripts
• Contributing
• License

Introduction

This project aims to demonstrate the frontend implementation of an Ecommerce site using modern web development technologies. It leverages React as the primary JavaScript library for building user interfaces, Vite as the development server and bundler, Redux Toolkit for state management, Mantine UI for the UI components, React Icons for iconography, and Sweet Alert for displaying beautiful alerts.

Please note that this project only focuses on the frontend and does not include any backend API integration. It serves as a starting point for developers looking to build an Ecommerce site with a similar tech stack and can be easily extended to incorporate backend functionality.

Note all the Data implemented in the project is a Dummy JSON data

Features

• Browse and search products
• Add products to the cart
• View and update cart contents
• Apply discount codes
• Proceed to checkout (mock functionality)
• Display alerts for various actions

Note: Some of the above features are not implemented fully as the project is still on development process.

Requirements

Make sure you have the following software installed on your machine:

• Node.js (version 12 or higher)
• npm or yarn package manager

Getting Started

1. Clone the repository:

   git clone https://github.com/CodeMode365/E-commerce-Site.git
   

2. Navigate to the project directory:

   cd E-commerce-Site
   

3. Install the dependencies using npm or yarn:

   npm install
   # or
   yarn install
   

4. Start the Development server

   npm run dev
   # or
   yarn dev
   
   

The application will be available at http://localhost:5173.

Project Structure

The project structure follows a modular approach to enhance maintainability and scalability. Here's an overview of the main directories and files:

• src: Contains the source code of the application.
• components: Reusable UI components used throughout the app.
• Redux: Redux Toolkit slices, representing different features of the app.
• Components/Pages: React components representing different pages of the app.
• assets: Some assets needed for the project
• public: Contains static assets such as images, icons etc.

Available Scripts

In the project directory, you can run the following scripts:

• npm run dev or yarn dev: Starts the development server.
• npm run build or yarn build`: Builds the app for production.
• npm run preview or yarn preview: Run the project in preview mode

Refer to the package.json file for additional scripts.

Contributing

Contributions are welcome! If you want to contribute to this project, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature/bug fix.
3. Make your changes and commit them.
4. Push the changes to your fork.
5. Submit a pull request with a detailed description of your changes.

License

This project is licensed under the MIT License. Feel free to use and modify the code as per your needs.

Thank you for your interest in this project! If you have any questions orneed further assistance, please feel free to reach out. Happy coding!