This is a full-stack e-commerce app built using the MERN stack (MongoDB, Express, React, and Node.js).

demo

Client Side 🛠

Server Side 🛠

Project structure

├── client   
│   ├── public
│   │   ├── index.html
│   │   ├── _redirects -> Allows react-router on netlify
│   ├── src
│   ├── package.json
│   ├── .env 		->create your own
├── server   
│   ├── models
│   ├── routes
│   ├── index.js  -> main entrypoint for server side
│   ├── package.json
│   ├── .env		->create your own
│   ├──Procfile	-> heroku start

Configure Heroku

• Log in to your account, or set up a new one
• Create a new app on Heroku

Connect to Github

Next, you can configure deploys with Github. If you prefer to deploy without using Github, you can read Heroku's deployment documentation.

• In the Deploy tab, select the option to Connect this app to GitHub
• Select the branch you want to deploy your app from.

Set Environment Variables

• edit config vars from your app's Settings tab in the Heroku Dashboard.

For this projects add: MONGO_URL, PASS_SEC, JWT_SEC, STRIPE_KEY and CLIENT_ORIGIN

💡 You can only connect Heroku apps to a single GitHub repository

Next steps

More information about all of the configuration steps as well as guidance on maintaining and monitoring your app can be found in the tutorial.

If you run into any problems, feel free to open an issue in this repo.

Configure Netlify

• Log in to your account, or set up a new one
• In the console, choose Add new site and then Import an existing project to configure your app.
• Select the GitHub provider. Netlify will ask you to authenticate with GitHub.

Deploy

• For the Branch to deploy option, select deploy. If you don't have a deploy branch yet, create one off of main so that you can verify the Netlify deployment.
• For the Build command option, input whatever command you use to generate a build of the site (e.g. npm run build).
• For the Publish directory option, input the directory that houses your built assets. For React sites, this directory is typically called build/.
• Select Deploy site and view your deployed site at the link Netlify provides.

Set Environment Variables

• edit config vars from your app's Settings tab in the Netlify Dashboard.

For this projects add: MONGO_URL, PASS_SEC, JWT_SEC, STRIPE_KEY and CLIENT_ORIGIN

If your deployment was successful, Netlify will automatically deploy your site when changes are made to the deploy branch.

Local Usage

To start the server,go to the server directory: create .env file:

REACT_APP_BASE_URL= http://localhost:5000/ (for example)
REACT_APP_STRIPE= Public key from stripe

then run:

npm start

To start the client side,go to client directory: create .env file :

MONGO_URL=mongodb+srv://user:password@sqlauthority.5s3yxjh.mongodb.net/shop?retryWrites=true&w=majority
PASS_SEC= decode
JWT_SEC=decode
STRIPE_KEY=  Secret key from stripe
CLIENT_ORIGIN= http://localhost:3000/ (for example)

then run:

npm start