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:

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

What's Next

• Add a payment method solution to enable checkout and collecting payments
• Associate each Merchant to a payment account

Demo

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

Heroku Deployment

> Create a Procfile in the root directory of your application with the following command **web: npm run start:production**

Simple build for production

$ npm run production

Run the application for development

$ npm start

Run the application for production

$ npm run start:production

Languages & tools

• Node

• Express

• Mongoose

• React

• Webpack

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