├── frontend
├── .env
├── postcss.config.js
├── vercel.json
├── src
│ ├── components
│ │ ├── Loader.jsx
│ │ ├── inputForm
│ │ │ └── InputField.jsx
│ │ ├── nav
│ │ │ ├── UserMenu.jsx
│ │ │ └── Header.jsx
│ │ ├── ProductCard.jsx
│ │ └── CartCard.jsx
│ ├── pages
│ │ ├── index.js
│ │ ├── Hero.jsx
│ │ ├── Login.jsx
│ │ ├── Cart.jsx
│ │ ├── Register.jsx
│ │ └── DetailPage.jsx
│ ├── main.jsx
│ ├── App.jsx
│ ├── layout
│ │ └── Layout.jsx
│ ├── hook
│ │ └── useOuterClick.js
│ ├── schema
│ │ └── index.js
│ ├── App.css
│ ├── index.css
│ ├── routes
│ │ └── Router.jsx
│ └── assets
│ │ └── react.svg
├── vite.config.js
├── utils
│ └── axios.js
├── tailwind.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
├── public
│ └── vite.svg
└── store
│ └── appStore.js
├── .gitignore
├── backend
├── .env
├── middleware
│ ├── asyncHandler.js
│ ├── checkAuth.js
│ └── errorHandler.js
├── vercel.json
├── config
│ └── db.js
├── utils
│ └── jwt.js
├── package.json
├── server.js
├── routes
│ └── userRoutes.js
├── model
│ ├── cartModel.js
│ └── userModel.js
├── controller
│ └── userController.js
├── data
│ └── products.json
└── package-lock.json
└── README.md
/frontend/.env:
--------------------------------------------------------------------------------
1 | VITE_BASE_URL = http://localhost:2060
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | frontend/node_modules/
2 | backend/node_modules/
3 |
4 |
5 |
--------------------------------------------------------------------------------
/frontend/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/backend/.env:
--------------------------------------------------------------------------------
1 | PORT = 2060
2 | DB_URI = mongodb://127.0.0.1:27017/shopping-cart
3 | BASE_URL = http://localhost:5173
4 | SECRET_KEY= shopping-cart-1112
--------------------------------------------------------------------------------
/frontend/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }],
3 | "github": {
4 | "silent": true
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/frontend/src/components/Loader.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Loader = () => {
4 | return ;
5 | };
6 |
7 | export default Loader;
8 |
--------------------------------------------------------------------------------
/backend/middleware/asyncHandler.js:
--------------------------------------------------------------------------------
1 | const asyncHandler = (fn) => (req, res, next) => {
2 | Promise.resolve(fn(req, res, next)).catch(next);
3 | };
4 |
5 | module.exports = asyncHandler;
6 |
--------------------------------------------------------------------------------
/frontend/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/frontend/utils/axios.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 |
3 | const BASE_URL = import.meta.env.VITE_BASE_URL;
4 |
5 | const API = axios.create({ baseURL: BASE_URL, withCredentials: true });
6 |
7 | export default API;
8 |
--------------------------------------------------------------------------------
/frontend/src/pages/index.js:
--------------------------------------------------------------------------------
1 | export { default as Login } from "./Login";
2 | export { default as Register } from "./Register";
3 | export { default as Cart } from "./Cart";
4 | export { default as DetailPage } from "./DetailPage";
5 |
--------------------------------------------------------------------------------
/frontend/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 | theme: {
5 | extend: {},
6 | },
7 | plugins: [],
8 | };
9 |
--------------------------------------------------------------------------------
/frontend/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App.jsx";
4 | import "./index.css";
5 |
6 | ReactDOM.createRoot(document.getElementById("root")).render();
7 |
--------------------------------------------------------------------------------
/frontend/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { RouterProvider } from "react-router-dom";
3 | import routes from "./routes/Router";
4 |
5 | const App = () => {
6 | return ;
7 | };
8 |
9 | export default App;
10 |
--------------------------------------------------------------------------------
/frontend/src/layout/Layout.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Layout = ({ children }) => {
4 | return (
5 |
8 | );
9 | };
10 |
11 | export default Layout;
12 |
--------------------------------------------------------------------------------
/backend/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 2,
3 | "name": "backend",
4 | "builds": [
5 | {
6 | "src": "server.js",
7 | "use": "@vercel/node"
8 | }
9 | ],
10 | "routes": [
11 | {
12 | "src": "/(.*)",
13 | "dest": "/server.js"
14 | }
15 | ],
16 | "github": {
17 | "silent": true
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/backend/config/db.js:
--------------------------------------------------------------------------------
1 | const mongoose = require("mongoose");
2 |
3 | const connectDB = async () => {
4 | try {
5 | const { connection } = await mongoose.connect(process.env.DB_URI);
6 | console.log(`connected with `, connection.host, connection.port);
7 | } catch (error) {
8 | console.log(error);
9 | }
10 | };
11 |
12 | module.exports = connectDB;
13 |
--------------------------------------------------------------------------------
/frontend/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/backend/utils/jwt.js:
--------------------------------------------------------------------------------
1 | const sendToken = (user, res) => {
2 | const token = user.getJwtToken();
3 | const options = {
4 | httpOnly: true,
5 | secure: true,
6 | sameSite: "none",
7 | maxAge: 72 * 60 * 60 * 1000,
8 | };
9 | res
10 | .cookie("token", token, options)
11 | .status(200)
12 | .json({ success: true, token, user });
13 | };
14 |
15 | module.exports = sendToken;
16 |
--------------------------------------------------------------------------------
/frontend/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/frontend/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/frontend/src/hook/useOuterClick.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 |
3 | const useOuterClick = (ref, callback) => {
4 | useEffect(() => {
5 | const close = (event) => {
6 | if (ref?.current && !ref?.current?.contains(event.target)) {
7 | callback(false);
8 | }
9 | };
10 | document.addEventListener("mousedown", close);
11 | return () => {
12 | document.removeEventListener("mousedown", close);
13 | };
14 | }, []);
15 | };
16 |
17 | export default useOuterClick;
18 |
--------------------------------------------------------------------------------
/frontend/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | 'react-refresh/only-export-components': [
16 | 'warn',
17 | { allowConstantExport: true },
18 | ],
19 | },
20 | }
21 |
--------------------------------------------------------------------------------
/backend/middleware/checkAuth.js:
--------------------------------------------------------------------------------
1 | const jwt = require("jsonwebtoken");
2 | const asyncHandler = require("./asyncHandler");
3 |
4 | const checkAuth = asyncHandler(async (req, res, next) => {
5 | const { token } = req.cookies;
6 |
7 | if (token) {
8 | jwt.verify(token, process.env.SECRET_KEY, (err, user) => {
9 | if (err) {
10 | res.status(400);
11 | throw new Error("Invalid token");
12 | }
13 | req.userId = user.id;
14 | next();
15 | });
16 | } else {
17 | return res.status(401).json({ success: false, message: "Unauthorized" });
18 | }
19 | });
20 |
21 | module.exports = checkAuth;
22 |
--------------------------------------------------------------------------------
/frontend/src/schema/index.js:
--------------------------------------------------------------------------------
1 | import * as YUP from "yup";
2 |
3 | export const loginSchema = YUP.object({
4 | email: YUP.string().email("invalid mail").required("enter email"),
5 | password: YUP.string().required("enter password"),
6 | });
7 |
8 | export const registerSchema = YUP.object({
9 | name: YUP.string().min(3, "minimum 3 character").required("enter name"),
10 | email: YUP.string().email("invalid mail").required("enter email"),
11 | password: YUP.string().required("enter password"),
12 | confirmPassword: YUP.string()
13 | .oneOf([YUP.ref("password"), null], "password must be match")
14 | .required("enter password"),
15 | });
16 |
--------------------------------------------------------------------------------
/backend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "backend",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "server.js",
6 | "scripts": {
7 | "dev": "nodemon server.js",
8 | "start": "node server.js",
9 | "test": "echo \"Error: no test specified\" && exit 1"
10 | },
11 | "keywords": [],
12 | "author": "",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "nodemon": "^3.0.1"
16 | },
17 | "dependencies": {
18 | "bcrypt": "^5.1.1",
19 | "cookie-parser": "^1.4.6",
20 | "cors": "^2.8.5",
21 | "dotenv": "^16.3.1",
22 | "express": "^4.18.2",
23 | "jsonwebtoken": "^9.0.2",
24 | "mongoose": "^7.6.2"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/frontend/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/backend/server.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const cors = require("cors");
3 | require("dotenv").config();
4 | const connectDB = require("./config/db");
5 | const userRoutes = require("./routes/userRoutes");
6 | const cookieParser = require("cookie-parser");
7 | const { notFound, errorHandler } = require("./middleware/errorHandler");
8 | connectDB();
9 |
10 | const app = express();
11 |
12 | app.use(
13 | cors({
14 | origin: process.env.BASE_URL,
15 | credentials: true,
16 | methods: "PUT,POST,GET,DELETE,PATCH,HEAD",
17 | })
18 | );
19 |
20 | app.use(express.json());
21 | app.use(express.urlencoded({ extended: true }));
22 | app.use(cookieParser());
23 | app.use("/api/user/", userRoutes);
24 |
25 | app.use(notFound);
26 | app.use(errorHandler);
27 |
28 | app.listen(process.env.PORT, () => {
29 | console.log(`Server running on port ${process.env.PORT}`);
30 | });
31 |
--------------------------------------------------------------------------------
/frontend/src/components/inputForm/InputField.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const InputField = ({
4 | title,
5 | name,
6 | value,
7 | type,
8 | handleChange,
9 | errors,
10 | touched,
11 | handleBlur,
12 | }) => {
13 | return (
14 |
15 |
19 | {errors[name] && touched[name] ? (
20 | {errors[name]}
21 | ) : null}
22 |
32 |
33 | );
34 | };
35 |
36 | export default InputField;
37 |
--------------------------------------------------------------------------------
/backend/routes/userRoutes.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const {
3 | login,
4 | register,
5 | logout,
6 | addCart,
7 | removeCart,
8 | decreaseCartQty,
9 | addCartQty,
10 | getUserCart,
11 | getCartNumber,
12 | } = require("../controller/userController");
13 | const checkAuth = require("../middleware/checkAuth");
14 |
15 | const userRoutes = express.Router();
16 |
17 | userRoutes.post("/login", login);
18 | userRoutes.post("/register", register);
19 | userRoutes.post("/logout", checkAuth, logout);
20 | userRoutes.get("/get-user-cart-number", checkAuth, getCartNumber);
21 | userRoutes.get("/get-user-cart", checkAuth, getUserCart);
22 | userRoutes.post("/add-cart", checkAuth, addCart);
23 | userRoutes.delete("/remove-cart", checkAuth, removeCart);
24 | userRoutes.post("/add-qty", checkAuth, addCartQty);
25 | userRoutes.post("/decrease-qty", checkAuth, decreaseCartQty);
26 |
27 | module.exports = userRoutes;
28 |
--------------------------------------------------------------------------------
/frontend/src/components/nav/UserMenu.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react";
2 | import { useAppStore } from "../../../store/appStore";
3 | import { useNavigate } from "react-router-dom";
4 | import useOuterClick from "../../hook/useOuterClick";
5 |
6 | const UserMenu = ({ setShowMenu }) => {
7 | const userRef = useRef(null);
8 | useOuterClick(userRef, setShowMenu);
9 | const navigate = useNavigate();
10 | const { logout, user } = useAppStore();
11 | return (
12 |
16 |
{user?.name}
17 | logout(navigate, setShowMenu)}
20 | >
21 | Logout
22 |
23 |
24 | );
25 | };
26 |
27 | export default UserMenu;
28 |
--------------------------------------------------------------------------------
/backend/model/cartModel.js:
--------------------------------------------------------------------------------
1 | const mongoose = require("mongoose");
2 |
3 | const cartSchema = mongoose.Schema(
4 | {
5 | cartItems: [
6 | {
7 | product: {
8 | id: { type: Number, required: true },
9 | title: { type: String, required: true },
10 | price: Number,
11 | description: { type: String, required: true },
12 | rating: { rate: { type: Number }, count: { type: Number } },
13 | category: { type: String, required: true },
14 | image: { type: String, required: true },
15 | },
16 | quantity: { type: Number, default: 1 },
17 | },
18 | ],
19 | user: {
20 | type: mongoose.Types.ObjectId,
21 | ref: "user",
22 | required: [true, "user id is required"],
23 | },
24 | totalPrice: Number,
25 | },
26 | { timestamp: true }
27 | );
28 |
29 | const cartModel = mongoose.model("cart", cartSchema);
30 |
31 | module.exports = cartModel;
32 |
--------------------------------------------------------------------------------
/frontend/src/pages/Hero.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import Layout from "../layout/Layout";
3 | import axios from "axios";
4 | import ProductCard from "../components/ProductCard";
5 |
6 | const Hero = () => {
7 | const [products, setProducts] = useState([]);
8 | const getAllProducts = async () => {
9 | try {
10 | const { data } = await axios(
11 | "https://ecommerce-backend-new.vercel.app/api/products"
12 | );
13 | setProducts(data);
14 | } catch (error) {
15 | console.log(error);
16 | }
17 | };
18 | useEffect(() => {
19 | getAllProducts();
20 | }, []);
21 | return (
22 |
23 |
24 | {products?.map((item, id) => (
25 |
26 | ))}
27 |
28 |
29 | );
30 | };
31 |
32 | export default Hero;
33 |
--------------------------------------------------------------------------------
/backend/model/userModel.js:
--------------------------------------------------------------------------------
1 | const mongoose = require("mongoose");
2 | const bcrypt = require("bcrypt");
3 | const jwt = require("jsonwebtoken");
4 |
5 | const userSchema = mongoose.Schema({
6 | name: { type: "string", required: true },
7 | email: { type: "string", required: true, unique: true },
8 | password: { type: "string", required: true },
9 | role: { type: "string", default: "user", enum: ["user", "admin"] },
10 | });
11 |
12 | userSchema.pre("save", async function (next) {
13 | if (!this.isModified("password")) {
14 | next();
15 | }
16 | this.password = await bcrypt.hash(this.password, 10);
17 | next();
18 | });
19 |
20 | userSchema.methods.getJwtToken = function () {
21 | return jwt.sign({ id: this.id }, process.env.SECRET_KEY, { expiresIn: "2d" });
22 | };
23 |
24 | userSchema.methods.verifyPassword = async function (enteredPassword) {
25 | return bcrypt.compare(enteredPassword, this.password);
26 | };
27 |
28 | const userModel = mongoose.model("user", userSchema);
29 |
30 | module.exports = userModel;
31 |
--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontend",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "axios": "^1.5.1",
14 | "formik": "^2.4.5",
15 | "react": "^18.2.0",
16 | "react-dom": "^18.2.0",
17 | "react-icons": "^4.11.0",
18 | "react-router-dom": "^6.16.0",
19 | "react-toastify": "^9.1.3",
20 | "yup": "^1.3.2",
21 | "zustand": "^4.4.3"
22 | },
23 | "devDependencies": {
24 | "@types/react": "^18.2.15",
25 | "@types/react-dom": "^18.2.7",
26 | "@vitejs/plugin-react": "^4.0.3",
27 | "autoprefixer": "^10.4.16",
28 | "eslint": "^8.45.0",
29 | "eslint-plugin-react": "^7.32.2",
30 | "eslint-plugin-react-hooks": "^4.6.0",
31 | "eslint-plugin-react-refresh": "^0.4.3",
32 | "postcss": "^8.4.31",
33 | "tailwindcss": "^3.3.3",
34 | "vite": "^4.4.5"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/backend/middleware/errorHandler.js:
--------------------------------------------------------------------------------
1 | const notFound = (req, res, next) => {
2 | const error = new Error(`Not Found - ${req.originalUrl}`);
3 | res.status(404);
4 | next(error);
5 | };
6 |
7 | const errorHandler = (err, req, res, next) => {
8 | let statusCode = res.statusCode === 200 ? 500 : res.statusCode;
9 | let message = err.message;
10 |
11 | if (err.name === "CastError" && err.kind === "ObjectId") {
12 | message = `Resource not found`;
13 | statusCode = 404;
14 | }
15 |
16 | if (err.name === "validationError") {
17 | message = Object.values(err.errors).map((value) => value.message);
18 | statusCode = 400;
19 | }
20 |
21 | if (err.code == 11000) {
22 | message = `Duplicate ${Object.keys(err.keyvalue)} entered`;
23 | }
24 |
25 | if (err.name === "JsonWebTokenError") {
26 | message = `Json web token is invalid`;
27 | statusCode = 400;
28 | }
29 | if (err.name === "TokenExpiredError") {
30 | message = `Json web token is expired`;
31 | statusCode = 400;
32 | }
33 |
34 | res.status(statusCode).json({ message });
35 | };
36 |
37 | module.exports = { notFound, errorHandler };
38 |
--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | .loader {
6 | width: 48px;
7 | height: 48px;
8 | border-radius: 50%;
9 | z-index: 50;
10 | position: fixed;
11 | top: 50%;
12 | left: 50%;
13 | transform: translate(-50%, -50%);
14 | animation: rotate 1s linear infinite;
15 | }
16 | .loader::before,
17 | .loader::after {
18 | content: "";
19 | box-sizing: border-box;
20 | position: absolute;
21 | inset: 0px;
22 | border-radius: 50%;
23 | border: 5px solid #fff;
24 | animation: prixClipFix 2s linear infinite;
25 | }
26 | .loader::after {
27 | border-color: #ff3d00;
28 | animation: prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse;
29 | inset: 6px;
30 | }
31 |
32 | @keyframes rotate {
33 | 0% {
34 | transform: rotate(0deg);
35 | }
36 | 100% {
37 | transform: rotate(360deg);
38 | }
39 | }
40 |
41 | @keyframes prixClipFix {
42 | 0% {
43 | clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
44 | }
45 | 25% {
46 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
47 | }
48 | 50% {
49 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
50 | }
51 | 75% {
52 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
53 | }
54 | 100% {
55 | clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/frontend/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/src/routes/Router.jsx:
--------------------------------------------------------------------------------
1 | import { createBrowserRouter, useLocation } from "react-router-dom";
2 | import Hero from "../pages/Hero";
3 | import Header from "../components/nav/Header";
4 | import { Outlet } from "react-router-dom";
5 | import Login from "../pages/Login";
6 | import Register from "./../pages/Register";
7 | import Cart from "./../pages/Cart";
8 | import { ToastContainer } from "react-toastify";
9 | import "react-toastify/dist/ReactToastify.css";
10 | import { useAppStore } from "../../store/appStore";
11 | import { useEffect } from "react";
12 | import { DetailPage } from "../pages";
13 | import Loader from "../components/Loader";
14 |
15 | const Layout = () => {
16 | const { pathname } = useLocation();
17 | const { loading } = useAppStore();
18 | useEffect(() => {
19 | window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
20 | }, [pathname]);
21 | return (
22 | <>
23 | {loading && }
24 |
25 |
26 |
27 |
28 | );
29 | };
30 |
31 | const routes = createBrowserRouter([
32 | {
33 | path: "/",
34 | element: ,
35 | children: [
36 | {
37 | path: "",
38 | element: ,
39 | },
40 | {
41 | path: "login",
42 | element: ,
43 | },
44 | {
45 | path: "register",
46 | element: ,
47 | },
48 | {
49 | path: "cart",
50 | element: ,
51 | },
52 | {
53 | path: "product/:id",
54 | element: ,
55 | },
56 | ],
57 | },
58 | ]);
59 |
60 | export default routes;
61 |
--------------------------------------------------------------------------------
/frontend/src/components/ProductCard.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { useAppStore } from "../../store/appStore";
4 |
5 | const ProductCard = ({ item }) => {
6 | const { addCart } = useAppStore();
7 | const navigate = useNavigate();
8 | const productName = (name) => {
9 | if (name.length > 20) {
10 | return name.substring(0, 20) + "...";
11 | }
12 | return name;
13 | };
14 | return (
15 |
16 |
17 |
navigate(`/product/${item.id}`)}
20 | className="w-full h-full object-cover cursor-pointer"
21 | alt=""
22 | />
23 |
24 |
25 |
navigate(`/product/${item.id}`)}
28 | >
29 | {productName(item.title)}
30 |
31 |
32 | {"₹ "}
33 | {Math.ceil(item.price * 81)}
34 |
35 |
36 |
37 |
43 |
44 |
45 |
46 | {item.rating.count}
47 |
48 |
34 |
35 |
36 |
Your Cart
37 | Total Itemes : {cart?.length}
38 |
39 |
{displaycart}
40 | {!cart?.length && (
41 |
42 |
cart is empty
{" "}
43 |
44 |
45 |
46 | )}
47 |
48 | {cart?.length ? (
49 |
50 |
51 |
52 |
You Pay
53 | Check Our order Policy
54 |
55 |
56 | You Can Pay .... on This Order
57 |
58 |
59 |
60 | Total Price {"₹"} {total}
61 |
62 |
63 | Distributor Price -20
64 |
65 | Discount 40
66 |
67 |
68 |
69 | ) : null}
70 |
17 |
18 |
![]()
navigate(`/product/${item.product.id}`)}
20 | src={item.product.image}
21 | className="h-full w-full cursor-pointer object-contain"
22 | alt=""
23 | />
24 |
{" "}
25 |
26 |
navigate(`/product/${item.product.id}`)}
28 | className="cursor-pointer text-[16px] text-slate-600"
29 | >
30 | {productName(item.product.title)}
31 |
32 |
33 |
34 |
{
36 | item.quantity === 1
37 | ? removeCart(item.product.id)
38 | : removeCartQty(item.product.id);
39 | }}
40 | className="flex relative bg-white md:h-[30px] md:w-[30px] h-[24px] w-[24px] items-center justify-center rounded-full border-[1px] p-[2px] text-center text-[35px] shadow-xl"
41 | >
42 |
43 |
44 |
45 |
46 |
{item?.quantity}
47 |
48 |
56 |
57 |
58 |
59 |
60 | {"₹ "}
61 |
62 | {Math.ceil(item.product.price * 81)}
63 |
64 |
65 | removeCart(item.product.id)}
67 | className="cursor-pointer text-right text-red-500"
68 | >
69 | Remove
70 |
71 |
72 |
31 |
navigate("/")}
33 | className="font-extrabold text-[26px] cursor-pointer tracking-wide sm:tracking-widest"
34 | >
35 | Shopping Cart
36 |
37 |
38 |
39 |
40 | -
41 | (isActive ? "text-blue-400" : "")}
44 | >
45 | Home
46 |
47 |
48 | {!user && (
49 | -
50 | (isActive ? "text-blue-400" : "")}
53 | >
54 | Login
55 |
56 |
57 | )}
58 |
59 |
61 | (isActive ? "text-blue-400" : "")}
64 | >
65 |
66 | {user && (
67 |
72 | )}
73 |
74 | {user ? (
75 | setShowMenu((pre) => !pre)}
79 | />
80 | ) : (
81 | (isActive ? "text-blue-400" : "")}
84 | >
85 |
86 |
87 | )}
88 |
89 | {showMenu && }
90 |
91 |
92 | );
93 | };
94 |
95 | export default Header;
96 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # MERN eCommerce Shopping Cart
2 |
3 | This is a MERN (MongoDB, Express.js, React, Node.js) eCommerce shopping cart project that allows users to browse products online. It includes features like user authentication, cart management.
4 |
5 | 
6 | 
7 |
8 | ## Table of Contents
9 |
10 | 1. [Demo](#demo)
11 | 2. [Features](#features)
12 | 3. [Technologies Used](#technologies-used)
13 | 4. [Installation](#installation)
14 | 5. [Screenshot](#screenshot)
15 |
16 | ## Demo
17 |
18 | You can check out a live demo of this project [here](https://shopping-cart-new-one.vercel.app).
19 |
20 | ## Features
21 |
22 | - User authentication (signup, login, logout).
23 | - Form validation using
24 | - Add products to the shopping cart.
25 | - Manage the shopping cart (add, remove, update items).
26 | - Product detail page.
27 |
28 | ## Technologies Used
29 |
30 | - Frontend:
31 |
32 | - React: A JavaScript library for building user interfaces.
33 | - Zustand: A state management library for managing application state with simplicity.
34 | - Tailwind: A CSS framework for responsive and modern UI design.
35 | - Axios: A popular JavaScript library for making HTTP requests.
36 | - Formik - For handling forms and form validation.
37 | - Yup - For schema validation with Formik.
38 | - React-Toastify - For displaying toast notifications in the application.
39 | - React-Icons - For including icons in the user interface.
40 |
41 | - Backend:
42 | - Node.js: A server-side JavaScript runtime environment.
43 | - Express: A web application framework for Node.js.
44 | - Cors: A middleware for enabling Cross-Origin Resource Sharing.
45 | - Dotenv: A module for loading environment variables from a .env file.
46 | - nodemon - For automatically restarting the server during development.
47 | - bcrypt - For hashing and securing passwords.
48 | - cookie-parser - For parsing cookies in HTTP requests.
49 | - cors - For handling Cross-Origin Resource Sharing.
50 | - jsonwebtoken - For generating and verifying JSON Web Tokens for user authentication.
51 |
52 | ## Installation
53 |
54 | - Clone the repository from GitHub.
55 | - Install Node.js and MongoDB on your system if you haven't already.
56 | - Run
57 |
58 | ```
59 | npm install
60 | ```
61 |
62 | in the root directory to install the required dependencies.
63 |
64 | - Configure the MongoDB connection string in the server configuration file.
65 | - Run
66 |
67 | ```
68 | npm run dev
69 | ```
70 |
71 | start to start the development server.
72 |
73 | ## Screenshot
74 |
75 | 
76 | 
77 | 
78 | 
79 | 
80 | 
81 | 
82 | 
83 | 
84 | 
85 |
--------------------------------------------------------------------------------
/frontend/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/src/pages/DetailPage.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import Layout from "../layout/Layout";
3 | import { useNavigate, useParams } from "react-router-dom";
4 | import axios from "axios";
5 | import { useAppStore } from "../../store/appStore";
6 |
7 | const DetailPage = () => {
8 | const navigate = useNavigate();
9 | const { addCart } = useAppStore();
10 | const [singleProduct, setSingleProduct] = useState(null);
11 | const { id } = useParams();
12 |
13 | const getSingleProduct = async () => {
14 | try {
15 | const { data, status } = await axios(
16 | `https://ecommerce-backend-new.vercel.app/api/products/${id}`
17 | );
18 | setSingleProduct(data);
19 | } catch (error) {
20 | console.log(error);
21 | }
22 | };
23 |
24 | useEffect(() => {
25 | if (id) {
26 | getSingleProduct();
27 | }
28 | }, [id]);
29 |
30 | return (
31 |
32 |
33 |
34 | <>
35 | {singleProduct ? (
36 | <>
37 |
38 |
43 |
44 |
45 |
46 |
47 | {singleProduct?.category}
48 |
49 |
50 | {singleProduct?.title}
51 |
52 |
53 |
54 |
55 | {"₹ "}
56 |
57 | {Math.ceil(singleProduct?.price * 81)}
58 |
59 |
60 |
61 | Rating {": "}
62 |
63 | {singleProduct?.rating?.rate}
64 |
65 |
66 |
67 |
68 | {singleProduct?.description}
69 |
70 |
71 | Quantity :{" "}
72 |
73 | {singleProduct?.rating?.count} nos
74 |
75 |
76 |
77 |
80 |
86 |
87 |
88 |
89 | ) : (
90 |
91 | No Itemes Found
92 |
93 | )}
94 |
95 |
96 |