DEV Community

loading...

React MERN Stack - Building a CRUD App

Sewvandi Promodya Wickramasinghe
Frontend Developer 👩🏻‍💻 | UX Designer | Free and Open Source Enthusiast | Community Lead | Writer ✍🏻
Updated on ・2 min read

Alt Text

REST API Technology

JSON Based Web Services
Express
Mongoose

Front End Technology

ReactJS
Fetch API
React router dom
Bootstrap CSS
HTML
Nodejs

Database

MongoDB Atlas

Connection url:
mongodb+srv://root:bunny@cluster0alh36.gcp.mongodb.net/OnlineFashionStore?retryWrites=true&w=majority

Main Functionalities

1)The admin can logs into the online store system using the admin email and password.

Admin email – admin@gmail.com

Admin password – 123

2)The system checks whether the login credentials are valid✅ or not❎. If the login credentials are not valid, the system re-directs to the login page. Else if the login credentials are valid, the system enters the admin into the admin dashboard.

3)In the admin page, the admin can insert new categories by entering category id and category name to the system database.🛍

4)Also, the admin can update or delete existing categories from the system database. These modifications will be updated and saved in the system database.

5)In addition to that, the admin is responsible for creating login for the store manager.👩🏻‍💼

6)Once the login is created for the store manager, the store manager will be notified via e-mail. System sends an e-mail to the store manager with the login details.📧

7)Also, the admin can update and delete existing store managers from the system database. These modifications will be updated and saved in the system database.

8)Only admin can view all the added Store Manager details. The store managers’ list is displayed in this following page.

9)User can view all the categories of the system that has been added by admin.

GitHub Repo📌

GitHub logo Sewvandiii / fashion-dujour

🛍 This is used to Deploy The Fashion Store Web Application in the Heroku Server. Changes in the Repository reflects on the server with a new build.

🏙 Online Fashion Store

Languages

JavaScript HTML CSS

FASHION DU JOUR

FASHION DU JOUR

REST API Technology

JSON Based Web Services

Express

Mongoose

Front End Technology

ReactJS

Fetch API

React router dom

Bootstrap CSS

HTML

Nodejs

Database

MongoDB Atlas

Connection url mongodb+srv://root:bunny@cluster0alh36.gcp.mongodb.net/OnlineFashionStore?retryWrites=true&w=majority

Configurations

step 1

Open terminal in VS Code in Backend Directory

step 2

Run npm install

step 3

Run node app to start backend server.

step 4

Now open terminal in VS Code in Frontend Directory.

step 5

Run npm install

step 6

Run npm start to run the app in development mode.

step 7

Open http://localhost:3000 to view it in the browser.

Admin Credentials

Admin email – admin@gmail.com Admin password – 123

Important

Once the login is created for the store manager, the store manager will be notified via e-mail. System sends an e-mail to the store manager with the login details.

Delpoy on Heroku

Frontend

https://vast-beyond-62616.herokuapp.com/home

Backend

https://infinite-meadow-55031.herokuapp.com/

License

Configuration

step 1

Open terminal in VS Code in Backend Directory

step 2

Run npm install

step 3

Run node app to start backend server.

step 4

Now open terminal in VS Code in Frontend Directory.

step 5

Run npm install

step 6

Run npm start to run the app in development mode.

step 7

Open http://localhost:3000 to view it in the browser.

Discussion (3)

Collapse
yuvinnp profile image
Yuvin Nimnaka Perera

Good work!

Collapse
sewvandiii profile image
Sewvandi Promodya Wickramasinghe Author

Thank you!

Collapse
suvink profile image
Suvin Nimnaka

Awww bunny <3