DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

An ecommerce store built with MERN stack, and utilizes third party API's

MERN Ecommerce

Description

An ecommerce store built with MERN stack, and utilizes third party API's

An ecommerce store built with MERN stack, and utilizes third party API’s. This ecommerce store enable three main different flows or implementations:

  1. Buyers browse the store categories, products and brands
  2. Sellers or Merchants manage their own brand component
  3. Admins manage and control the entire store components
  • features:
    • Node provides the backend environment for this application
    • Express middleware is used to handle requests, routes
    • Mongoose schemas to model the application data
    • React for displaying UI components
    • Redux to manage application’s state
    • Redux Thunk middleware to handle asynchronous redux actions

Database Seed

  • The seed command will create an admin user in the database
  • The email and password are passed with the command as arguments
  • Like below command, replace brackets with email and password.
  • For more information, see code here
npm run seed:db [email- ***@****.com] [password- ******] // This is just an example.

Enter fullscreen mode Exit fullscreen mode

Demo

This application is deployed on Vercel Please check it out 😄 here.

See admin dashboard demo

Install

Some basic Git commands are:

$ git clone https://github.com/mohamedsamara/mern-ecommerce.git
$ cd project
$ npm install

Enter fullscreen mode Exit fullscreen mode

Start development

$ npm run dev

Enter fullscreen mode Exit fullscreen mode

Simple build for production

$ npm run build

Enter fullscreen mode Exit fullscreen mode

Run build for production

$ npm start

Enter fullscreen mode Exit fullscreen mode

Languages & tools

Code Formatter

  • Add a .vscode directory
  • Create a file settings.json inside .vscode
  • Install Prettier – Code formatter in VSCode
  • Add the following snippet:
    {
      "editor.formatOnSave": true,
      "prettier.singleQuote": true,
      "prettier.arrowParens": "avoid",
      "prettier.jsxSingleQuote": true,
      "prettier.trailingComma": "none",
      "javascript.preferences.quoteStyle": "single",
    }

Enter fullscreen mode Exit fullscreen mode

GitHub

View Github

Top comments (0)