ShopyNode

Table of Contents

• Introduction
• Technologies Used
• Features
• Getting Started
  • Installation
  • Environment Variables
  • Run Frontend
  • Run Backend
  • Sample User Logins
  • Database Seeder
• Data Modeling
• API Endpoints
• Folder Structure
• Deployment (updated)

Introduction

This project is just like a real-world e-commerce website. It is a full-featured shopping cart with complete backend and frontend support using the MERN stack. See it in action at ShopyNode.

Technologies Used

• Frontend: Vite, React.js
• Backend: Node.js, Express.js
• Database: MongoDB
• Other libraries:
  • Frontend: React Query, React Router, Axios, React Toastify, MUI
  • Backend: Mongoose, Bcryptjs, JSON Web Token

Features

• Full-featured shopping cart
• Product reviews and ratings
• Product pagination
• Product search feature
• User profile with orders
• Admin product management
• Admin user management
• Admin Order details page
• Mark orders as delivered option
• Checkout process (shipping, payment method, etc)
• Database seeder (products, users, reviews, & orders)

Getting Started

Installation

git clone https://github.com/korngsamnang/shopynode

Environment Variables

Rename the .env.example file to .env and add the following

MONGO_URI=your-mongodb-uri

JWT_SECRET=your-jwt-secret
JWT_EXPIRES_IN=your-jwt-expires-in(example: 90d)
JWT_COOKIE_EXPIRES_IN=your-cookie-expires-in(example: 90)

VITE_BASE_URL=your-backend-bash-url

Run Frontend

cd frontend

npm install

npm run dev

Run Backend

npm install

npm run dev

Sample User Logins

john@example.com (Admin)
test1234

bob@example.com (Customer)
test1234

eva@example.com (Customer)
test1234

Database Seeder

cd backend
node dev-data/import-dev-data.js --delete  # Delete data
node dev-data/import-dev-data.js --import  # Import data

Data Modeling

Data Modeling for shopynode app.

API Endpoints

• HTTP methods /api/v1/auth
• HTTP methods /api/v1/users
• HTTP methods /api/v1/orders
• HTTP methods /api/v1/products
• HTTP methods /api/v1/reviews

Folder Structure

└── 📁backend
    └── 📁config
    └── 📁controllers
    └── 📁dev-data
    └── 📁models
    └── 📁routes
    └── 📁utils
    └── app.js
    └── server.js

└── 📁frontend
	└── index.html
    └── 📁public
        └── 📁images
    └── 📁src
        └── 📁admin
            └── 📁orders
            └── 📁products
            └── 📁users
        └── 📁contexts
        └── 📁features
            └── 📁authentication
            └── 📁orders
            └── 📁products
            └── 📁reviews
            └── 📁users
        └── 📁pages
        └── 📁services
        └── 📁ui
        └── 📁utils
        └── App.jsx
        └── index.css
        └── main.jsx

Deployment

This project is deployed on Heroku. When you click to visit this project for the first time, there might be a delay in loading the page. This is because the Heroku container may have been temporarily shut down due to inactivity after 30 minutes. Please be patient as it restarts.

Deployment (updated 30/05/2024)

Since deploying the whole website on to Heroku (backend and frontend), causes memory exceeded (Error R14 (memory quota exceeded), I separate the backend and the frontend and deploy it onto a different service.

• For the backend API, I use Heroku.
• For the frontend, I use Netlify.