[FullStack] E-Commerce Shopping Platform developed using the modern technology stacks, MERN (MongoDB, Express, React, Node), MailChimp, Google Analytics, Braintree(PayPal) ποΈ
If you guys like my work, please do support my work by becoming a patron here:
https://www.patreon.com/ghostDragoon95
- Cloning
- Installation
- File Structure
- Language & Tools
- Integration
- Deployment
In your terminal of the destination folder, run the following command:
$ git clone https://github.com/SilvinPradhan/eCommWeb.git <eCommWeb>
- After cloning the project, navigate inside the project
> cd eCommerceWeb
> npm install [//]: # (Install Dependencies and Packages.)
> cd .. <!--- navigate out of the backend folder --->
> cd eComm-client <!--- navigate inside client project folder --->
> npm install <!--- install package dependencies --->
- To setup the server, navigate inside the backend project folder, i.e, eCommerceWeb. Run the following commands:
- sudo touch .env // Create an environment variable file
- Add the following environment variables in
.env
file: [Image file here!] - Now, in the terminal of the backend project folder, run the following command:
$ npm run server
- For the
DATABASE
environment variable, you need to set up the Free Tier Cluster for MongoDB Atlas. Follow this site which is a walkthrough for the setup:
https://studio3t.com/knowledge-base/articles/mongodb-atlas-tutorial/
- Add a new terminal on the same Parent Directory (eCommWeb)
> cd eComm-client
> sudo touch .env
[Image file here!]
- Add the following lines to the
.env
file:
SKIP_PREFLIGHT_CHECK=true
REACT_APP_API_URL='http://localhost:8000/api'
- Now test if the React App is working:
$ npm run start
- Backend Directory Tree
eCommerceWeb/
βββ controllers
βΒ Β βββ auth.js
βΒ Β βββ braintree.js
βΒ Β βββ category.js
βΒ Β βββ order.js
βΒ Β βββ product.js
βΒ Β βββ user.js
βββ helpers
βΒ Β βββ dbErrorHandler.js
βββ loading.js
βββ models
βΒ Β βββ category.js
βΒ Β βββ order.js
βΒ Β βββ product.js
βΒ Β βββ user.js
βββ package-lock.json
βββ package.json
βββ routes
βΒ Β βββ auth.js
βΒ Β βββ braintree.js
βΒ Β βββ category.js
βΒ Β βββ order.js
βΒ Β βββ product.js
βΒ Β βββ user.js
βββ validator
βββ loading.js
- Frontend Directory Tree
ecomm-client/
βββ README.md
βββ package-lock.json
βββ package.json
βββ public
βΒ Β βββ favicon.ico
βΒ Β βββ index.html
βΒ Β βββ logo192.png
βΒ Β βββ logo512.png
βΒ Β βββ manifest.json
βΒ Β βββ robots.txt
βββ server.js
βββ src
βββ 404
βΒ Β βββ PageNotFound.js
βΒ Β βββ PageNotFound.scss
βββ App.js
βββ admin
βΒ Β βββ AddCategory.js
βΒ Β βββ AddProduct.js
βΒ Β βββ ManageProducts.js
βΒ Β βββ Orders.js
βΒ Β βββ UpdateProduct.js
βΒ Β βββ apiAdmin.js
βββ auth
βΒ Β βββ AdminRoute.js
βΒ Β βββ PrivateRoute.js
βΒ Β βββ user.js
βββ config.js
βββ core
βΒ Β βββ Header.js
βΒ Β βββ Home.js
βΒ Β βββ Layout.js
βΒ Β βββ apiCore.js
βΒ Β βββ cards
βΒ Β βΒ Β βββ Card.js
βΒ Β βΒ Β βββ ShowImage.js
βΒ Β βββ cart
βΒ Β βΒ Β βββ Cart.js
βΒ Β βΒ Β βββ cartHandler.js
βΒ Β βββ checkbox
βΒ Β βΒ Β βββ CheckBox.js
βΒ Β βββ checkout
βΒ Β βΒ Β βββ Checkout.js
βΒ Β βββ loading
βΒ Β βΒ Β βββ loading.js
βΒ Β βββ newsletter
βΒ Β βΒ Β βββ NewsletterForm.js
βΒ Β βΒ Β βββ NewsletterSubscribe.js
βΒ Β βββ price
βΒ Β βΒ Β βββ FixedPrice.js
βΒ Β βββ product
βΒ Β βΒ Β βββ Product.js
βΒ Β βββ radiobox
βΒ Β βΒ Β βββ RadioBox.js
βΒ Β βββ search
βΒ Β βΒ Β βββ Search.js
βΒ Β βββ shop
βΒ Β βββ Shop.js
βββ loading.js
βββ reportWebVitals.js
βββ routes
βΒ Β βββ routes.js
βββ setupTests.js
βββ static
βΒ Β βββ images
βΒ Β βββ cards
βΒ Β βΒ Β βββ homepage.png
βΒ Β βββ categoryBG
βΒ Β βββ bg.jpg
βββ style.css
βββ user
βΒ Β βββ AdminDashboard.js
βΒ Β βββ Profile.js
βΒ Β βββ UserDashboard.js
βΒ Β βββ apiUser.js
βΒ Β βββ signin.js
βΒ Β βββ signup.js
βββ utils
βββ miscellaneous.js
- Node
- Express
- Mongoose
- React
- Webpack
- Google Analytics
Send newsletter to connect with your audience? Maybe your application has user
signup functionality and you have a
great database of emails. In this case, there are ways to take advantage of that database and use this column to create
your contact list directly. And maybe your web application does not require sign up and you're not capturing those that
come to your website. It is vital to have an easy and quick access to form a contact list and stay connected with your
audience/customers. This is all possible with integrating Mailchimp
which does all of the heavy lifting for you.
[Optional]
- Get to Mailchimp's site and sign up for a free account here.
- Go the terminal of the
frontend
directory of your project, and run the following command:$ npm i react-mailchimp-form
- In your Mailchimp navigate to your dashboard, and to your βAudienceβ tab. Youβll need to make sure that you have your contact list initiated.
- Copy the HTML and extract the action from βSignup Forms > Embedded formsβ.
Note: This βSignup Formβ can be navigated to from the Audience Tab, as well. While in βEmbedded formsβ youβll see the section in the right column βCopy/paste onto your siteβ.
- Do not copy the whole block of code, but the following string in
<form action="COPY_MAILCHIMP_URL" />
- In the client side directory, navigate to
.env
file and paste the copied string (COPY_MAILCHIMP_URL) into a new environment variable, i.e, REACT_APP_MAILCHIMP_URL='COPY_MAILCHIMP_URL'.
- Now, navigate to your NewsletterSubscriptionForm jsx file and build a form. You need to test making sure that all of your signups are hitting your Audience Contact list in MailChimp.
- To COPY a custom Newsletter Subscription Form that I built, navigate to ->
src/core/newsletter/NewsletterSubscribe
- Before pushing the code to the github repo, make sure TO MOVE YOUR βaction=β value to a .env file to hide your personal, secret mailchimp key.
What can we do with Google Analytics?
- You will be able to track your revenue,
- Track user flow/traffic to your site,
- Track your new user acquisition rate,
- Even track which age-group are more interested in your business,
- Also, you can gain insight into the region they live in.
- Create an account in Google Accounts: google.analytics.com
If you have already setup an Google Account, you just have to set up a new account and give it a name. - Create a
property
Property is a way for Google to track your website. We need to create a new property for our website.- Go to your dashboard and find
Admin
->Create New Property
- Fill up the required name and other details and provide the URL of your website.
[ Important ]
Be sure to click on the Advanced Settings and turn on the Create Universal
* Then Select a property and get the tracking id and save it somewhere.
- Go to your dashboard and find
- Now you are done setting up your project in Google Analytics. If you have a live website you will start getting some insights about the visitors already.
- [React] Install Dependencies:
- First, install react-ga package from npm. Itβs the official npm package for React integration with Google analytics.
yarn add react-ga
ornpm i react-ga -S
- First, install react-ga package from npm. Itβs the official npm package for React integration with Google analytics.
- Setup Google Analytics inside your React Project
- Inside
App.js
orindex.js
, add the following code:
import ReactGA from 'react-ga'; const TRACKING_ID = "UA-12341234-1"; // YOUR_OWN_TRACKING_ID ReactGA.initialize(TRACKING_ID);
- Inside
- Integration with React Router
We can create a RouteChangeTracker component to listen to the changes in route and send data back to Google Analytics
import { withRouter } from 'react-router-dom'; import ReactGA from 'react-ga'; const RouteChangeTracker = ({ history }) => { history.listen((location, action) => { ReactGA.set({ page: location.pathname }); ReactGA.pageview(location.pathname); }); return <div></div>; }; export default withRouter(RouteChangeTracker);
- Do not forget to add the RouteChangeTracker component inside your App.js file.
You can find the server documentation with the steps to setup and deploy the WebApp: Server Documentation