An ecommerce Website built with React and Mongoose

MERN Ecommerce

Description

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

Buyers browse the store categories, products and brands
Sellers or Merchants manage their own brand component
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.

Demo

This application is deployed on Render 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

Setup

 Create .env file that include:

  * MONGO_URI & JWT_SECRET
  * PORT & BASE_SERVER_URL & BASE_API_URL & BASE_CLIENT_URL
  * MAILCHIMP_KEY & MAILCHIMP_LIST_KEY => Mailchimp configuration
  * MAILGUN_KEY & MAILGUN_DOMAIN & MAILGUN_EMAIL_SENDER => Mailgun configuration
  * GOOGLE_CLIENT_ID & GOOGLE_CLIENT_SECRET & GOOGLE_CALLBACK_URL => Google Auth configuration
  * FACEBOOK_CLIENT_ID & FACEBOOK_CLIENT_SECRET & FACEBOOK_CALLBACK_URL => Facebook Auth configuration
  * AWS_ACCESS_KEY_ID & AWS_SECRET_ACCESS_KEY & AWS_REGION & AWS_BUCKET_NAME => AWS configuration

Start development

$ npm run dev

Simple build for production

$ npm run build

Run build for production

$ npm start

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",
    }

View Source Code

Post Views: 77