This CRUD (Create, Read, Update, Delete) application is built using the MERN stack (MongoDB, Express.js, React.js, Node.js). It allows users to perform basic operations on user data including creating new users, reading user details, updating user information, and deleting users.
- Create User: Add a new user with name, email, and password.
- Read User: View details of all users or a specific user.
- Update User: Modify existing user information.
- Delete User: Remove a user from the database.
- Frontend: React.js
- React Router for navigation
- Axios for API requests
- Tailwind CSS for styling
- Backend: Node.js, Express.js
- MongoDB for the database
- Mongoose for ORM
- Bcrypt for password hashing
- Deployment: Deployed on Render
- Node.js installed
- MongoDB installed and running locally or an account on MongoDB Atlas
-
Clone the repository:
git clone /~https://github.com/Varunyadavgithub/CRUD-app.git cd crud-application
-
Install backend dependencies:
cd backend npm install
-
Create a
.env
file in thebackend
directory and add your environment variables:MONGO_URI=your_mongo_database_uri PORT=3000
-
Start the backend server:
npm start
-
Open another terminal window and navigate to the frontend directory:
cd frontend
-
Install frontend dependencies:
npm install
-
Start the frontend development server:
npm start
- GET /api/v1/user/getusers: Get all users
- GET /api/v1/user/getuser/:id: Get a single user by ID
- POST /api/v1/user/create: Create a new user
- PUT /api/v1/user/update/:id: Update an existing user by ID
- DELETE /api/v1/user/delete/:id: Delete a user by ID
-
Navigate to the frontend application in your browser:
http://localhost:5173
-
Use the application interface to perform CRUD operations:
- Create: Fill out the form to create a new user.
- Read: View the list of users.
- Update: Edit user details by clicking the update button.
- Delete: Remove a user by clicking the delete button.
crud-app/
├── backend/
│ ├── controllers/
│ ├── models/
│ ├── routes/
│ ├── .env
│ ├── server.js
│ └── package.json
├── frontend/
│ ├── src/
│ │ ├── Components/
│ │ ├── App.js
│ │ ├── index.js
│ └── package.json
└── README.md
For any questions or feedback, please contact:
- Name: Varun Yadav
- Email: yadav.varun056038@example.com
- LinkedIn: Your LinkedIn Profile
- GitHub: Your GitHub Profile
Happy Learning 🌱 Happy Coding 💖