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.

Learn how to create routes in Node.js by using the request and response objects, set content-type headers to text/html, and serve home and about pages.

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 to use nodemon to continuously monitor an express server, auto-restart on file changes, and configure dev dependencies and npm scripts for local development.

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.

Create a full stack project by initializing npm, installing Express, and establishing a backend structure with a server folder and server.js, paving the way for a side-by-side front end.

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.

Connect to MongoDB using mongoose as the driver, retrieve the URI from process.env, and start the server only after a successful connection.

Define a task schema with Mongoose, require the name string with an error message, set completed as boolean with default false, and export the model with timestamps.

Create a task route by handling a post request to a private api endpoint. Demonstrate async processing, update the database via the request body, test with insomnia, and introduce middleware.

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.

Create a get all tasks endpoint that reads all tasks from the database using the task model, returns 200 with the data, and handles errors with 500.

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.

Extract the task operations into a dedicated controller in a MERN app, exporting create task and get tasks functions and wiring them into routes.

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.

update a single field in a task using the patch method rather than replacing the entire item, with an example using patch, put, and insomnia.

Consolidate the common api base path api/tasks across routes, apply it in middleware, and combine get and post, plus put and delete, into streamlined router definitions, then test.

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.

Set up a React project structure with components and assets folders, and create task, task form, and task list wired into app.js with index.css. Add a toast container for notifications.

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.

Using a proxy in package.json and a .env file to define the api url via process.env enables reliable front-end to back-end communication and avoids hardcoding localhost.

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.

Map the tasks by keying with task._id, pass task and index as props to the Task component, and display each name with a one-based index.

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

Implement a two-step update flow for tasks in a MERN app: fetch a single task to prefill a form, then update it in database with editing state and dynamic UI.

Load a single task into the edit form, validate input, and update it with a PUT request using the task ID; then clear the form and refresh the task list.

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.

Add and display task counts, showing total and completed tasks only when present. Update totals as tasks change and deploy to heroku, with front end on Netlify or Vercel.

Deploy a full stack MERN app using render, switch from Heroku, configure origin access to allow only front-end requests, and push front-end and back-end code to separate GitHub repositories.

Learn to deploy a static site frontend to render by connecting GitHub, configuring build commands and environment variables, and monitoring deployment logs for errors.

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.

Prepare a heroku deploy by removing the frontend from git ignore, deleting the frontend git folder, and uploading both front and back ends together; adjust the origin property if needed.

Deploys the completed React app by building the front end, creating a build folder, and configuring Express to serve the static build and index.html for Heroku deployment.

Sign into the Heroku CLI and create a new project, then push your app from Git to deploy. Configure environment variables and a post build script for production.

Build a full stack inventory app with authentication and authorization. Master end-to-end data management, login, registration, password reset, profile edits, product crud with rich text descriptions and a dashboard.

Plan the MERN project structure with React, Express, and MongoDB, configure Redux, set up cloud image storage, and outline production emails with SendGrid and deployment on Verso and Render.

Set up the project by creating a back end folder, initializing npm to create package.json, and adding server.js to establish the backend before building the 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.

Create a MongoDB user model with mongoose, define schema fields (name, email, password, image, phone, bio), validations, defaults, and timestamps to enable backend authentication.

Create a user registration route using express router, with a post endpoint at localhost:504/register, wired to a register user controller and mounted under the /api/users prefix.

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.

Create a centralized Express error handler middleware to standardize error responses by status and message. Show stack traces in development and hide them in production, and apply the middleware globally.

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.

Implement a login route in the MERN stack bootcamp, creating a login user controller, wiring a post /login endpoint, wrapping with async handler, and testing with Insomnia.

Implement a login flow that reads email and password from request body, validates them, verifies user existence and password, and issues a token as an http only cookie for authentication.

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 logout route and controller in the MERN app, wrap the function with async handler, expire the cookie, and return a 200 status with a message successfully logged out.

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.

Create a get route to fetch the current login status in the mern stack backend, implement the loginStatus controller, and verify behavior with insomnia.

Implement a login status controller that checks a user token from cookies, verifies it, and returns a boolean true or false to indicate whether a user is logged in.

Create two routes to update user profiles and password in a MERN app, enabling changes to name, phone, bio, and image while preserving email, with a protected patch route.

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.

Learn to build a send email function in a mern stack app using nodemailer, configuring a transporter and html email options from environment variables.

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.

Create and save a password reset token with user id and 30-minute expiry, then build a front-end reset URL from env vars and email the link.

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.

Demonstrates how a success message can accompany a failed email due to a blocked IP or timeout, and why a server IP will reliably send emails after deployment.

Create reset password route in a MERN stack app by handling token from URL params and new password, building the controller, defining the put route, and testing the endpoint.

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.

Create a product model for the backend by defining a Mongoose schema that captures image, name, category, price, quantity, description, and a user reference with timestamps.

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.

Create a products controller that validates required fields and saves a new product linked to the current user in MongoDB, with image handling to be added later.

Set up Multer file upload for image handling, configure storage in uploads, generate file names from original name and date, filter to png, jpg, jpeg, and export the upload utility.

Implement a multer-based single image upload to an uploads folder, appending a date to the file name and recording the path, mime type, and size via the file size formatter.

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.

Create a get all products route and controller, secure it, fetch products for the user who created them, sort by createdAt descending, and test in insomnia.

Create a get single product function and route, fetch the product by id from the product model, enforce user authorization, and return the product details.

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.

Implement patch route and controller to update an existing product by id, handle cloudinary file uploads, validate data, and enforce user authorization in the MERN stack app.

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.

Create a contact controller in a MERN app that validates subject and message, authenticates user, and sends an email using the send email functionality, including to, from, and reply-to handling.

Build the front end for your MERN app by creating a React app with Create React App, organizing a front end folder, cleaning up files, and launching with npm start.

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.

Create authentication pages and routes in a mern app by building login, register, forgot, and reset password components inside a dedicated auth folder and wiring them in app.js.

Create a reusable card component in a React app to support login and register pages, wiring children and className props, and using CSS modules for styling.

Build a login page in jsx by composing a login component with a card form, email and password inputs, an icon, a submit button, and forgot password and register links.

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.

This lecture teaches building a forgot password page by adapting the login template. Update icons and text, replace the password field with email, and wire the get reset email button.

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.

Learn to build a reusable React layout by composing a header, footer, and sidebar, with a layout component that renders page children between header and footer.

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.

Implement a go home function with useNavigate to return to the homepage when the dashboard icon is clicked, attach it to an onClick handler, and verify navigation by compiling.

Set up a redux auth slice to manage is logged in, user details, and local storage, using actions like set login, set name, and save user.

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.

Learn front-end and back-end validation for user registration, enforce required fields, password rules, and valid email, then perform async registration with loading state and error handling.

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.

Duplicate the register function to create a login flow. Post email and password to /api/users/login with axios and credentials, show a toast on success, return user data.

Adapt the login component to handle email and password with form submission, validation, loading state, and dispatch login actions to navigate to the dashboard.

Add the logout functionality by calling the log out api endpoint with no data, wiring the header button to dispatch set login and navigate to the login page.

Wire the header to the Redux store using useSelector and selectName to display the logged-in user's name stored in the database.

Learn to implement forgot password in a MERN app by building an email form, validating input, posting to the reset endpoint, and handling the reset email flow.

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.

Implement a get login status function that queries the API for logged-in state and dispatches a redux action on app load to maintain the user session.

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

Create a redux product slice to manage product state, including single and multiple products, loading, error, and message, using createAsyncThunk for HTTP requests and integrating it into the store.

create a product function using axios to post form data to the backend api, then use create async thunk and a product slice to handle pending, fulfilled, and rejected states.

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.

Create a redux filter slice, dispatch filterProducts with products and search, filter by name and category in lowercase, and render filtered products using useSelector and useEffect.

Learn to implement product list pagination in a MERN stack app by installing a React pagination package, wiring current items from filtered products, and customizing next and previous.

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.

Create a new action to calculate out of stock, map over products, count quantities equal to zero, and expose the out of stock value for front-end display.

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.

Learn how to implement a delete product function in Redux, including creating Redux slices, service API calls with Axios delete, and handling pending, fulfilled, and rejected states with toasts.

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.

Edit products using a redux workflow: fetch the selected product, display it in a form, and save changes with an axios patch to update the product on the home page.

Create and route the edit product page in a MERN app by scaffolding the edit product component, wiring its route with an id parameter in app.js, and testing the route.

Create edit product component demonstrates loading a specific product by id, populating edit fields from Redux state, handling image and description changes, and saving updates through Redux actions with navigation.

Build a get single product functionality with Redux, add a product service to fetch by id, update the product slice, and implement loading and error handling in the frontend.

Create a single product details view by fetching the product with route params, then display image, stock status, SKU, price, quantity, total value, and sanitized description.

Develop a profile feature by creating a get user profile function in the services folder, use the api/users/get user route, and prepare a root and component to display user data.

Create the user profile page and route in the app by building a profile component, wiring the /profile path in app.js, and importing the profile.css for styling.

Build and connect the profile component by fetching user data, handling loading states, and updating Redux with the logged-in user's details, including name and profile info.

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.

Learn to implement edit profile functionality in a MERN stack app by wiring Redux user data to an edit profile form, handling inputs, image changes, and save actions.

Learn to implement a robust edit profile flow in a MERN app, handling refresh state loss, front-end image uploads to Cloudinary, and updating user data in MongoDB.

Build a contacts page with a logged-in contact form that collects subject and message, submits via an Axios post to the backend api/contact, and shows toast feedback.

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 your MERN app by pushing the front end and back end to separate GitHub repositories, initializing each and configuring gitignore before pushing.

Push the frontend to vercel by creating an account, linking GitHub, and importing the project. Configure environment variables, deploy, and note that the backend deployment arrives in the next video.

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.