E-commerce website using the MERN Stack

Related tags

Learning resource redux nodejs mongodb reactjs mongoose expressjs postman redux-persist tailwindcss vite redux-toolkit
Overview

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

    large screens
    large screens
    large screens
    large screens
    large screens
    large screens

🎥 Demo Videos

HEIN.mp4
You might also like...

It consists of a recreation of Twitter, to put into practice both Front-end and Back-end knowledge by implementing the MERN Stack together with other technologies to add more value to the project.

Twitter-Clone_Back-end ✨ Demo. 💻 About the project. 📜 Descriptions. It consists of a recreation of Twitter, to put into practice knowledge of both F

Apr 12, 2022

Total Quest is an online real-world scavenger hunt application built with the MERN stack

Total Quest is an online real-world scavenger hunt application built with the MERN stack

TOTAL QUEST Table of Contents Description Team Members Technologies Used Contact Example Link to Total Quest Description Total Quest is an online real

Mar 13, 2022

A MERN Stack dapp the utilizes three solidity contracts

A MERN Stack dapp the utilizes three solidity contracts. It verifies user ownership of third party NFTs, generates an image incorporating a third party NFT image pulled from IPFS, mints a new NFT for users that includes an on-chain message and metadata to Opensea standards.

Jun 30, 2022

a/A MERN stack collaboration project

a/A MERN stack collaboration project

Welcome to Hoppers! Hoppers is an app where users can design their plan for the perfect night out with friends1. Users will be able to design and cust

Apr 28, 2022

A project built with MERN stack.

A project built with MERN stack.

May 2, 2022

It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

Twitter-Clone_Front-end ✨ Demo. Login Home Profile Message Notifications Deployed in: https://twitter-clone-front-end.vercel.app/ 💻 About the project

Jun 26, 2022

A sweet MERN Stack app to add food recipes to your own Cook Book!

A sweet MERN Stack app to add food recipes to your own Cook Book!

Welcome to LeCookBook 👋 A sweet MERN Stack project, that lets you view, quicksearch, search by category and a randomizer with a cool UI. This page ha

Jun 3, 2022

A secure MERN Stack boilerplate ready for Production that uses Docker & Nginx.

A secure MERN Stack boilerplate ready for Production that uses Docker & Nginx.

A production ready & secure boilerplate for the MERN Stack that uses Docker & Nginx. Focus on the product and not the setup. You can directly start wo

Dec 23, 2022

👍 💰 Market place for products with MERN stack

react-md Create an accessible React application with the material design specifications and Scss. Installing packages - How to install related compone

Sep 22, 2022
Owner
‪Yousef Elshabrawy‬‏
A Senior Computer Engineering Student @ Cairo University who is interested in Web Development.
‪Yousef Elshabrawy‬‏
GitHub
This is a full-stack exercise tracker web application built using the MERN (MongoDB, ExpressJS, ReactJS, NodeJS) stack. You can easily track your exercises with this Full-Stack Web Application.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

WMouton 2 Dec 25, 2021
Online Inventory Control System for an apparel manufacturing company "CASANOVA" (Pvt) Ltd. Technology stack: Node.js, Express.js, MongoDB Atlas, React.js (MERN Stack).

Project Name - Online Inventory Control System for an apparel manufacturing company "CASANOVA". The project was given a "A" grade. Group Leader - IT20

Pasindu Rukshan 1 Dec 26, 2021
This is my first attempt in creating a mern stack ecommerce website. Hope you like it!!

MERN E-COMMERCE PROJECT Hi! My name is Suhrrid Banerjee, This is my first attempt in creating a MERN stack e-commerce website. Prerequisite Nil Env Va

Suhrrid Banerjee 1 Jan 8, 2022
MERN Stack ECommerce Website Tutorial (Sep 10 2022)

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Pharaon 5 Dec 8, 2022
Full Stack MERN website for local small business "Daisy's Cakes"

Daisys-Cakes Full Stack MERN website for local small business "Daisy's Cakes" Contribution Info This section will be deleted later when the project is

PreDevz 8 Nov 13, 2022
A dashboard for managing orders and inventory for a wordpress e-commerce site which has woo commerce plugin installed

WordPressWooCommerceDashboard - A dashboard for managing orders and inventory for a wordpress e-commerce site which has woo commerce plugin installed. This program provides shipping tracking for Delhivery.

Vikrama Reddy 1 Jan 3, 2022
Flipkart Clone using MERN Stack with proper File Structure and also follow MVC architecture. You can view live app.

Flipkart Clone MERN APP Dhaval Patel's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart. It has strong authe

Dhaval Patel 50 Dec 29, 2022
This is an email scheduler made using MERN stack. This repo contains client, server side is linked in readme

Email Scheduler Client This is an email scheduler client (server in different repository). It is made using react. Overview User can sign-up/sign-in,

Sai Charan 3 Dec 3, 2022
This is my personal blog built using MERN Stack.

SURAJ'S BLOG Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN) Configuration and Setup Key Features Technol

Suraj Sahu 4 Oct 18, 2022
MERN stack application which serves as an online map journal where users can mark and rate the places they've been to.

PlaceRate PlaceRate is a MERN stack application which serves as an online map journal where users can mark and rate the places they've been to. You ca

Yuvraj Virdi 0 May 17, 2022