Need help with mern-ecommerce?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mohamedsamara
391 Stars 196 Forks MIT License 259 Commits 8 Opened issues

Description

:balloon: Fullstack MERN Ecommerce Application

Services available

!
?

Need anything else?

Contributors list

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 :smile: 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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.