MERN Ecommerce project app. This is my first web application done with educational purposes in order to learn new concepts about web development such as global state management.
It's a basic online shop where a registered user can check and add products in the shopping cart and finally make the purchase through a Paypal account. Admin users are able to list and edit users, add new products (upload images from computer) and also approve purchase orders.
View demo
admin@example.com / 123456
I have chosen MERN stack due to its deployment easiness:
- Database: MongoDB Atlas + Mongoose
- Backend: API Express JS Framework (Node) + JWT Auth
- Frontend: React (JavaScript + Hooks + Api Context) + Redux + Formik + Material-UI components and theming
- Testing: Frontend E2E tests with Cypress
For the the development process I decided to setup up Prettier + ESlint + Husky dependencies so as to assure an code format without broken rules in each git commit. Finally the website has been deployed on Heroku.
Clone this repository and install dependencies for backend and frontend:
Before installing, download and install Node.js in case you don't have it. Node.js 10 or higher is required.
After installation is done, download all package.json dependencies with
npm install:
Backend (root index package.json) and inside frontend folder:
$ npm installAdd .ENV file
Make sure you create .env file in the root with the properly enviroment properties:
NODE_ENV = development
PORT = 5000
MONGO_URI = _YOUR MONGO DB URI
JWT_SECRET = _YOUR JWT SECRET CONSTANT
PAYPAL_CLIENT_ID = _YOUR PAYPAL CLIENT ID FROM PAYPAL DEVELOPER CENTER
Useful npm scripts:
Run backend server and frontend:
$ npm run devScript to seed mongo database with test data (./backend/data):
$ npm run data:importScript to destroy mongo database data (./backend/data):
$ npm run data:destroyThe application has been developed following a tutorial from Udemy with some differences so as to adapt to my custom components and material-ui library. There are some minor bugs and writing review system couldn't be finished due to lack of time. In the future I would like to refactor some parts and apply redux-form. I set up Formik library in order to manage form validations, currently is working in user register screen only.
Just star or fork this repository, and follow my github. You have supported me!