E-commerce website using the MERN Stack

by React

HEIN.

Ecommerce Web Application built with the MERN Stack. Inspired by Lama Dev

? Get Started

  1. Clone the repository
git clone https://github.com/YousefElshabrawy/HEIN..git
  1. Navigate to the repository directory
$ cd HEIN.

? Client

  1. Navigate to the client directory
$ cd client
  1. Install dependencies
$ npm install

Running

  1. Compile and hot-reload for development
$ npm run dev
  1. Compile for production
$ npm run build

? Server

  1. Navigate to the server directory
$ cd server
  1. Install dependencies
$ npm install

Running

  1. Compile and hot-reload for development
$ npm run start
  1. Compile for production
$ npm run build

? Built With

  • ReactJS
  • Redux
  • NodeJS
  • ExpressJS
  • MongoDB
  • TailwindCSS
  • Stripe

? File Structure

|-- README.md
|-- client
|   |-- index.html
|   |-- package-lock.json
|   |-- package.json
|   |-- postcss.config.cjs
|   |-- public
|   |-- src
|   |   |-- App.jsx
|   |   |-- assets
|   |   |-- components
|   |   |   |-- Carousel.jsx
|   |   |   |-- CartProduct.jsx
|   |   |   |-- Categorie.jsx
|   |   |   |-- Categories.jsx
|   |   |   |-- Filter.jsx
|   |   |   |-- Newsletter.jsx
|   |   |   |-- Product.jsx
|   |   |   |-- Products.jsx
|   |   |   `-- Title.jsx
|   |   |-- index.css
|   |   |-- layout
|   |   |   |-- Announcement.jsx
|   |   |   |-- Footer.jsx
|   |   |   `-- Navbar.jsx
|   |   |-- main.jsx
|   |   |-- pages
|   |   |   |-- Home.jsx
|   |   |   |-- Login.jsx
|   |   |   |-- Orders.jsx
|   |   |   |-- ShoppingCart.jsx
|   |   |   |-- ShoppingCategorie.jsx
|   |   |   |-- Signup.jsx
|   |   |   `-- SingleProduct.jsx
|   |   |-- request-methods.js
|   |   `-- store
|   |       |-- auth-actions.js
|   |       |-- auth-slice.js
|   |       |-- cart-slice.js
|   |       `-- index.js
|   |-- tailwind.config.cjs
|   `-- vite.config.js
`-- server
    |-- controllers
    |   |-- auth.js
    |   |-- cart.js
    |   |-- order.js
    |   |-- product.js
    |   `-- user.js
    |-- db
    |   |-- cleanup-script.js
    |   |-- fake-api-products.json
    |   `-- products.json
    |-- index.js
    |-- middlewares
    |   `-- verifyToken.js
    |-- models
    |   |-- Cart.js
    |   |-- Order.js
    |   |-- Product.js
    |   `-- User.js
    |-- package-lock.json
    |-- package.json
    `-- routes
        |-- auth.js
        |-- cart.js
        |-- order.js
        |-- product.js
        |-- stripe.js
        `-- user.js

? Screenshots

  • Large Screens

? Demo Videos

HEIN.mp4

GitHub

View Github