Choco Web App Frontend (MERN with Redux)

Overview

This is the frontend of the Choco Web App, built using the MERN stack (MongoDB, Express.js, React.js, Node.js) with Redux for state management. The application includes customer login and registration, product pages, shopping cart, user profile management, admin dashboard, order details, product management, checkout process, shipping details, and payment information.

Features

• Customer login and registration
• Product listing and details
• Shopping cart management
• User profile management
• Admin dashboard for product and order management
• Checkout process with shipping and payment details

Installation

1. Clone the repository:

   git clone https://github.com/Chanuth-silva10/choco-web-app-frontend-mern-with-redux.git
   cd choco-web-app-frontend-mern-with-redux

2. Install dependencies:

   npm install

3. Create a .env file in the root directory with the following environment variables:

   REACT_APP_API_URL=<Your Backend API URL>
   

4. Start the development server:

   npm start

Docker Setup

1. Build and run the Docker container:

   docker-compose up --build

2. The app will be available at http://localhost:3000.

Folder Structure

• .vscode: VS Code settings
• public: Public assets
• src: Source code
  • actions: Redux actions
  • components: React components
  • constants: Redux constants
  • reducers: Redux reducers
  • screens: React screens/pages
  • store: Redux store setup
  • styles: CSS styles

Screenshots

Customer Login

Customer Register

Home

One single product page with review comment

User add to cart

User Profile

Update Profile

Admin dashboard

User Order Details

All Users

Add Product

Checkout Process

View All products

Shipping Details

Payment Information

Shipped Requested Customer Order