Complete MERN Stack Bootcamp - MongoDB Express React & Node

Explore Node.js basics, including modules and building a server with Node.js and Express. Set up a VS Code project, run files with Node, and explore global object, __dirname, and __filename.

Discover how models encapsulate code in Node.js, use common JS modules and ES modules with export, require, and import, and organize code across files to enforce separation of concerns.

Explore core modules built into Node.js, like the os and path modules, learn to require and inspect their properties, and prepare for building a server.

Create a node.js http server using the http module, handle request and response, log a hello message, and listen on port 5000 at localhost.

Build an Express server on Node.js, install Express with npm, and run on port 5000. Create a home route with app.get('/', (req, res) => res.send('Welcome to the home page')).

Learn http request methods, including get, post, put, patch, and delete, and understand status codes like 200, 304, 400, and 500 that guide backend responses.

Build a task manager app demonstrating back end structure with Express and front end with React, implementing create, read, update, and delete operations with refactored, maintainable code.

Learn to create an Express server, initialize git with a .gitignore for node_modules, and use branches, while wiring port configuration from a .env file for Heroku deployment.

Learn to create a start script in package.json to run the back end with nodemon, set server.js as the main entry, and test the server on port 5000.

Set up a single server route and test it with postman or insomnia to speed up api testing, organize requests into a collection, and test endpoints like the home page.

Connect your app to a cloud MongoDB Atlas database, create a cluster, and copy the connection string. Save it in a .env file as MONGO_URI and define the task-manager collection.

Modularize the MongoDB connection by placing it in a config folder as connect DB using mongoose and dotenv, with environment variables accessed via process.env to ensure a reliable connection.

Refactor the connection sequence by connecting to MongoDB before starting the server, ensuring requests have a ready database connection and illustrating separation of concerns.

Explore express middleware by slotting a function between routes, logging requests, using next to continue, and parsing JSON bodies with express.json to access req and res.

Learn to save tasks to the database by parsing JSON and URL-encoded request bodies with Express, using a Mongoose task model, and handling success and error responses.

Implement separation of concerns by moving task routes into a dedicated router file, import and mount it in the server, and verify create and read tasks with insomnia.

Learn how to fetch a single task by id using route parameters, controller logic, and mongoose findById, with not-found handling.

Learn to delete a task via a dedicated controller function and api route, using the task model's find by id and delete, with proper 200, 404, and 500 responses.

update a task using put and patch methods in a MERN stack API, covering find by id, updating with request body, run validators, and handling not found errors.

Set up the React front end in a front-end folder, clean boilerplate, install axios, react-icons, and react-toastify with node-sass, and configure an npm script to start the front end.

Install concurrently as a dev dependency, then create a single npm script to run both the front end and back end, escaping quotes to avoid errors.

Build a task manager UI in a MERN stack project, starting with the task list and a form, using controlled inputs and react-icons to set up actions.

build a form-driven task creation in a MERN app, manage name and completed fields, validate input, post to the backend with axios, handle cors, and show toast notifications on success.

Learn to fetch tasks from the database by creating tasks and completed tasks state, calling an Axios get request in useEffect, and display a loading spinner and results.

Delete a task by sending an axios delete request to the task URL with its id, then refresh the list with get tasks.

Build an asynchronous function to set a task to complete, updating completed status via axios put, passing it as a prop, and refreshing the UI to show a green border.

Deploy the backend to render via a web service, set mongo environment variable, and run npm install and node server; then test create, read, update, and delete operations from frontend.

Set up an express server and connect MongoDB in a mern stack workflow by installing express, mongoose, dotenv, and body-parser, then run on port 5000.

Set up the backend folder structure (roots, controllers, models) per MVC, create the home route with app.get('/') returning 'home page', and enable express.json, express.urlencoded({ extended: true }), and body-parser.

implement the user controller with a register user function, export it, and wire it to the user routes for the /api/users/register endpoint, then test with a post request.

Register a new user in a mern app by validating inputs, ensuring unique emails, creating a MongoDB user, and returning 201 with user details via express async handler.

Install and import a hashing library, create a salt, and encrypt (hash) the password before saving it to the database to protect user accounts.

Apply a Mongoose pre save hook on user model to hash password before saving, set this.password to the hashed value, skip hashing if password is not modified, and call next.

Generate a json web token on user registration to sign the user in immediately, using a secret and a defined expiration, in a MERN stack.

Authenticate users by issuing an http-only cookie named token. Use cookie parser with path, expires in one day, sameSite, and secure flags to guard against xss and support cross-origin sessions.

Review a real-world pull request to fix a login controller bug by sending the cookie only after the password is correct, and learn how to approve and merge changes.

Create a dedicated get user route and controller to fetch profile data, then protect the API endpoint so only logged-in users can access it.

Develop and apply a protect middleware using jwt tokens and cookies to authorize routes, fetch the user by token, exclude password, and attach user to the request for profile data.

Update user profile in a protected route by pulling the user by id, preserving email, updating allowed fields (name, phone, bio, photo), returning the updated user; password updates are separate.

Create a protected patch route to change password, requiring the old password and a new password with confirmation, wired to the change password controller.

Implement a protected change password controller that validates input, verifies the old password, updates the user record with the new password, and returns a success response.

Explain the password reset flow in a MERN app: user requests a reset, receives a token link, and the backend uses the token via React params to reset the password.

Create a forgot password route as a post, unprotected, with the forgot password controller, test with insomnia, and introduce a token model to save reset tokens.

Create a token model using Mongoose, define a user reference with ObjectId, store the token string, and track created at and expires at fields.

Implement a forgotten password controller in Node.js that verifies the user by email, generates and hashes a reset token with crypto, and saves it to the database for email delivery.

Implement the forgot password controller by configuring email options and managing the token: delete existing token, create a fresh 30-minute token, and send a reset URL.

Create a reset password controller that hashes the reset token, validates it against the database token and expiry, updates the user’s password, saves changes, and returns a success message.

build the create product route by implementing the async handler in the controller, wiring the router and protect middleware, exposing api/products, and testing with insomnia.

Learn to upload images to Cloudinary from a Node.js backend, configure the API key, install the Cloudinary package, and use the uploaded file's secure_url.

Learn to implement a delete product endpoint in the route and controller, including find by ID, handle not found, verify authorization, and return the deleted product.

Fix a product update bug by preserving the existing product image when no new file is uploaded, using Object.keys to detect an empty file data object and a ternary operation.

Create a contact us route and controller to send email from the front end's subject and message, protect the route, and test the endpoint for a successful 200 response.

Set up Redux toolkit in a front end, install redux and react-redux, create a store with configureStore, add an auth slice, and provide the store to the app.

Install react-router-dom, upgrade to React Router v6. Wrap routes with browser router, define a home route '/', create a Home page component, and render Hello world to confirm routing works.

Build the home page for the mern stack bootcamp app with login-aware navigation, a hero section and image, and reusable number-text components, plus react-icons and sass setup.

Build a register page in jsx by adapting the login template, adding name, email, password, and confirm password fields, updating icons, and linking to login.

Adapt the forgot password page to build the reset password page in jsx, updating to two password fields and a reset button, with route changes.

Build and integrate a reusable sidebar within a layout containing header and footer, then create a dashboard page route that renders the dashboard alongside the sidebar.

Get the sidebar code from the event app’s GitHub repository, using branch 14, where the sidebar resides in the frontend components folder. Follow along to grab the code and continue building the project.

Build a collapsible sidebar for a MERN app by loading menu data from a JSON file, rendering icons and text, and toggling width with React useState via the hamburger.

Learn to build a responsive sidebar by mapping menu data into sidebar items, handling open state for submenus, and implementing nav links with active states using React Router.

Set up a front end auth service with Axios and react-toastify, configure the backend URL in .env, and implement a register user function posting to /api/users/register with credentials.

Learn to build a front-end registration form using useState to manage name, email, and password fields, handle input changes, validate password repeat, and prevent default submission for subsequent user registration.

Register the user by setting login status to true, saving the user's name, and navigating to the dashboard using redux dispatch and router navigate.

Build a full-screen loader and a spinner in a MERN app using React portals, integrate with index.html, assets, and CSS, and use during user registration.

Process the reset password workflow by handling form data, validating password length and match, using useParams to read the token, calling the reset function, and showing toast feedback.

Hide or show nav links based on login status using Redux selectors; reveal register and login when logged out, and dashboard when logged in.

Create a custom React hook useRedirectLoggedOutUser that redirects a logged-out user to a specified path when the session expires, with a toast notification.

Learn to build an add product feature in a MERN app with image preview, a rich text description, and a reusable form component, including SKU generation and Redux-powered save flow.

Set up an add product route in the mern stack app by duplicating the dashboard route, updating the path to add-products, and importing the component.

Create and test a functional product form in a MERN stack app, including redux loading states, image upload with preview, and a rich text editor for descriptions.

Create a redux function to fetch all products via the product service using axios get, integrate it into the product slice, and manage pending, fulfilled, and rejected states.

Learn to fetch all products on the dashboard and display them with a product list and a product summary, using Redux to manage state and render in tables.

Display products on the dashboard by rendering a product list with Redux loading state, a table of serial number, name, category, price, quantity, value, and actions.

Implement a search feature for the product list by creating a search component in React, wiring value and onChange props, and linking it to the product list state.

Build a dynamic inventory stats section in the product summary dashboard by creating an info box component with props for bg color, title, count, and icon, then render four boxes.

Calculate the total store value by summing price times quantity for all products, track out of stock items and categories, and format with a dollar sign and two decimal places.

Calculate all categories in the product dashboard by extracting the category data, creating a unique category list with a new set, and displaying the count in the info box.

Install a React confirm alert package and add delete confirmation. Dispatch a Redux action to delete by id and refresh the product list from the database.

Create a product details component within the products folder, set up a dynamic route with a product id param, and import the required components for the product details page.

Implement a profile page in JSX with a loading spinner and a null-profile fallback. Display data in a card with photo, name, email, phone, and bio, plus an edit-profile link.

Build a change password component in a MERN app, wire an axios patch service, validate that the new passwords match, and redirect to profile on success.

Test the app by deleting and adding products with images, including Samsung Galaxy. Adjust pagination to five items per page, and update profile image and bio for deploy.

Deploy the backend to render by connecting GitHub, creating a web service, and configuring environment variables; verify build and start commands and redeploy for frontend-backend sync.