MERN stack complete: full stack apps from scratch

Learn how to scaffold a front end app using the create-react-app template, explore the generated files and dependencies, and use start and build scripts for development and production.

Render JSX with ReactDOM by targeting a root element in an index.html, using JSX syntax to create elements, and observe automatic updates during development.

Explore JSX by building a clock with a local time string and a diff-based render that updates only changed text. See how the virtual dom and components optimize updates.

Explore how to structure a React app with functional components and props, contrast with class components, and leverage the virtual DOM and React DevTools for dynamic rendering.

Learn to compose components with JSX fragments, build a component hierarchy, and pass down props, while using state to trigger automatic updates in a MERN stack app.

Explore state management in React by using the useState hook to store and update messages, triggering re-renders, and learn how useEffect helps control side effects and lifecycle behavior.

Learn to control side effects in React with useEffect, manage timeouts, and prevent infinite loops using dependency arrays. Explore mounting and updating patterns for robust mern stack frontend behavior.

Learn to handle user events in React by wiring an onClick handler to a button, updating state with useState, and reflecting the click count in the UI.

Learn to implement conditional rendering by toggling a boolean with a button, using state hooks, and rendering a message via inline if, logical and, and the ternary operator.

Build a clock app with React state and useEffect to update the time every second, avoiding multiple intervals. Learn to manage clock state in components and render multiple clocks.

Learn to render lists in React by mapping an array of snippet objects to a snippets component, supplying a title, and assigning unique keys for each item.

Master handling forms in React by building a login form with username and password, using state and onChange for input handling, and preventing default submission.

Explore four configurations of use effect, including an interval that updates every second, an empty dependency array for mount, and cleanup to prevent memory leaks.

Set up a fresh frontend, install react-router-dom, and build a basic routing structure with an outer router, login, register, and home page components.

Create a persistent navbar component for a MERN app with links to login, register, and home. Implement client-side routing using a link component and display server snippets on the homepage.

Fetch snippets from the backend in a MERN app using axios and display them on the home page. Resolve cors errors by configuring cors middleware with an allowed origin.

Render dynamic snippet components in a MERN app by fetching snippet data from a server, and mapping them into displayable blocks showing titles, descriptions, and code.

Open a snippet editor form with a button, collect title, description, and code, post to the server to save the snippet, and refresh the list with the newest on top.

Clean up the snippet editor by closing and clearing fields on new posts, refresh snippets after posting, and sort by createdAt so newest snippets appear on top.

Delete snippets by adding a delete button at the bottom of each snippet, sending an axios delete request with the snippet id, and refreshing the list via get snippets.

Learn to implement an edit flow for code snippets in a MERN app by passing data to a snippet editor, prefill fields, and handle create or update requests.

Set up node-sass in a MERN app, write scss with a universal selector to reset margins and borders, and import the stylesheet so the bundler compiles scss to css.

Create a css variables file using root variables, apply resets, and style a responsive layout with primary colors, typography, containers, and reusable component styles.

Learn how to create a reusable Sass mixin for buttons, apply it to edit and delete buttons, and customize hover states, padding, colors, and borders for a consistent user interface.

Style the navbar in a MERN stack app by resetting link styles, creating a reusable link mixin with the primary color, and using flex to align items.

Style the snippet editor and create a card container mixin to make labels, inputs, and text areas display as block elements with full width, borders, shadows, and color theming.

Implement user authentication for the MERN app by registering users, hashing passwords, issuing JWTs, and securing snippet operations with server-side validation and token verification.

Set up an Express router and a Mongoose user model to register new users, storing a password hash and validating email, password, and password verification in the MERN stack.

Validate register requests by checking for existing emails, hash passwords with salt, save new user via mongoose, and prepare a jwt token in a cookie to auto login after registration.

Register users, issue json web tokens, and store tokens in http-only cookies to authenticate subsequent requests in a mern stack application.

Create a token authentication middleware in a MERN app that validates a JWT from cookies, decodes it with secret, attaches user id to the request, and uses next for control.

Learn to build a register component in a MERN app, including email and password verification fields, form state, validation, and backend submission, plus login linking and cookie handling.

Configure withCredentials on client requests to send cookies for user authentication in a MERN app. Enable server side credentials in CORS and use HttpOnly cookies to protect tokens.

Create a login component by adapting the register component, removing password verification, handling login data at /logging, validating login through token changes, and testing with a styled login form.

Style the register and login components in a MERN app with a reusable form class, inputs, labels, buttons, a primary color, and box shadows. Implement cookie-based authentication using cookies.

Use a React context provider to store the logged-in user, validate tokens on app start, and expose user state via useContext to drive login and logout UI.

Refactor the home component to handle logged in and logged out states with a welcome message or register link, and control snippet loading based on user presence and logout actions.

Fix the login link to navigate to register and add an error message component to display server validation messages in the mern stack login and registration forms.

Complete the mern stack app by deploying the backend to Hiroku and the frontend to Lafi, while configuring development and production environments to switch endpoints securely.

Deploy the backend to Heroku by creating a Heroku app, setting environment variables for the database and JWT, configuring port handling, pushing to master, and testing endpoints with Insomnia.

Deploy the frontend to Netlify by building a production folder, dragging the build folder to Netlify, and configuring the site name or a custom domain.

Learn to configure development and production environments with environment variables, switch API endpoints between localhost and heroku, and ensure cross-origin requests using a domain utility.

Configure cross-site cookies with sameSite and secure flags to enforce https in production, while handling localhost development and deployment.

Fix logout by manually clearing the token cookie with an empty value and past expiry, and set httpOnly, sameSite, and secure flags for development and production.

Conclude the MERN stack course by delivering a full stack app with user authentication and a deployment process for production and development environments, noting the same database used in both.