MERN Stack: All You Need to Know with Practical Project

Learn how to run Node.js code on your local machine using Visual Studio Code, terminals like Git Bash or PowerShell, and simple console logs to test output.

Explore the Node.js global object and how it differs from the browser's window, showing how setTimeout and setInterval work in Node.js and are globally available.

Learn how modules in node js prevent global scope pollution through an immediately invoked function expression, illustrating the modular pattern and encapsulation.

Learn to import and use the Node.js path module, inspect its object, and parse a file path to obtain root, dir, ext, and base name across windows and unix systems.

Learn how to use the Node.js os module by importing it, then inspect system properties such as type, arch, hostname, platform, freemem, and CPUs to understand your operating environment.

Demonstrates using the fs module to read, write, append, and delete files with readFileSync, writeFileSync, appendFileSync, and unlinkSync. Explains buffers and utf8 encoding, and using toString for display with test.txt.

Learn to read a file with a server read stream that buffers data and streams to the client, using create read stream and handling data and end events.

Discover how Express.js, a popular Node.js framework, simplifies building large-scale apps and teamwork, explore its history from 2010 to IBM, and review its official docs and core sections.

Create your first express server by initializing an app with express, defining a get route for /, and sending a homepage response on port 8000.

Pass the request body as JSON and convert it with express.json. Understand headers like content-type and accept, and see name and email parsed from the body.

Explore dynamic route parameters in an express app by using req.params to fetch a user id and return corresponding user details, with es6 destructuring showing id as a string.

Send key=value pairs after a question mark to the server as query strings. Access them with request.query on the server, using destructuring for name and email.

Learn to use express router to create sub routes for admin and student, mount them with app.use, and define home routes that reflect base URL, original URL, and path.

Learn how cookies work in a MERN stack app: read server cookies, set cookies with res.cookie, and clear cookies with res.clearCookie, using postman for testing.

Explore the MERN stack's request object, including headers, URL, path, method, protocol, body, cookies, and query params, and learn how Express extends raw Node requests.

Explore the request object and inspect hostname, ip, method, protocol, and secure status. See how accepts and content-type headers shape responses in trials with Postman.

Discover the response object, sending a single reply with json, text, or html, setting headers and cookies, and using methods like send, status, and redirect.

Explore how to format responses in a MERN app by handling accept headers with response.format, returning text/plain, application/json, or text/html based on client needs.

Middleware is a function in an express app that accesses request and response, uses next to pass control, and can send a response or trigger error handling.

Explore error handling in Express with synchronous and asynchronous code, using built-in and custom middleware, next(err), and clear error messages.

Install MongoDB community server on Windows as a service, and install the Mongo shell and Compass for interaction. Add the bin path to PATH and verify the local server.

Install the MongoDB driver, create a MongoClient, and connect your Node.js app to a local MongoDB instance via localhost:27017 to prepare for add, update, delete, and get operations.

Learn to connect a Node.js app to MongoDB, create a database and a student collection, and insert a single student document using a post route.

Learn to add data to database from client side using json body, postman, express.json, and use insert one for single records and insert many for multiple records, verified in MongoDB.

Learn to read multiple documents in MongoDB by using find instead of find one, converting input types with parseInt, and querying by fields like age or department.

Learn how to delete a single document in a MERN stack app using MongoDB's find one and delete method with email query and clear success or error responses.

Learn to delete multiple documents in MongoDB using delete many, by department, with a parameter object and ES6 shorthand; verify results in Compass and Postman.

Define a schema with mongoose to specify fields and data types, then create a model from it and use it to add, update, delete, and fetch student records.

Add a single and multiple student documents using mongoose by creating post routes, using the student schema, and async/await with try/catch to save data and handle errors.

Learn to update a single document in mongoose with find one and update and find by id, using query, params, and body values, and verify in MongoDB Compass.

Update multiple documents using Mongoose updateMany with a department query and an age update, via a /student/multiple route, with try-catch error handling and a 200 success response.

Learn to delete a single document with Mongoose using findOneAndDelete and findByIdAndDelete via a single route with async/await, error handling, and Postman testing.

Explore MongoDB Compass, a GUI tool to perform create, read, update, and delete operations with Mongoose, search by key-value, and import or export data with json or csv.

Build a todo app with express.js and MongoDB using mongoose and a template engine. Create, edit, and delete todos with created and updated timestamps, plus sorting by last created.

Add a prepared express project to a GitHub repository, create a .gitignore to exclude node modules, and initialize git, commit, and push to main.

Import mongoose and connect to the MongoDB database using the connect method with a localhost url and the database name, logging a successful connection or any errors.

Connect MongoDB with a Node.js app and scaffold a to-do list page, creating views/index.js with HTML boilerplate and a get route to render the page at localhost:8000.

Create a new todo page in a MERN app by building a todo form (title and description), wiring an add todo route, and implementing error handling.

Create a delete todo confirmation page by adding a new view, setting up a route, and rendering a confirmation with a back button and a yes option for deletion.

Add an external CSS file to a MERN stack project by creating a public/css folder, linking style.css in index.js, and serving static assets with express.static, resulting in styled pages.

Build clickable buttons by wiring routes like /add to do, /update to do, /delete to do, and fix the back button to use the slash path, building on external css.

Learn to set dynamic titles for a todo app across list, add, edit, and delete pages by passing a title via an object and rendering it with template syntax.

Add todo functionality using a todo model, enabling creating todos via a post route /addtodo with urlencoded data, using body-parser to parse data, validating title, handling errors, and showing timestamps.

This code refactoring lecture separates the database connection from index.js by introducing an init/mongodb.js with a connectMongoDB function using async/await and try/catch.

Refactor the MERN project by creating a models folder for the todo model in 2d.js. Export the model with module.exports and import it in index.js, removing the extra mongoose import.

Learn to use environment variables in a Node.js app by configuring dotenv, reading process.env, and securely handling the MongoDB connection URL and port.

Test the project after refactoring by reloading the browser, add a todo with description six, and confirm items 2 to 6 appear on the user interface and in MongoDB Compass.

Update a todo item by editing the preface title and description in edit form, passing the todo id via the query string, and handling the update with a post route.

Implement delete todo functionality with a confirmation page, passing the id via query string and handling yes or no to delete and redirect to the home page.

Add a new todo with a title and description, save it, and verify the list updates. Edit the item and update the title, description, and time, then delete with confirmation.

Clone this project from the GitHub repository using the ssh link, install dependencies with npm i, and start the app with npm start to view it at localhost:8000.

Analyze project requirements for a four-module, multi-user restful api project. Implement sign up, sign in, get password, change password; manage files, categories, and posts with role-based access.

Set up a restful blog api project in the mern stack by initializing npm, installing express and mongoose, adding dotenv and body-parser, and creating app.js and index.js.

Set up a cloud MongoDB Atlas cluster on Amazon Web Services in Singapore with the m10 tier, create a user, and copy the connection URL for Node.js and MongoDB Compass.

Create a Mongoose user model with fields name, email, password, and role, enforce a six-character minimum, set timestamps, and export via index.js for Atlas use.

Create a signup route in the auth module, wire a signup controller to create and save a new user from the user model, and respond with a 201 status.

Test the signup route using postman by sending name, email, and password to localhost:8000/api/v1/auth/signup, then confirm a new user appears in MongoDB with default role 3.

Navigate MongoDB Cloud Atlas in the browser, log in, and browse the blog database to view the user collection and user one details (email, password, role) from anywhere.

Install and import Morgan, a third-party middleware, to log signup requests in a MERN app, then test the sign-up route and review the console logs.

Learn to structure API responses in a MERN stack app by returning an object with status code, status boolean, and message, as demonstrated with Postman tests.

Learn to implement error handling middleware by creating a middleware folder with error handler and index files, exporting the middleware, and applying it in app.js to standardize error responses.

Learn how to test custom error handling middleware in a MERN stack project using Postman, by throwing errors in the controllers and validating 500, 400, and 404 responses.

Create a not found route in express using app.use('*', notFoundController) to handle unmatched requests, returning a 404 JSON with status false and message not found.

Learn how to securely hash user passwords using bcrypt js with 12 salt rounds, implement a hashPassword utility, and store hashed value in the database via the auth controller.

Create the sign in route and controller, validate email and password with a sign in validator, and compare the password with bcrypt for authentication.

Generate a json web token via the sign-in route and protected route, including user id, name, email, and role, with a seven-day expiry and a secret key from env.

Implement email verification by generating a six-digit code, store it in the user model as verification code and is verified, and verify by matching the code.

Learn to send verification emails in a MERN app with node mailer, configure Gmail SMTP, and deliver an HTML email containing a code to users.

Implement forgot password flow in a MERN app by creating a send forgot password code route, validating email, generating six-digit code, saving it to the user model, and emailing it.

Develop a recover password feature with a post route, controller, and validator to verify email and code, hash and update the new password, and return a success response.

Implement authenticate middleware to protect the root and enable change password with the login token; decode the jwt payload to access user details for the route.

Implement a secure change password flow with old and new password validation. Compare the old password to the stored hash, hash the new password, and update the user via middleware.

Create a category model with mongoose by defining a category schema featuring title and description, add an updated by user reference, enable timestamps, and export the category module via index.js.

Build an add category feature in a MERN app by creating a category route, validator, and controller, protecting the route and saving category with title, description, and updated by user.

update category workflow uses admin middleware to validate category id, update title or description, set updated by user, and enforce existence and duplicate title checks with a 200 response.

Create a delete route for a category, protect with admin and id validation, implement a delete category controller with async try-catch, and return 200 after deleting; 404 if not found.

Build a get categories endpoint with a controller and route, using regex to search by title or description. Test with Postman and MongoDB Compass to verify 200 responses and results.

Implement a get category route with an id, protected by middleware, validate id, fetch category by id, return 200 with data or 404 if not found, and test with Postman.

Upload multiple files using a multi-instance array method, set the max files per upload, and verify with Postman and VS Code by submitting one pdf and two images.

Create a file model with mongoose, define a file schema including key, size, mime type, and created by user reference, enable timestamps, export the model, and import it in models/index.js.

Set up a multer memory storage middleware to handle file uploads without local storage. Configure a backup/upload.js module with a 50 MB file size limit for safe, memory-based uploads.

Upload a single image to an S3 bucket by validating jpg, jpeg, or png extensions, generating a unique key, and using S3 putObject with the file buffer.

Develop a delete file route and controller to remove a file from an S3 bucket, then delete its database record and return a 200 success.

Create a protected current user route that fetches the user by id and uses MongoDB populate to include the profile pic, and returns the user data in a 200 response.

Build the add post API with routes, controllers, and validators, validate title, file, and category, confirm file and category exist, create the post with the user, and return 201 response.

Create and protect the update post route, validate IDs, and implement the update post controller to modify title, description, file, and category, returning the updated post.

Implement a get route to list posts with pagination and title search, using page and size (defaults 1 and 10), regex-based title filter, skip/limit, sort by updated, and return 200.

Fetch a single post by id in a mern stack project using a dynamic route, populate related fields, and handle errors with a clear json response.

Learn that React is a JavaScript library for building user interfaces and focuses on front-end development, not backend logic. Understand its history, from a Facebook prototype to open source.

Discover how the virtual DOM compares two tree states to detect changes and update only affected elements, delivering better development experience for large apps.

Learn what a JSX element is in React, how to create and render it, and how JSX converts to plain JavaScript objects via Babel, comparing it with DOM and HTML.

Learn how JSX converts to plain JavaScript objects behind the scenes, using className, tabIndex, and props with children; handle dynamic content and the single-root requirement via Babel.

Render jsx elements in the browser with react and react-dom, using babel to transpile, create a root with createRoot, and render a jsx element into the index.html root.