This project aims to implement a Coffee Shop E-commerce portal. A user can buy a particular coffee product and can place an order. The coffee includes the espresso, mocha, Americano, Caffe Latte, etc. The data is taken online from websites about coffee and may or may not be true.
Project Video Link
Languages used for implementation:
- Frontend: React, Redux
- Backend: Node, Express
- Database: MongoDB Atlas Cluster
For Authorization, JWT tokens were used.
By default all users are Non-admin. Admin user can be set in database.
Test Admin user:
Email : [email protected]
Password : Admin@123
Test Normal users:
Email : [email protected]
Password : Password@123
Email : [email protected]
Password : Password@123
Some Screenshots:
-
Add new Item to MongoDB collection
-
Admin user features - Add / Delete / Update
-
Login Dropdown
-
Register Dropdown
-
Search within category and name (interleaved and seperate)
-
Shopping Cart - Add / Subtract the items
-
Update item with soft delete
- Soft delete here means not showing the product in the listing
- Hard delete here means deleting the product from the database
Database Design: I have used 3 collections in MongoDB. The database is hosted on MongoDB cluster so that it can be accessed anywhere.
- Items: This collection has all the items listed on the coffee shop. It has the following document structure:
| Schema key | Schema description |
|---|---|
| id | ID of the item auto created by MongoDB |
| name | Name of the item |
| description | Description of the item |
| category | Category of the item |
| price | Price of the item in integers |
| units | Units of the item in integers |
| softDelete | If this is true, then the product is not shown to the non-admin user |
| img | This property takes in the URL of the product |
| date | This property store the time when the product was added in the document |
- Users: This collection stores all the user who are registered and who can place a order.
| Schema key | Schema description |
|---|---|
| id | ID of the user auto generated by User |
| name | Name of the user |
| isAdmin | If this property is true, the user can access other features of the shop like, Add / Delete / Update Product |
| This stores the email used for signing in. | |
| password | Password is stored in the encrypted format. |
| register_date | This date is the date when the user was created. |
- Orders : This collection stores the order information of the user
| Schema key | Schema description |
|---|---|
| id | ID generated by MongoDB |
| order | This is an array of objects which have the items and their quantities and the prices |
| user | This is a object which stores the userId, email and isAdmin details. |
- frontend/ - React/Redux code
- server.js - NodeJS, Express
React : Port 3000
Express : Port 5000
Run
npm installin main directory and frontend/ directory.
Run project by (Concurrent Execution of React and Node) : npm run dev
See the project at http://localhost:3000
React Commands:
npm install -g create-react-app
npx crete-react-app frontend
npm install axios --save
Add "proxy": "http://localhost:5000", to package.json of frontend/
npm install redux
npm install react-redux
npm install react-router-dom
Express Commands:
npm install -g express-generator
express coffee-shop
npm install -D nodemon
npm install mongoose --save
npm install bcryptjs --save
npm install jsonwebtoken --save
npm install config --save
npm install -D concurrently
nodemon server.js
* If cors Error `npm install --save cors`
MongoDB commands:
md \data\db
cd “C:\Program Files\MongoDB\Server\3.0\bin” (or wherever you installed MongoDB)
mongod
Error resolve:
- nodemon : File C:\Users<Username>\AppData\Roaming\npm\nodemon.ps1 cannot be loaded because running scripts is disabled on this system.
For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
In this case for Windows, Run as Administrator and type:
Set-ExecutionPolicy -ExecutionPolicy Unrestricted and then select Y After that nodemon can run on the machine
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent