This is MERN Stack Ecommerce Project Made to Teach MERN Stack on YouTube

Overview

MERN E-COMMERCE TUTORIAL

Hi! My name is Abhishek Singh, I have created this tutorial to teach MERN Stack for free on YouTube.

Prerequisite

  1. Must have basic knowledge of Node, React, Express, MongoDB . I have made tutorial on each technology on YouTube , make sure to check it out. Links are Below respectively
  2. Node - https://youtu.be/BSO9C8Z-YV8
  3. React - https://youtu.be/99kgUCIMboY
  4. Express - https://youtu.be/teipbke8c4A\
  5. MongoDB - https://youtu.be/AYDP1S5BbTo
  6. RestApi - https://youtu.be/AhCSfuG9Jxw (optional)

Install Dependencies

For Backend - npm i

For Frontend - cd frontend npm i

Env Variables

Make Sure to Create a config.env file in backend/config directory and add appropriate variables in order to use the app.

Essential Variables PORT= DB_URI = STRIPE_API_KEY= STRIPE_SECRET_KEY= JWT_SECRET= JWT_EXPIRE= COOKIE_EXPIRE= SMPT_SERVICE = SMPT_MAIL= SMPT_PASSWORD= SMPT_HOST= SMPT_PORT= CLOUDINARY_NAME CLOUDINARY_API_KEY CLOUDINARY_API_SECRET fill each filed with your info respectively

Author

Instagram Click Here @meAbhiSingh YouTube Click Here 6 Pack Programmer LinkedIn Click Here @meAbhiSingh Twitter Click Here @meAbhi_Singh

Comments
  • Overlay navbar error using react-icons

    Overlay navbar error using react-icons

    ERROR in ./node_modules/react-icons/all.js 4:0-22

    The requested module './io5' contains conflicting star exports for the names 'IoLogoAndroid', 'IoLogoAngular', 'IoLogoApple', 'IoLogoBitbucket', 'IoLogoBitcoin', 'IoLogoBuffer', 'IoLogoChrome', 'IoLogoClosedCaptioning', 'IoLogoCodepen', 'IoLogoCss3', 'IoLogoDesignernews', 'IoLogoDribbble', 'IoLogoDropbox', 'IoLogoEuro', 'IoLogoFacebook', 'IoLogoFlickr', 'IoLogoFoursquare', 'IoLogoGithub', 'IoLogoGoogle', 'IoLogoHackernews', 'IoLogoHtml5', 'IoLogoInstagram', 'IoLogoIonic', 'IoLogoIonitron', 'IoLogoJavascript', 'IoLogoLinkedin', 'IoLogoMarkdown', 'IoLogoNoSmoking', 'IoLogoNodejs', 'IoLogoNpm', 'IoLogoOctocat', 'IoLogoPinterest', 'IoLogoPlaystation', 'IoLogoPython', 'IoLogoReddit', 'IoLogoRss', 'IoLogoSass', 'IoLogoSkype', 'IoLogoSlack', 'IoLogoSnapchat', 'IoLogoSteam', 'IoLogoTumblr', 'IoLogoTux', 'IoLogoTwitch', 'IoLogoTwitter', 'IoLogoUsd', 'IoLogoVimeo', 'IoLogoVk', 'IoLogoWhatsapp', 'IoLogoWindows', 'IoLogoWordpress', 'IoLogoXbox', 'IoLogoXing', 'IoLogoYahoo', 'IoLogoYen', 'IoLogoYoutube' with the previous requested module './io'

    opened by zaroon427 4
  • backend: Cannot read properties of null (reading 'role')

    backend: Cannot read properties of null (reading 'role')

    https://github.com/meabhisingh/mernProjectEcommerce/blob/a7ea9c9ea2b5264d0b9c561119931a49f04833d1/backend/middleware/auth.js#L22

    It seems like req.user.role is not working here. But I couldn't figure out exact issue. Can anyone please help me?

    image

    opened by satyasonu 3
  • Problem while using React Icons in overlay Navbar during starting of the frontend .

    Problem while using React Icons in overlay Navbar during starting of the frontend .

    ERROR in ./node_modules/react-icons/all.js 4:0-22

    The requested module './io5' contains conflicting star exports for the names 'IoLogoAndroid', 'IoLogoAngular', 'IoLogoApple', 'IoLogoBitbucket', 'IoLogoBitcoin', 'IoLogoBuffer', 'IoLogoChrome', 'IoLogoClosedCaptioning', 'IoLogoCodepen', 'IoLogoCss3', 'IoLogoDesignernews', 'IoLogoDribbble', 'IoLogoDropbox', 'IoLogoEuro', 'IoLogoFacebook', 'IoLogoFlickr', 'IoLogoFoursquare', 'IoLogoGithub', 'IoLogoGoogle', 'IoLogoHackernews', 'IoLogoHtml5', 'IoLogoInstagram', 'IoLogoIonic', 'IoLogoIonitron', 'IoLogoJavascript', 'IoLogoLinkedin', 'IoLogoMarkdown', 'IoLogoNoSmoking', 'IoLogoNodejs', 'IoLogoNpm', 'IoLogoOctocat', 'IoLogoPinterest', 'IoLogoPlaystation', 'IoLogoPython', 'IoLogoReddit', 'IoLogoRss', 'IoLogoSass', 'IoLogoSkype', 'IoLogoSlack', 'IoLogoSnapchat', 'IoLogoSteam', 'IoLogoTumblr', 'IoLogoTux', 'IoLogoTwitch', 'IoLogoTwitter', 'IoLogoUsd', 'IoLogoVimeo', 'IoLogoVk', 'IoLogoWhatsapp', 'IoLogoWindows', 'IoLogoWordpress', 'IoLogoXbox', 'IoLogoXing', 'IoLogoYahoo', 'IoLogoYen', 'IoLogoYoutube' with the previous requested module './io'

    opened by divyamaggarwal12345 3
  • Regarding Overlay-Navbar

    Regarding Overlay-Navbar

    The overlay navbar does not collapse on itself when we click any link in it. Due to this we cannot know that click actually worked until we cut the overlay navbar by ourselves.

    opened by shubhamhere 3
  • Resource not found. Invalid : _id

    Resource not found. Invalid : _id

    import ReviewCard from "./ReviewCard.js"; import { useParams } from 'react-router-dom'

    const ProductDetails = () => { const [open, setOpen] = React.useState(true); const { params } = useParams() const dispatch = useDispatch(); useEffect(() => { dispatch(getProductDetails(params?.id)) }, [dispatch, params?.id]) const { product, loading, error } = useSelector( (state) => state?.productDetails );

    **I am getting error 'Resource not found. Invalid: _id when try to navigate on a product detail from home page by selecting a product.**
    
    I have already use CastError in error.js
    //Wrong Mongodb id error
    if (err.name === 'CastError') {
        const message = `Resource not found. Invalid : ${err.path}`;
        err = new ErrorHandler(message, 400)
    }
    
    opened by just4uamitkumar 2
  • Forgot Password Error

    Forgot Password Error

    { "success": false, "message": "Invalid login: 535-5.7.8 Username and Password not accepted. Learn more at\n535 5.7.8 https://support.google.com/mail/?p=BadCredentials m13-20020a654c8d000000b0041c35462316sm14850184pgt.26 - gsmtp" }

    I Am getting this error

    Config file `JWT_SECRET = "ASDFJSDKFJSDVLKSDJFKLSDJFLKSDJDFLKSD"

    JWT_EXPIRE = 5d

    COOKIE_EXPIRE = 5

    SMTP_SERVICE = "gmail"

    SMTP_MAIL = "[email protected]"

    SMTP_PASSWORD = "12345678"

    SMTP_HOST = smtp.gmail.com

    SMTP_PORT = 465`

    sendEmail.js file `const nodeMailer = require("nodemailer");

    const sendEmail = async (options) => { const transporter = nodeMailer.createTransport({ host: process.env.SMTP_HOST, port: process.env.SMTP_PORT, service: process.env.SMTP_SERVICE, auth: { user: process.env.SMTP_MAIL, pass: process.env.SMTP_PASSWORD, }, });

    const mailOptions = { from: process.env.SMTP_MAIL, to: options.email, subject: options.subject, text: options.message, };

    await transporter.sendMail(mailOptions); };

    module.exports = sendEmail;`

    userController forgotPassword.js

    `// Forgot Password exports.forgotPassword = catchAsyncErrors(async (req, res, next) => { const user = await User.findOne({ email: req.body.email });

    if (!user) {
      return next(new ErrorHandler("User not found", 404));
    }
    
    // Get ResetPassword Token
    const resetToken = user.getResetPasswordToken();
    
    await user.save({ validateBeforeSave: false });
    
    const resetPasswordUrl = `${req.protocol}://${req.get(
      "host"
    )}/password/reset/${resetToken}`;
    
    const message = `Your password reset token is :- \n\n ${resetPasswordUrl} \n\nIf you have not requested this email then, please ignore it.`;
    
    try {
      await sendEmail({
        email: user.email,
        subject: `Ecommerce Password Recovery`,
        message,
      });
    
      res.status(200).json({
        success: true,
        message: `Email sent to ${user.email} successfully`,
      });
    } catch (error) {
      user.resetPasswordToken = undefined;
      user.resetPasswordExpire = undefined;
    
      await user.save({ validateBeforeSave: false });
    
      return next(new ErrorHandler(error.message, 500));
    }
    

    });`

    Route

    router.route("/password/forgot").post(forgotPassword);

    opened by Noushad-ansari 1
  • Redux state not updating

    Redux state not updating

    My redux state of products is not updating , the action is however dispatched and i can log it on my console but the redux toolkit shows that that state is empty. please help me with this

    image

    image

    image

    opened by Abhiraj-cuchd 1
  • In productDetails match.params.id does not work

    In productDetails match.params.id does not work

    In productDetails page i am not able to get the product details due to match.params.id please tell me how to fix this issue because match does not work with latest react

    opened by AKASH130202 0
  • Not able to turn on

    Not able to turn on "Less secure App Access" in gmail as google have removed this option...

    and it is showing me { "success": false, "message": "connect ETIMEDOUT 74.125.68.109:465" } when i click the Send in the Postman 22

    opened by amitrao91 0
  • "app-crashed --waiting for file changes before starting..."how to fix it

    every time my code is working fine but after few second it is showing ""

    "const serverSelectionError = new ServerSelectionError(); ^

    MongooseServerSelectionError: connect ECONNREFUSED ::1:27017 at Connection.openUri (C:\Users\Amit Rao\Desktop\MERN PROJECT\node_modules\mongoose\lib\connection.js:825:32) at C:\Users\Amit Rao\Desktop\MERN PROJECT\node_modules\mongoose\lib\index.js:417:10 at C:\Users\Amit Rao\Desktop\MERN PROJECT\node_modules\mongoose\lib\helpers\promiseOrCallback.js:41:5
    at new Promise () at promiseOrCallback (C:\Users\Amit Rao\Desktop\MERN PROJECT\node_modules\mongoose\lib\helpers\promiseOrCallback.js:40:10) at Mongoose._promiseOrCallback (C:\Users\Amit Rao\Desktop\MERN PROJECT\node_modules\mongoose\lib\index.js:1270:10) at Mongoose.connect (C:\Users\Amit Rao\Desktop\MERN PROJECT\node_modules\mongoose\lib\index.js:416:20) at connectDatabase (C:\Users\Amit Rao\Desktop\MERN PROJECT\backend\config\database.js:5:6) at Object. (C:\Users\Amit Rao\Desktop\MERN PROJECT\backend\server.js:10:1) at Module._compile (node:internal/modules/cjs/loader:1218:14) { reason: TopologyDescription { type: 'Unknown', servers: Map(1) { 'localhost:27017' => ServerDescription { address: 'localhost:27017', type: 'Unknown', hosts: [], passives: [], arbiters: [], tags: {}, minWireVersion: 0, maxWireVersion: 0, roundTripTime: -1, lastUpdateTime: 6053295, lastWriteDate: 0, error: MongoNetworkError: connect ECONNREFUSED ::1:27017 at connectionFailureError (C:\Users\Amit Rao\Desktop\MERN PROJECT\node_modules\mongodb\lib\cmap\connect.js:387:20) at Socket. (C:\Users\Amit Rao\Desktop\MERN PROJECT\node_modules\mongodb\lib\cmap\connect.js:310:22) at Object.onceWrapper (node:events:628:26) at Socket.emit (node:events:513:28) at emitErrorNT (node:internal/streams/destroy:151:8) at emitErrorCloseNT (node:internal/streams/destroy:116:3) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) { cause: Error: connect ECONNREFUSED ::1:27017 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1283:16) { errno: -4078, code: 'ECONNREFUSED', syscall: 'connect', address: '::1', port: 27017 }, [Symbol(errorLabels)]: Set(1) { 'ResetPool' } }, topologyVersion: null, setName: null, setVersion: null, electionId: null, logicalSessionTimeoutMinutes: null, primary: null, me: null, '$clusterTime': null } }, stale: false, compatible: true, heartbeatFrequencyMS: 10000, localThresholdMS: 15, setName: null, maxElectionId: null, maxSetVersion: null, commonWireVersion: 0, logicalSessionTimeoutMinutes: null }, code: undefined } Node.js v19.2.0 [nodemon] app crashed - waiting for file changes before starting..."

    opened by amitrao91 0
  • Forgot password

    Forgot password

    In user controller forgot password function containing await user.save({ validateBeforeSave: false }); This line of code is not work and throw error undefine and number And when i comment out this line then it work properly but then :token in user route give error token expired How can i solve it

    opened by Abhishek0943 5
Owner
Abhishek Singh
I am a Full Stack web developer as well as a C++ programmer.
Abhishek Singh
Full stack CQRS, DDD, Event Sourcing framework for Node.js

reSolve is a full stack functional JavaScript framework. CQRS - independent Command and Query sides. DDD Aggregate support. Event sourcing - using eve

ReImagined 709 Dec 27, 2022
A simple boilerplate generator for your node express backend project! 🚀

A simple boilerplate generator for your node express backend project! ??

Gunvant Sarpate 35 Sep 26, 2022
Ecommerce-backend-nestjs - Ecommerce app with Nestjs + Prisma ORM + GraphQL + SQLite

ECOMMERCE BACKEND NESTJS APP Nestjs + Prisma ORM + GraphQL + SQLite USER Create Account Login Product Create Product Get Products Get Product Search P

Rui Paulo Calei 5 Apr 6, 2022
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
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
It is a solo Project and In this repo I try to build a E-Commerce full-stack website with MERN stack technologies. For Practice purpose.

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

Alok Kumar 5 Aug 3, 2022
Created by Hashlips! In this repository, Hashlips and ScrawnyViking teach you how to create your unique randomly generated NFTs and launch them on to a free Github Domain where people can buy your NFTs from

Thank You HashLips ?? Upgraded and Articulated by ScrawnyViking aka TWECryptoDev All the code in these repos was created and explained by HashLips - P

TomorrowWontExist 16 Dec 14, 2022
AryaBota: An app to teach Python coding via gradual programming and visual output

AryaBota UI Development Note: Before you begin, make sure you have the back-end Flask app up and running. Visit aryabota-services to learn more about

null 5 Dec 18, 2021
Android/iOS app to teach the Coptic Language

ⲙⲉⲧⲣⲉⲙⲛ̀ⲭⲏⲙⲓ The Open Source Android/iOS app to learn how to read and understand the Coptic Language Join our Discord Channel About the Curriculum The

Mark Yacoub 8 Aug 30, 2022
Defi Kids is a place where families can go to teach kids about crypto

Defi Kids(Allocate) It is a platform to teach kids how to grow their allowance through the use of de-fi tools. It's designed for kids, managed by pare

Nathan Tarbert 20 Aug 18, 2022
A guide that teach you build a custom version of chromium on macOS/Windows/Linux that supporting hardware/software HEVC decoding.

enable-chromium-hevc-hardware-decoding A guide that teach you build a custom version of chromium on macOS/Windows/Linux that supports hardware/softwar

Sta Zhu 778 Jan 1, 2023
Edrys is an open-source app that helps you teach remotely.

The Open Remote Teaching Platform ?? Join our newsletter for updates & community showcases! Edrys is an open-source app that helps you teach remotely.

Edrys 236 Dec 13, 2022
BookAttic is an online bookstore made using the MERN stack.

BookAttic is an online bookstore made using the MERN stack. Link to the website. Table of contents General info Technologies Setup General info This p

Chirag Datwani 32 Nov 19, 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
Youtube clone with react and google cloud youtube API😊🤘

Getting Started with Create React App This project was bootstrapped with Create React App. UI / Demo Available Scripts In the project directory, you c

Ashutosh Mohanty 5 Apr 14, 2022
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
Full-Stack Instgram Clone using MERN Stack and Socket.io

Instagram MERN Full-Stack Instgram Clone using MERN Stack and Socket.io Visit Now ?? ??️ Tech Stack Frontend: Backend: Realtime Communication: Cloud S

Jigar Sable 326 Dec 27, 2022