A simple crud application used to demonstarate crud operations in a MERN app.
View Demo
Note:
- The frontend part of the project uses Vitejs as the front end build tool.
- The frontend part of the project was bootstrapped using the command
npm init vite
- Features
- Tools and Technologies
- Dependencies
- Dev-dependencies
- Prerequisites
- Installation and setup
- Backend API
- npm scripts
- Useful Links
- Contact
- List of all users can be fetched.
- New user can be added
- A user's details can be edited
- A user can be deleted.
- HTML
- CSS
- Material UI
- Javascript
- Node.js
- Express.js
- React
- Mongodb
- Vitejs
- @material-ui/core
- axios
- react
- react-dom
- react-router-dom
- cors
- dotenv
- express
- mongoose
- @vitejs/plugin-react
- vite
- nodemon
- concurrently
- Node.js must be installed on the system.
- You should have a MongoDB database.
- You should have a code editor (preferred: VS Code)
-
Download the source code in the desired location on your system.
-
Open the code in your code editor.
-
Go to terminal and type the following command and hit enter:
npm run install-all
This will install all the dependencies and dev-dependencies required at root, at frontend and at backend in your project.
-
Create a file named ".env" inside the backend folder and enter the following credentials:
MONGO_URI=your-mongo-uri
-
Go to terminal and type the following command and hit enter:
npm run dev
This will start both backend and frontend.
-
Open browser and go to url: http://localhost:3000. You can see the app running now.
- GET /api/users [fetch all the users from the db] - GET /api/user/:id [fetch a user by id from the db] - POST /api/users [add a user into the db] - PUT /api/users/:id [update a user by id in the db] - DELETE /api/users/:id [delete a user by id from the db]
At root:
npm run dev
: Starts both backend and frontendnpm run dev-server
: Starts only backendnpm run dev-client
: Starts only frontendnpm run install-all
: Installs all dependencies and dev-dependencies required at root, at frontend and at backend.
Inside frontend folder:
npm run dev
: Starts frontendnpm run build
: build frontend for productionnpm run preview
: locally preview production build
Inside backend folder:
npm run dev
: Starts backend using nodemon.npm start
: Starts backend without nodemon.
-
This project
- Demo: https://mern-crud-aayush.herokuapp.com/
- Github Repo: https://github.com/aayush301/MERN-crud
-
Official Docs
- Reactjs docs: https://reactjs.org/docs/getting-started.html
- npmjs docs: https://docs.npmjs.com/
- Mongodb docs: https://docs.mongodb.com/manual/introduction/
- Github docs: https://docs.github.com/en/get-started/quickstart/hello-world
-
Youtube tutorials
- Mern crud: https://youtu.be/UTA2XWPj97Q
- Expressjs: https://youtu.be/L72fhGm1tfE
- React: https://youtu.be/EHTWMpD6S_0
-
Download links
- Nodejs download: https://nodejs.org/
- VS Code download: https://code.visualstudio.com/
-
Cheatsheets
- Git cheatsheet: https://education.github.com/git-cheat-sheet-education.pdf
- VS Code keyboard shortcuts: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
- CSS Selectors Cheatsheet: https://frontend30.com/css-selectors-cheatsheet/
- Email: [email protected]
- Linkedin: https://www.linkedin.com/in/aayush12/