-
Full featured shopping cart
-
Product reviews and ratings
-
Top products carousel
-
Product pagination
-
Product search feature
-
User profile with orders
-
Admin product management
-
Admin user management
-
Admin Order details page
-
Mark orders as delivered option
-
Checkout process (shipping, payment method, etc)
-
PayPal / credit card integration
-
Custom database seeder script
-
React with Functional Components & Hooks
-
React router
-
React-Bootstrap UI library
-
Component level state & props
-
Managing global state with Redux (Actions & Reducers)
-
Using Redux state in components (useDispatch & useSelector)
-
Creating an extensive back end with Express
-
Working with a MongoDB database and the Mongoose ODM
-
JWT authentication (JSON web tokens)
-
Creating custom authentication middleware
-
Custom error handler
-
Integrating the PayPal API
-
Environment variables
-
Project deployment
npm install
cd frontend && npm install
Under the project root directory, create a `.env` file and include the following vars:
NODE_ENV = ...
PORT = ...
MONGO_URI = ...
JWT_SECRET = ...
PAYPAL_CLIENT_ID = ...
- To use
PayPal API
along withPAYPAL_CLIENT_ID
, checkout @https://developer.paypal.com/home
npm run dev
npm run data:import
npm run data:destroy
nodemon
npm module
concurrently
npm module
colors
npm module
morgan
npm module to log client requests on the server console
redux-devtools-extension
npm module + Google Chrome Redux DevTools
extension
dotenv
npm module
- Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env
Bootswatch - LUX
with react-bootstrap
npm module
font-awesome
CDN from cdnjs.com
react-helmet
: A document head manager for React
react-router-dom
+ react-router-bootstrap
: Integration between React Router v4 and React Bootstrap.
React Hooks (useState, useEffect, etc.)
for component-level state management
Redux Pattern
for global-level state management with redux
, react-redux
and redux-thunk
npm modules
react-paypal-button-v2
npm module for handling PayPal payments
- To use
ES Module
instead ofCommonJS Module
:
Add“type”: “module”
to thepackage.json
for your project, and Node.js will treat all .js files in your project as ES modules.
Multer
npm module for hanlding file uploading
MongoDB Atlas
+ mongoose
npm module
jsonwebtoken
npm module: An implementation of JSON Web Tokens
bcryptjs
npm module: Optimized bcrypt in JavaScript
heroku login
heroku create APP_NAME
web: node backend/server.js
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"
heroku git:remote -a APP_NAME
git push heroku master
- To match with values inside
.env
file