An eCommerce website where guests or logged in customers can add items to cart and checkout. Built with MERN stack and Redux.
Additional description about the project and its features.
Dashboard:
- MONGODB
- EXPRESS JS
- REACT
- NODE JS
- REDUX
- REACT-BOOTSTRAP
- JSONWEBTOKEN
- EXPRESS-VALIDATOR
- MULTER
- BCRYPT
- HELMET
- REACT INFINITE SCROLL COMPONENT
- AXIOS
- ESLINT
- GITHUB ACTIONS
- VSCODE
To have this app on your pc, you need to:
-
download or clone this repo:
- Clone with SSH:
git@github.com:javitocor/ecommerce-MERN.git- Clone with HTTPS
https://github.com/javitocor/ecommerce-MERN.git -
In the project directory, you can run:
Install dependencies in your home folder with:
npm installGo to the './frontend' folder and install the frontend dependencies:
npm install
And then:
npm run build
Back to the home folder, run the server:
npm run devstartAccess the page by typing in your web browser
http://127.0.0.1:8000/You can also run the app bY running the server in one port and react in another, like so: on the project root, run:
npm run devstart
on the frontend folder, run:
npm start
You can access the app by typing http://localhost:3000 in the browser.
This project wants to be a basic template to build a eCommerce website with authentication and authorizations. The backend is based in Nodejs and Expressjs using Mongoose as a database. Most routes are protected, so users need a JWT token to access some pages, but allows guest users to access and create orders. You need to be an admin to perform the most critical operations as delete or update products or roles. The frontend is built with React&Redux using react route dom to perform navigation and some extra libraries, like react-bootstrap, for de UI.
All CRUD operations to manage Customers, Products, Orders, Categories, Shipping Addresses, OrderItems and Roles. As an example:
Register
post http://localhost:8000/api/auth/signup
Login
post http://localhost:8000/api/auth/login
Logout
get http://localhost:8000/api/auth/logout
Get all products
get http://localhost:8000/api/products/
Get product detail
get http://localhost:8000/api/products/:id
Update product
put http://localhost:8000/api/products/:id
Delete product
delete http://localhost:8000/api/products/:id
You can check all the routes and permissions needed in the routes folder
There are 3 different type of Roles, Guest, Basic and Admin. Guest user will be the one not loggedin. When a user signup, by default, will be a Basic role. Roles basic and Admin are create first time you connect with MongoDb database.
Once a user signs up, needs to login. In the response after login, the user will get a JWT token that will need to add in the headers request, as 'x-access-token', to access the protected routes using Postman or cURL. Anyway, react will store the user token in localStorage and from there will be uploaded to redux initial state, so a normal user will not need to worry about. LocalStorage is deleted every logout. In future updates, the token will be send via HttpOnly for safety reasons.
In case you want to take a look on how the website looks with data, you can run npm run seed, and automatically will get 20 different products.
The cart information is saved in a browser cookie, this allows access to the user's cart after logout, close the browser or access the web days after. Also allows a guest user make operations in the website. The cart cookie is removed after checkout.
- Send cookies via HttpOnly
- Add admin panel
- Add avatar field to customers
👤 Javier Oriol Correas Sanchez Cuesta
- Github: @javitocor
- Twitter: @JavierCorreas4
- Linkedin: Javier Oriol Correas Sanchez Cuesta
Contributions, issues and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- Express Docs
- React Docs
- Redux Docs
- React Bootstrap Docs
- Multer Docs
- Express Validator Docs
- Mongoose Docs
- API to seed database
This project is MIT licensed.