Build a Movie Review App Node & React - MERN Stack

Understand the backend API and server as the app's brain, handling authentication, authorization, data management (create, update, delete), and communication with the frontend.

Install Node.js from nodejs.org, select the long term support version, verify with node -v and npm -v, then prepare for the code editor setup in the next video.

Download and install Visual Studio Code on Windows to write your app. Add open with code to the Windows Explorer context menu and enable opening from the command prompt.

Initialize a new node and express back-end API by creating a review back end API folder, running npm init to generate package.json, and setting the server entry point.

Learn to run JavaScript in a Node.js environment via the terminal, log outputs, and troubleshoot basics like 'window is not defined' as you prepare to build an Express server.

Learn to create a first Express server with Node.js by installing Express via npm, configuring a home route that responds with hello from the backend, and running on port 8000.

Refactor a Node.js project using the MVC pattern by separating models, views, and controllers with routes. Build user signup and signin controllers, export them, and wire routers into the app.

Think from the front end perspective by using get for retrieval and post for submitting username, email, and password to a backend API.

Install and use Postman to test backend APIs when the frontend isn’t ready, sending a post request to create a user on localhost:8000 and view responses.

learn to prefix api endpoints with /api, test with postman, and use nodemon to automatically restart the server during development.

Explore posting data to an endpoint and receiving json in a node and express setup, sending name, email, and plasma via postman, and accessing request.body in the controller.

Install MongoDB locally by downloading the community server, completing the installer, and using MongoDB Compass, then prepare to connect to your backing API in the next video.

Connect your API to a locally installed MongoDB using mongoose, set up a db module, and handle the asynchronous connection with then and catch, logging success or failure.

Learn npm, the node package manager, to bundle JavaScript code as packages, publish them to npm, install them worldwide, and explore private packages with pro membership and docs.

Define a user schema with mongoose to structure and store data, including name, email, and password; enforce required fields, trim inputs, and email uniqueness, then export the user model.

Create a brand new user using the user model in the controller's endpoint, sending name, email, and password from the request body via postman, then save with new user.save.

Learn to hash passwords before saving to the database with bcrypt, via a pre-save hook that hashes only when the password changes, and enforce a cost factor up to ten.

Learn to prevent duplicate users by enforcing unique emails, checking existing users with findOne, and returning appropriate statuses like 401 for duplicates and 201 for creation.

Explore how express middlewares sit between routes and controllers, using a minimal function and next to control flow. Anticipate the upcoming discussion of a popular validation library for express apps.

Learn to implement express validator in a banking API, creating a validator module, validating name, email, and password, and handling errors with validation results and middleware.

Implement email verification by sending a six-digit OTP and storing its hash in the database to prevent fake signups. Use Email Trap for development mail delivery.

Set up mailtrap to send e-mails from your local development environment, including creating an account, retrieving credentials, and configuring a verification email with an OTP for new users.

Create a Mongoose email verification token schema linked to the user by an ObjectId, storing the token and expiry after 3600 seconds, and export the model for use.

Generate a six-digit otp, store it as a hashed email verification token linked to the user in database, and send it via a transporter; the token expires in one hour.

Add a verified flag to the user model and implement an otp-based email verification flow that validates user IDs, locates the token, and compares the otp to the hashed token.

Add a compute compare method to the email verification token schema to securely validate a user’s OTP against a hashed value during email verification.

Resend email verification token flows by generating or reusing an OTP, validating the user, enforcing one-hour expiry, and delivering the token via email.

Refactor the Node.js back-end to modularize OTP generation and email transport into reusable utilities, improve error handling with a helper, and streamline the email verification flow with standardized status responses.

Model a password reset token and wire it to the user email flow, sending the token to the user's email when they request a reset, with a one-hour expiry.

Describe implementing a password reset flow in the Node backend: validate email, locate the user, verify existing tokens, and generate a strong reset token using crypto.

Generate cryptographically strong random tokens in Node.js using random bytes, then create and store a password reset token and send a reset link via email.

Implement middleware to verify password reset tokens and instantly report expiry or invalidity, by adding a verify password reset endpoint and wiring it to the reset flow.

Explore secure password reset flows in a MERN stack app by validating reset tokens, implementing password update logic in controllers and middleware, and notifying users via email.

Implement secure user sign-in with jwt in a node mern app by validating email and password. Create a jwt payload with user id and verify it using a secret key.

Explore how to use the dotenv environment variable package to keep secrets like JWT tokens and MongoDB credentials out of code and configure process.env values for production.

Learn to implement robust async await error handling in a MERN app by using try/catch blocks, next, and the express-async-errors package to prevent crashes and provide clear error responses.

Design the frontend for the authentication backend using a simple figma mockup, explore dark and light variants, and focus on a doable, user-friendly design to guide the upcoming React setup.

Initialize the frontend app inside the review app folder with Create React App named frontend, then set up Tailwind CSS per the official docs and update index CSS.

Create a user navbar for a movie review app using React, featuring a logo, theme toggle, search bar, and navigation links. Structure components and apply class names to style effectively.

Learn to use react-icons in a node and react mer n app by installing the package, importing a sun icon, and building a styled search bar with focus and transitions.

Design and implement a responsive sign-in form in a React project, using fragments, a reusable container, floating labels, focus effects, and subtle shadows for a polished login experience.

Refactor the signin form by creating a reusable form title and a form input component, wiring email and password fields with name, id, label, placeholder, and theme-aware color changes.

Create a functional sign-in form with a summit input prop and a submit button, styling it with class names and links to sign up.

Implement a sign up form in a MERN stack app, rename the page to sign up, add a name field with placeholder John Doe, and enable sign-in routing.

learn to set up react router dom in a react app by wrapping the app with browser router, defining routes, and using custom link components for seamless navigation.

Build a forget password form by reusing the password component, wiring an email input, a send link button, and routing to sign-in.

Create a six-field OTP input UI for email verification, styling each field with borders, centering text, and enabling auto-advance and backspace navigation between inputs.

Move to the next OTP field by typing, using an OTP array and index-based handling, and focus inputs with refs and onChange to update values.

Update the OTP state by managing multiple inputs, switching between old and new values, and using substring to enforce a single, bounded value for the active item.

Manage focus across multi-digit OTP inputs by implementing focus next and focus previous logic with an active index, and handle edge cases to prevent minus-one navigation.

Master backspace handling in a multi-input otp field for a movie review app by implementing a keydown handler. Move focus to the previous field when empty using index tracking.

Implement and integrate the confirm password form within the front-end authentication flow, leveraging signup, email verification, and forgot password to enable reset and navigation fixes.

Fix navigation by linking the logo to the home route and the login to the sign-in route, import and place the logo image, and prep the authentication flow.

Learn to implement the Context API in a React app by creating theme and team providers, wrapping the app, and accessing shared state with a useContext-based custom hook.

Enable dark mode in a movie review app with tailwind, configuring tailwind to switch between light and dark themes and applying dark styling to background and form elements.

Implement a dark theme by wiring a theme provider to toggle a class on the document element, persist the choice with localStorage, and restore the theme on revisits.

Toggle the theme by persisting a light or dark mode in local storage. The code switches the page class accordingly to reflect the selected theme on reload.

Refactor the theme code by creating a gate theme method to toggle and apply the theme, update class names and lists, and store the choice in local stories.

Learn to implement dark and light modes with theme classes, adjust background, text, borders, inputs, hover, and focus states, and refactor shared components to streamline theme changes.

Finalizing the theme by refactoring login and signup forms into a form container with common model classes, adjusting width and colors, and enabling a dark/light theme toggle.

Manage signup state (userInfo) in the front end, connect the UI to the API, and handle name, email, and password inputs with on change and submit logic, and prevent default.

Develop a custom validate user info method to perform signup form validation for the movie review app without libraries, checking name, email, and password with regular expressions and error handling.

Validate and send new user data to the backend api, create the user with an otp, and set up axios on the frontend to communicate with the mern stack backend.

Create an API client with Axios, set the base URL to localhost:8000, and post user info to backend. Explain handling responses and errors, returning data or error messages for signup.

Fix cross-origin errors in a node and react MERN app by enabling cors middleware on the backend and understanding frontend and backend domain differences.

Fixing 404 not found shows adding a universal not-found handler in the node backend, exporting a handle not found helper, and wiring it to send proper error responses.

Learn how to render a verification page that only valid users can access, navigate from signup to email verification, and verify emails using a user ID and OTP.

Implement an otp-based email verification flow by adding a verify user email endpoint, sending otp with user id, and validating otp before submitting the form.

Learn to validate a six-digit otp in a MERN stack app by checking for non-empty integers, using isNaN, and breaking a loop to flag invalid otp with console logs.

Verify a user email with an OTP in a MERN stack app using the user ID and asynchronous verification, then log errors and render the verification status.

Learn to build a notification context and provider in a React MERN app, enabling global update notifications and on-screen banners for success, warning, and error messages with a bounce animation.

Create and manage a notification system by updating a notification state, rendering colors by type with a switch, and clearing with a timeout to avoid loops.

Learn to sign a JWT token during email verification by signing user data (id, name, email) after OTP validation, and send the token to the frontend to streamline login.

Set up an auth context to manage user login state. Implement a login method sending email and password to the backend to obtain a token.

Implement a complete sign-in flow with a custom auth hook and context providers for email and password login. Validate input, manage authentication state and tokens, and show notifications during login.

Render a busy indicator during sign-in by swapping the button label for a spinner when pending, using React and a spinner icon.

Learn to implement the isAuth middleware in a MERN stack app by validating a JWT bearer token, decoding the user data, and attaching the authenticated user to the request.

Fetch user info by sending an authorization token in the request headers to the backend, using a frontend get request, async handling, and token-based sign-in without re-entering credentials.

Check if a user is signed in by reading the login token from local storage, render logout and hide sign-in options, and redirect to home route with useEffect and useNavigate.

Learn to implement a logout flow in the MERN movie review app by creating a logout method, clearing tokens from local storage, and resetting login state and user profile.

Automate sign-in after email verification by retrieving the token from the backend, storing it in local storage, and navigating to the homepage upon success.

Implement forgot password and confirm password flows by sending a reset link to the user's email, validating a one-hour token, and rendering the confirm password page.

Implement and validate a forgot password flow by handling email input, managing form state, validating the email, and posting to the forgot password endpoint with clear error or success notifications.

Read and validate a password reset token from query parameters, extract token and user id from the url, and verify it via backend middleware before enabling reset password flow.

Render an isVerifying indicator in the reset password UI, display 'Please wait. We are verifying your token.' and toggle styles and a spinner as verification progresses.

Learn to verify reset tokens by implementing an is valid token method, handling valid and invalid responses, updating notifications, and navigating to the reset password screen based on verification results.

Fix a small bug in the password reset flow by ensuring token removal and proper navigation when a token is invalid, and enabling reset with a new password.

Implement client-side password validation with two fields, password one and password two, using on change handlers and a submit function. Show update notifications and verify that passwords match before submission.

Learn to implement a complete reset password flow in a MERN app, including password validation, token handling, backend APIs, and user notifications for success and errors.

Expose user is_verified from the backend and present a resend email verification option in the frontend, showing an account not verified message with a verify link when needed.

Render a component conditionally when the user is logged in and not verified, using profile.isVerified from the auth provider, and prepare to navigate to the verification component.

Navigate to the email verification component with the navigate method, pass the user state, and redirect home if the user is logged in and verified, with an OTP request option.

Demonstrate how to provide a link to reapply email verification tokens (OTP), distinguish between button and submit types, and ensure the form only submits when intended.

Demonstrate a resend email verification token flow by adding a backend endpoint and front-end method to send a new OTP, verify it, and update user verification status.

Refactor a resend email verification component in a mern stack movie review app, adding a not-verified user interface, navigation wiring, and email verification flow.

Define the actors schema for the backend, including name, about, and gender, with an avatar object (url and public_id) stored in cloud storage and timestamps to record creation and updates.

Set up an actor router and create controller in a MERN app to handle actor creation. Use multer to process form-data uploads (images) and test endpoints with Postman.

Configure Multer middleware to handle image uploads in a node and express app, using a file filter to accept only image mime types and enforce single image uploads.

Implement middleware to validate actor data for a movie review app, enforcing name, about, and gender. Validate avatar uploads with image upload middleware and integrate an extra info validator.

Configure cloudinary cloud storage for image uploads in the mern stack course, using environment variables for cloud name, api key, and api secret, and validating actor data.

Demonstrates uploading an image to Cloudinary by configuring a cloud entity, sending a file through a form, and handling response data including public ID and resource type.

Learn how to optionally upload a user avatar when creating a new actor in a MERN stack movie review app, including optional image handling and safe defaults.

Learn to update an actor in a MERN stack movie review app by removing the old avatar from cloud storage, uploading a new image, and updating the avatar field.

Explore image optimization for actor avatars using cloud transformation: resize and crop to consistent dimensions, with portrait, thumbnail, and banner modes, and face-based gravity for compact cloud storage.

Explore deleting an actor by wiring a delete route and controller, validating IDs, removing the actor from the database, and deleting the avatar image from cloud storage.

Create indexes in MongoDB and Mongoose to enable actor name search. Build a search endpoint using a text operator for exact matches and test with Postman.

Create and use an endpoint to fetch the latest actors, sorting by created at time in descending order and applying a limit to display recent uploads in the admin panel.

Learn to fetch a single actor by id in an Express Energy app, validate the id from request params, handle missing actors with proper responses, and test the endpoint.

Refactor the actor controller by extracting image upload logic to a cloud helper and centralizing actor formatting for create and update flows. Prepare the codebase for role-based authentication.

Add a role field to the user model with admin and user values, and enforce admin-only access for actor management using authentication middleware.

Secure routes by requiring authentication and an admin role to create or update actors, using authorization headers to guard endpoints, while permitting public access to fetch a single actor.

Create a mongoose movie schema for a MERN app, modeling title, storyline, director reference, release date, status, type, genre array, cast, writers, poster, trailer, language, and timestamps.

Upload a trailer in the background via the backend api and cloud storage. Show an upload indicator as the admin completes title, description, writers, directors, then save to database.

Create a cloud-based trailer upload route in a MERN app, secured by admin authentication and powered by a video upload middleware and a dedicated upload trailer endpoint.

Upload a trailer video to the cloud by structuring the file, using middleware, validating file presence, and configuring the cloud uploader with resource type video, authorization header, and public_id.

Create a new movie via a post route secured for admin users, using poster image upload middleware and a create movie controller with body field validation.

Define the movie input data structure with 13 properties, including title, storyline, director, cast, genres, poster and trailer, and learn how to validate each property with express validator.

Create and export a comprehensive movie validation middleware that enforces required fields including title, storyline, release date, language, status, genres, tags, cost, lead actor, and trailer.

fixes a bug in the data validation flow, clarifying proper return values after validation and showing how to pass complex data from the frontend or postman.

Send and receive complex movie data from the front end by modeling arrays and objects, stringifying payloads with JSON, and validating data through a backend endpoint using Postman.

Explore a pass data middleware to parse optional fields like trailer info, cost, genres, tags, and writers, update the request body, validate, and test with postman.

Import the movie model in the controller, create a new movie with validated fields, and validate actor, director, and writer IDs while handling poster and trailer data.

Learn how to upload a movie poster to Cloudinary, configure responsive images with breakpoints and transformations, and create multiple sizes like 1280x720 and 640x360.

Learn to store multiple thumbnails for a movie by building a poster object with responsive breakpoints, wiring public IDs, updating the movie model, and validating with API calls.