React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

Explore how the MERN stack pieces—React, Node, Express, and MongoDB—work together and compare approaches, understanding the big picture and the pros and cons for this course.

Explore how the MERN stack combines MongoDB, Express, React, and Node to power a full-stack web app, with the client side rendering UI and the server handling requests via JSON.

Explore the frontend and client side powered by React, building a single-page application with React Router DOM for component-based UI, and manage state with hooks and Redux.

Discover how a decoupled frontend and backend use a Node Express API with MongoDB. Learn REST and GraphQL patterns, endpoints, and how requests trigger server actions.

Compare REST and GraphQL, explaining REST endpoints with HTTP verbs on a Node Express server and MongoDB, versus GraphQL's single /graphql endpoint and query language.

Compare hosting MERN apps on a single server versus two servers, with a separate MongoDB database, and explain how React SPA and Node Express APIs exchange JSON.

Set up a MERN development environment with a React frontend and a Node Express backend, showing frontend–backend communication via a /products API and two local servers on localhost:3000 and localhost:5000.

Explore how a node express server runs from server.js, handling get and post requests with in-memory data, while a React front end fetches and posts products on port 5000.

Explore how to plan a MERN project from idea to design, data models, and backend endpoints, then sketch the frontend skeleton and prepare the app architecture.

Explore building a MERN fullstack app where users share places with images and locations, implementing CRUD, multiple data models, image uploads, input validation, authentication and authorization.

Sketch the frontend of a MERN app with a header, a user list, and place cards featuring view on map via a Google Maps overlay, plus auth and create/edit flows.

Define user and place data models with authentication fields. Show that a user owns multiple places and each place belongs to one user; outline CRUD endpoints for users and places.

Show a home page with a user list and provide routes for /places, /auth, /places/new, and /places/:id, with access governed by authentication and ownership.

Receive a brief refresher on React.js, including what it is, how it works, and how to build modern frontend web applications with React. Understand how React manages state, stays reactive, and what makes up React.

React.js is a browser-side Javascript library for building user interfaces using a declarative, component-based approach that runs in the browser to power modern frontend apps.

Set up a starting React project with create-react-app to streamline development, understand single-page apps, and learn how the development server and React DOM render a dynamic frontend.

Understand how jsx enables html-like syntax in javascript, how React translates jsx to create element calls, and how index.js and app.js render components via npm start.

Learn how React components can be functions or classes, with functional components favored in modern React, returning jsx or React.createElement, and using capitalized names to compose reusable user interfaces.

Learn to build a React app with multiple components by creating a goal list component, importing it into App.js, and adding a CSS file alongside; styles apply globally.

Explore how to split a React app into small components and pass data with props, rendering dynamic goal lists from app data using JSX.

Learn to render lists in React by mapping an array of objects to an array of JSX elements, transforming each object into a list item with a unique key prop.

Create a new goal component, render it in app.js, style with NewGoal.css, and use an on submit handler that prevents default, creates a dummy goal, and updates course goals.

Define a new goal handler in the parent and pass it as an on add goal prop to the child, enabling the child to add a goal to the parent.

Manage state in a React functional component with the useState hook to update a course goals array using concat, and trigger re-renders when the state changes.

Understand how state works in React functional components: useState returns a two-element array—state snapshot and a function to update it; use a functional update when updates depend on previous state.

Master react state management and two-way binding by capturing user input with onChange and binding input value to state for real-time updates when adding a goal.

Master the core of React through a concise refresher that covers components, props, and state, and see how routing and dynamic user input drive a course project.

Build a standalone React frontend as a single page application with routing, multiple components, and reusable user interface elements, plus custom hooks and state management for a realistic app.

Set up a React app skeleton for a single page application and implement routing with react-router-dom, organizing by feature (places and users) using pages and components folders.

Build a MERN app users list by creating UsersList and UserItem components, wiring an items prop, handling no users found, and rendering each user with id, image, name, and places.

Add a user item component in the MERN fullstack guide to render each user as a styled list item, displaying image and name with place count and proper pluralization.

Enhance the app’s look by applying UsersList.css and UserItem.css, adding reusable avatar and card UI elements, and using react-router-dom Link to create dynamic user routes like /{id}/places.

Understand presentational (dumb) and stateful (smart) components in React, where presentational components render content from props and stateful ones fetch data with dummy data and prepare for backend integration.

Implement a responsive main header and top navigation for the MERN app, introduce a side drawer for mobile, and wire navigation links to routes to improve accessibility.

Create a nav links component using react-router-dom NavLink to highlight the active route, render all users, my places, add place, and authenticate with login-based visibility and header or sidebar styling.

Implement a responsive desktop and mobile navigation by adding a side drawer with animated opening and closing, and render the drawer using React fragments and portals for proper DOM placement.

Explain how React portals render a component in a different place by using ReactDOM.createPortal to mount content into a target element like drawer hook in index.html.

Handle the drawer state by using useState to track whether the drawer is open, and conditionally render the drawer and backdrop with on click to close.

Install react-transition-group and wrap aside with css transition to animate side drawer. Bind a show prop, 200ms timeout, and slide-in-left class names; enable mount on enter and unmount on exit.

Create a user places page with place list and place item components, and use a dynamic route with uid at /:uid/places to show only that user's places.

Use the react-router-dom useParams hook in functional components to read the URL’s dynamic user id, filter dummy places by that id, and pass loaded places to the place list.

Add a custom button component in the shared form elements, supporting ref, to, inverse, and danger, and integrate it into places actions with map overlay for the MERN fullstack guide.

Learn how to add a reusable modal overlay with a backdrop using React portals, including a map inside the modal, and header, content, and footer for a MERN fullstack app.

Build a custom Google Maps component in React using the Google Maps JS SDK, API key, useRef, and useEffect. Configure center and zoom, render a marker, and style with map.css.

This lecture shows building a reusable custom form input component with built-in validation, supporting text input or text area, on-change feedback, and stepwise form validation ahead of server integration.

Manage the input component state with a reducer to track value and validity, dispatching change actions from a keystroke handler, using validators and showing external error text.

Add real validation with a shared validators.js and a validate function. Wire validators to the input component using onChange and onBlur, track isTouched, and display errors only after user interaction.

Drive communication of input value and validity to the parent via onInput, using useEffect and useCallback to handle multiple inputs like title and description and manage the overall form validity.

Manage form-wide state with use reducer and a form reducer, tracking inputs and an overall is valid flag. Dynamically handle input changes, compute validity, and enable the submit button accordingly.

Bind a place submit handler to the add place form, prevent default submission, and console log the title, description, and address to verify form state before backend integration.

Create and route the update place component to render a prefilled form for title and description using the place id from the url, with dummy data.

Adjust the input component to support initial values and validity, reuse PlaceForm.css for update form, and introduce configurable hook to share form state logic across new and update place forms.

Learn to build a custom useForm hook in React that encapsulates stateful form logic with useReducer and useCallback, enabling reusable, valid forms that re-render components on state changes.

Extend a custom form hook to load backend data for updating a place, using set form data with useCallback and useEffect to reinitialize form state when data arrives.

Fine-tune the places list by using a custom button with the to prop to navigate to places/new, and guard the edit flow if no identified place exists.

Implement a delete warning by adding a confirm modal in place item with an 'are you sure' header and cancel/delete actions, controlled by useState, ready to call the backend.

Learn to create an auth page in a MERN stack app, build a login form with email and password, add validation with a form hook, and wire routing to /auth.

Add a switch button to toggle between login and signup, render the name input in signup mode, and manage form state with useState and setFormData for form validation.

Create and use an auth context to manage app-wide login state in a MERN-style React app, wrapping the router with the provider and updating the UI based on login status.

Learn how to listen to context changes with the useContext hook, access the auth state, and conditionally render navigation links in a MERN fullstack app.

Learn to implement authenticated and unauthenticated routes using an auth context and is logged in state, with redirect logic in app.js and conditionally rendered navigation for secure routing.

Use the auth context to show edit and delete buttons only when authenticated. Add a logout button in the nav and demonstrate app-wide state management with context.

Consolidate your skills by reviewing a React app with components, hooks, context, and Google Maps, then preview building a Node, Express, and MongoDB backend to form a full MERN stack.

Explore node.js and express.js in the MERN stack and learn how they power a backend, with a quick refresher on what they are and how they work.

Explore what Node.js is as a JavaScript runtime outside the browser, with new APIs for server tasks like file access and building web servers to handle requests and databases.

Install node.js, create app.js, run code with node, and learn to use the file system API via require('fs') to write files asynchronously, contrasting browser versus node APIs.

Node.js creates a web server with the http module, handles requests via a listener, and sends responses, including processing form data for post requests and parsing the request body.

Learn how Express.js, a middleware-focused framework for Node.js, simplifies building server-side web apps by providing utilities that reduce boilerplate, with examples added to a simple application.

Learn how to convert a Node.js project to a managed Express app using npm, package.json, and dependencies, then design middleware to handle get and post requests.

Explore how Express simplifies server development through middleware-driven request handling and third-party middlewares like body-parser. Learn precise routing with get and post and automatic JSON or urlencoded parsing.

Explore how a Node and Express file is parsed and executed, including imports, exports, and the listen call, while middleware runs as request callbacks.

Begin building the backend with Node.js and Express, creating a REST API with routes and controllers, using in-memory storage and server-side validation within an mvc pattern.

Initialize a new project with npm, install express and body-parser, add nodemon for restarts, create app.js, and configure a start script to run nodemon on app.js for an express app.

Set up a basic Node Express app and routing architecture by importing express, body parser, creating an app object, registering middleware, and structuring routes with routers in separate files.

Define place-specific routes in an api using express middleware, implement get /api/places/:pid, read request.params.pid, and return the matching place from a dummy places array.

Implement dynamic routes to fetch places by creator user ID in a MERN app using /user/:uid and a middleware function. Learn how route order affects matching and error handling.

Learn to handle missing data with proper 404 errors in Express, implement a default error handling middleware, and balance throw versus next(error) to avoid duplicate responses.

Add a custom http-error model to standardize error handling in express routes, introducing a class that extends Error with a code property and 404 status usage.

Learn how to organize a MERN REST API using the model-view-controller pattern by creating a controllers folder, moving route logic into place-controllers, and exporting functions for routes.

Add a post route at /api/places, parse JSON body, and create a place stored in memory, returning 201 with the new place; test with postman and uuid v4.

Learn to handle unsupported routes with a post-route middleware in app.js that returns a 404 via http-error and uses the default error handler.

Add patch route to update place by id and delete route to remove a place; implement immutable updates using the url id and title and description from the request body.

Delete a place in a MERN app by filtering a dummy in-memory array with the request param pid, removing the matching id, and returning a 200 response.

Refine get places by user id endpoint to return an array of places using filter, enabling multiple places per user, and return cannot find places for the provided user id.

Set up user routes (signup, login, get users) with a dummy in-memory store, controllers, and middleware in the MERN fullstack guide, wiring routes via app.js.

Learn to validate API input for a MERN app using express-validator, adding middleware on post and patch routes to validate body fields and enforce non-empty, length constraints with 422 errors.

Add validation to the places patch route by checking title and description, and validate sign up inputs via express-validator, plus delete-place existence checks and Google's address-to-coordinates integration.

Learn how to convert an address into coordinates using Google's geocoding API, including setting up an API key and billing, handling async requests with axios in a Node Express app.

Build a rest api with node and express by using middleware as controllers, mapping routes to methods and paths, adding validation with a custom error model and express error handling.

Refresh your MongoDB and Mongoose knowledge, set up a MongoDB cluster, build a Node.js Express backend, and learn how Mongoose models define data structures and create and access documents.

Explore how MongoDB stores documents in collections with flexible schemas, optional relations, and integrates with Node and Express to store app data.

Explore NoSQL versus SQL databases, noting flexible document schemas and less strict relations in NoSQL, with MongoDB examples, versus strict schemas and table relations in SQL, with typical use cases.

Learn why connecting the frontend to a database is insecure and exposes credentials, and how to securely connect React to a Node Express backend that interfaces with MongoDB.

Set up a MongoDB Atlas cluster with a free starter tier, configure ip whitelisting and database user access, and prepare a backend to connect to the database for mern development.

Build a basic Node.js and Express backend connected to MongoDB Atlas, enabling post /products and get /products to store and retrieve product documents.

Create a new product document with name and price, connect to MongoDB, insert into the products collection, and handle errors in a post route.

Connect to a MongoDB server, fetch all products from the collection using find and toArray, and return them as JSON with error handling. See how Mongoose simplifies this process.

Install mongoose with npm to simplify MongoDB interaction and use schemas to define structured documents. Connect to your database and create a product schema for storing and retrieving data.

Create a product schema as a blueprint and build a Mongoose model from it to manage the products collection, with name and price as required fields, and export the model.

Create new product documents in MongoDB using a mongoose model, instantiating with name and price from the request body and storing the result in the database.

Learn to connect to MongoDB with Mongoose using a single connect call and connection pooling, then save new products via the Mongoose model's save method.

Retrieve products from the database using Mongoose's static find method in an Express route, returning results as an array or cursor, with async/await handling.

Understand how ObjectID values are automatically generated for each MongoDB document and how to convert them to strings using a Mongoose virtual getter.

connect your node express backend to a mongodb atlas database and compare nosql and sql. adopt mongoose with schemas and models to simplify saving and finding documents, including id conversion.

Connect your backend to MongoDB using Mongoose, define place and user models, and perform create, read, update, and delete operations, while linking places to the users they belong to.

Install and import mongoose, connect to MongoDB in app.js, and start the server after the connection. Whitelist your IP, create a read/write user, and use the connection string for places.

Create a place schema and model with mongoose for MongoDB, enforcing required fields like title, description, image URL, address, creator, and a nested location with lat and long.

Create and store new documents by instantiating the place model and saving with mongoose in the post request to /api/places. Handle asynchronous saves with try/catch and errors.

Fetch a place by ID with mongoose using find by ID, handle async/await with try-catch, and convert the result to a plain object with a clean ID.

Implement get places by user ID using the place model to filter by creator and map results, removing the underscore from the id property and handling 500 errors.

Update a place by id, fetch it, and update the title and description with async patch and save via mongoose; deleting documents in the database remains to be implemented.

Delete a place by finding it by id and removing it with async/await, using try/catch and HTTP error handling, completing the places CRUD flow.

Implement user sign-up and login in the MERN stack and define the relation where one user can create many places, each place belonging to one user.

Create a user schema with Mongoose, defining name, email (unique), password (min 6), image, and places. Install and apply Mongoose unique validator, then export the User model.

Implement signup using user model, validating unique emails and handling async errors. Create and save a new user with name, email, image URL, and password, then return result with getters.

Learn how to implement a dummy login in the MERN stack by validating emails like signup, checking existing users and passwords, and returning invalid credentials when mismatched.

Learn how to build a get users endpoint that fetches all users from the database, returns only email and name, excludes passwords, and handles errors with a 500 response.

Establish a relation between places and users by storing a creator id on each place and place IDs on the user document using Mongoose ObjectId in a NoSQL database.

Learn to create a new place and attach it to a user in a MERN app by validating the user, using mongoose transactions, and updating both place and user records.

Delete a place by locating its id, removing it from the places collection, and updating the creator's user document via populate within a transaction.

Demonstrates retrieving a user's places using a populated reference in Mongoose, optionally using consent, and shows querying by user id, accessing related documents, and error handling in API routes.

Review and prune the MERN project by deleting redundant dummy data and outdated logic, reestablishing prior syntax for reference, and finishing with clean, formatted code.

Define schemas and models in a Node Express backend, perform CRUD for places and users, and link them with ref and populate to connect places to their creator in MongoDB.

Connect react to the mern backend by sending http requests to the api, handle errors, show a loading spinner, and update the ui as data loads.

Switch between back-end and front-end setups to show where each code lives. Update app.js to change the database connection string and connect to a new database to start from scratch.

Connect the front end to the backend by sending a post request to the signup or login route with fetch, using async/await, json headers, and a name, email, and password.

Learn how to resolve cross-origin resource sharing errors in a MERN app by adding a backend middleware that sets access-control headers for origins, headers, and methods.

In the MERN fullstack guide, implement loading and error handling for signup by adding isLoading and error states, displaying a spinner and an error modal, and preventing redirects on errors.

Learn frontend error handling with fetch: throw on non-ok responses (400/500), parse the error message, and show an error modal with a clear reset, plus a loading state.

Implement a frontend login flow that posts email and password to a dummy backend route, handles loading and errors, and redirects on success. Prepare for real authentication later.

Learn to fetch users with a GET request on page load using useEffect, manage loading and error states, and plan a custom hook to streamline requests.

Create a custom http client hook to handle data parsing, response status, loading and error state, and automatic request management with fetch, abort controllers, and cleanup.

Learn to integrate an HTTP hook in a MERN app by sending requests with URL, method, body, and headers, while centralizing loading and error handling and cleaning up abort controllers.

Import useHttpClient, fetch with fetchUsers in useEffect, wrap sendRequest in useCallback to manage loading and error states for the get request in the custom http hook.

Learn to add places by posting title, description and address with a creator id to /api/places using a http client, while handling loading, errors, and redirecting on success.

Fetches places by user id from the backend via a get request. Uses a custom http client to handle loading and errors and stores results for rendering.

Update a place by fetching its latest data from the backend by id, populate a form, and submit a patch request to /api/places/:placeId, then redirect to the user's places overview.

delete places in a MERN fullstack app by sending a delete request to a dynamic api/places/:id and updating the loaded places state.

Fix the nav link by binding the places path dynamically to the real user id from the context, ensuring /places loads for the current user even if no places exist.

Finalize the MERN stack app by aligning front-end and back-end password validation to six characters, gating edit actions by user ID matching the creator, and updating the error message accordingly.