Full Stack Web Development with MERN: Building CRUD

Set up a server workspace with client and server folders, initialize npm and create index.js, then install dotenv, body-parser, express, mongoose, and nodemon as a dev dependency.

Connect the express app to a MongoDB database using mongoose, after importing express, mongoose, body-parser, and dotenv, and configuring the dot env file with port and Mongo URL.

Create a clear folder structure for a MERN app by adding a user model, a user controller, and a user route to handle requests, data processing, and MongoDB integration.

Define a mongoose user schema with name, email, and address, and export the model. Create an asynchronous function to insert users, check existing emails, save data, and return outcomes.

Get all users from a MongoDB database by implementing an async controller using the find method, with try-catch error handling and 404/200 JSON responses. Wire this to the /api/users route.

Learn how to retrieve a user by id with an http get request, extracting the id from request.params.id, querying the database, and returning 200 or 404.

Learn to delete a user by id via http delete, using findByIdAndDelete, handle not found responses, and return a 200 status with the json message user deleted successfully.

Set up a React app project folder, initialize with create-react-app, install and configure bootstrap, and build a get user component with a user table in app.js.

Create a bootstrap-styled user table with headers serial number, name, email, address, and actions, add a bootstrap primary button for adding users, and style with user.css.

learn to add font awesome icons to a react mer n app by installing font awesome, adding the cdn, and replacing update and delete with icons and user plus icon.

Fetch dynamic user data from a backend with axios, store it in state using the useState and useEffect hooks, and render name, email, and address in a table.

Install and configure react-router-dom to enable client-side routing, define a browser router and routes for / and /add, and navigate with Link to display the add user form.

Build an add user form in a React project by creating add user.js and add user.css, with inputs for name, address, and email, and a submit button.

Build a React form that captures name, email, and address, updates state with useState and onChange, posts data to the /user API with axios, and navigates home on success.

Set up React hot toast on the client, import toaster in index.js, and display 'user created successfully' on submission; adjust the backend to return a success message.

Update user data using a dedicated update form, routing to update/:id, pre-filling fields with the current user via axios get, and submitting changes with axios put showing a success toast.

Implement delete user functionality in a MERN app by adding an asynchronous back end delete function, filtering the user list, and displaying a toast confirmation.