Creating Twitch Clone - Practical MERN Stack Course

Install Node.js to run server-side code and build a React app, using nodejs.org downloads for Windows, macOS, or Linux; then verify with node --version and npm --version.

Initialize a Node.js project by creating a twitch.tv folder, running npm init with defaults, then move package.json into a server folder to organize server and client structure.

Install server-side dependencies with npm install --save, including bcrypt, dotenv, express, joi validation, jsonwebtoken, mongoose, nodemon, socket.io, and uuid. Create index.js and configure a nodemon start script.

Build an express server with ES module imports, dotenv for env vars, and cors; parse json, create http server, listen on port 5002, and return a hello at root.

Create and organize authentication routes on the server with Express router, connect to MongoDB database, implement register and login endpoints, and test the API with Postman or Sinfonia.

Test authentication routes using Postman to send requests to the login endpoint on localhost 5002, test post and get methods, attach headers and body data, and validate API responses.

Create a controllers folder under the source folder for authentication, with post login and post register controllers, export and import them in routes, and move responses to controllers.

Implement server-side validation middleware for the register route, validating the json body data (username, email, password) before reaching the post register controller, returning invalid data responses when needed.

Discover Joi for validating request data in a MERN app, define username, password, and email schemas, and auto-respond on invalid input.

Set up a cloud MongoDB database to store user data for authentication, create a free M0 cluster, configure access, and connect the app to the main database and collection.

Connect to the database using mongos with a mongo uri from the env file, including username and password, then start the server and log a success or any connection errors.

Create a Mongoose user model with email, username, and password, enforce unique email, and save a new user to the main database via the post register route.

Implement authentication in the MERN stack app using json web tokens to issue access tokens for restricted resources, covering the register flow and basic error handling.

Encrypt and hash user passwords using bcrypt with a salt to store only encrypted passwords in the database, then issue a JWT token for authenticated access.

Create and sign a json web token with the user’s id and email, secure it with a server secret from env, and set an eight-hour expiry.

Test the registration flow in a mern stack app by validating unique emails, handling 409 conflicts, starting the server on port 5002, and returning a token with encrypted passwords.

This lecture demonstrates a mern login flow: verify user by email, compare passwords with bcrypt, issue a json web token on success, and return user data with error handling.

Test login functionality with Postman to validate credentials, observe the token for access, and ensure emails are handled as lowercase for reliable authentication.

Build a login and registration form linked to server-side logic, with email and password fields, validation messages, and a switch to sign up; later perform http requests to create accounts.

Create a React application in the client folder using npx create-react-app. Then start the app with npm start to open in the default browser.

Clean up the initial React project by removing the logo, tests, app.css, and reportWebVitals; simplify index.js to render into root and enable live reloading.

Learn to implement routing in a MERN stack app using react-router-dom v6, creating dashboard and login pages, configuring browser router and routes, and rendering components based on URL paths.

Create login and register forms using useState to manage isLogin, implement a toggle handler to switch states, and render login or register components conditionally on the page.

Attach predefined css styles to the login form using page.css. Build a login container, form, and logo, and wire an onClick switch to toggle between forms.

Create a logo component in a MERN app by placing a logo placeholder in resources/images, importing it, and rendering it with centered styling on the login page.

Create a reusable input component for the login and register forms by passing props for label, value, onChange, onBlur, and validation messages, while wiring type, error display, and CSS styling.

Manage login form state with one useState hook for email and password. Update the state via a shared change handler that uses the field name and the spread operator.

Create client and server side validation functions for username, email, and password in a shared validators module, exposing export const validateEmail, validatePassword, and error messages to ensure secure form submissions.

Link form validation to the login experience by exporting validators, validating email and password on blur, and updating form state to show errors and disable submit until valid.

Create a registration form mirroring the login form, adding username and password confirmation fields, implement validation with validators, manage form state, display error messages, and prepare for backend api integration.

Prepare the client for http requests by installing axios, creating api folder with index.js and api.js, and implementing login and register calls to localhost 5002/api with hooks useLogin and useRegister.

Export use login hook that uses navigate to log in with email and password, store user data and token in local storage, redirect to the dashboard, with loading state.

Create a useRegister hook mirroring useLogin to handle email, password, and username, manage loading and errors, and export it for wiring into the signup form.

Learn to implement react hot toast for error and success messages, configure the toaster, and display server validation messages during login and registration flows.

Test user authentication flows by creating accounts, signing in, and validating server responses with a MongoDB Atlas backend, then inspect local storage tokens and user data.

Define and test server-side API routes for settings and channel data in a MERN stack Twitch clone, enabling channel information fetch, follow status, and user updates via Postman.

Define channel and message schemas with mongoose for a MERN app, including defaults and uuid stream keys, references to messages, and user-followed channels; drop the database to apply changes.

Register a user via postman on the mern stack app, automatically create a channel with default values and link its id to the user, then verify startup on port 5002.

Identify routes that require jwt authentication and attach tokens for secured settings and password changes. Implement middleware to enforce token checks and secure follow actions.

Implement a get channel details route in the channels API using express and validator, validating the channel id param and returning id, title, description, username, online, and stream URL.

Fetch channel data from the database by channel id, joining user and channel models to return username, title, description, id, stream URL, and isOnline, with 404 and 500 error handling.

Add a public api route /api/channels to fetch all active channels with id, title, avatar url, username, and is online, populating data from the user model and filtering inactive channels.

Learn to implement an authentication middleware that validates JWT tokens, protects routes, extracts tokens from headers, and attaches user info to the request before passing to the next middleware.

Implement the get channel settings route in a MERN app by wiring settings routes with verify token middleware to fetch the user's channel details securely.

Fetches real user data, including channel details, from the database using a token, and returns the channel id, username, title, description, avatar URL, and stream key.

Create and test a put route to update channel settings with validation and token verification, updating username, title, description, avatar URL, and returning the updated channel data.

Resolve the bug where updates return old data by using new true, so responses and the database reflect updated values during postman testing, with the next route for changing password.

Create a patch route under settings to change the password, validate request body, verify the token, compare and hash the new password with bcrypt, update the user, and handle errors.

Test the change password route with patch on settings password, supplying old and new passwords, validating token, handling invalid credentials, and confirming password changed successfully.

Implement a post follow channel route in a mern stack app, validating token and body, updating the user's follower channels, saving changes, and returning success or already-following errors.

Implement a protected get follower channels route to fetch all channels followed by the authenticated user. Return the followed channels as an array of IDs in a 200 response.

Build the dashboard user interface with a navbar, a sidebar, and a content container to display channels and channel details, and show login actions like my account and log out.

Learn to implement nested routes for a Twitch clone's dashboard and a single channel with a stream preview.

Build a dashboard page with nav, sidebar, and content, using a full-screen dashboard container and absolute positioning for nav and sidebar, with content placed beneath.

Create a navigation bar with a reusable nav logo and nav button, align logo left and buttons right using flex, and prepare conditional login rendering from a local storage token.

Create a sidebar component that renders followed channels in a column, using dummy data to map channels and show each username with online or offline status in green or red.

Implement nested routing in the dashboard to render settings, channels, and a single channel view within a persistent content container.

Create a channels section that renders a grid of channel cards from dummy data, displaying each channel's title, username, avatar, and online status, with a navigate-to-channel handler.

Render channel cards on the client side and build a channel view with a video description area and a right-side chat, wiring up channel and chat components.

Define a channel view with a description component using dummy data for id, title, description, and username; prepare for real data fetch and future follow button integration.

Build the settings page by creating a settings component and a stream key component, wiring imports, and rendering forms for channel details and the stream key in a MERN stack app.

Refactor auth input by moving off input to a shared components folder, renaming it to input, and exporting it via index.js for use in login, registration, and settings forms.

Create a channel settings form in a Twitch clone MERN app by rendering inputs from a data array and adding username, title, avatar URL, and description with validation.

Implement front-end validators for channel settings by adding title, description, and avatar URL checks that mirror server rules for 3–30 character titles and 10–200 character descriptions.

Render and manage a channel settings form by mapping over form inputs, initializing state from server-fetched channel settings (title, username, avatar URL, description) and wiring validation.

Implement onChange and onBlur validations for username, avatar url, title, and description; render a text area for description; and wire up form handlers for the next lecture's submit button.

Add a submit button to the channel settings form, disable it when the form is invalid, validate username, title, description, and avatar URL, and save changes via http request.

Create a change password form by reusing the channel settings inputs, building a password settings component, implementing client-side validation with a password validator, and wiring form state and submission.

Connect client interface to the server api using the useUserDetails hook to manage login state via local storage, with the navbar showing login or my account and log out.

Navigate between pages using react router dom's navigate hook to switch settings, channels, and login without page reloads, wiring onClick handlers for a seamless single-page app.

Implement a reusable logout function in a shared utils/logout.js, remove the user from local storage, refresh to log out, and redirect to channels via the navigation flow.

Develop a useChannelSettings hook to fetch channel settings via the API client, exposing username, title, description, avatar URL, and stream key, with error handling.

Implement a loading spinner with an is-fetching flag during channel settings fetch, using a shared spinner component and a useEffect hook that handles errors with a toast.

Debug and fix the channel settings route in the MERN stack app by correcting the API settings path to fetch channel settings and handle token authentication via headers.

Attach the authentication token to every API request using Axios interceptors in the API client, reading user details from local storage and setting the bearer authorization header.

Add and call an asynchronous update channel settings function to save channel data via the API using a PUT request, with error handling and toast feedback for successful saves.

Validate the channel settings form on initial render, using useState to track values, and validate title, username, avatar url, and description to enable the save button and persist changes.

Implement and wire a useChangePassword hook to call a patch API route, handle form data, show toasts, and validate old and new passwords in a MERN stack Twitch clone.

Create a use channels hook to fetch all channels and followed channels via API, display results in the dashboard, and handle errors with toasts.

Learn to customize a channels hook by filtering channels array to include only followed channels using the filter and includes methods to match channel ids, enabling rendering of follower data.

Display real channels in the dashboard by fetching channels with the useChannels hook, handle loading state, and pass all channels to the content component.

Debug and render real followed channels by fixing null initialization in the useChannels hook, adding optional chaining, mapping channels to cards, and wiring them into the sidebar for authenticated users.

Set up channel page navigation by wiring a navigate to channel handler on cards, passing the channel id to route to channel page and fetch user name, title, and description.

Learn to fetch channel details using a channel id with a get request, handle errors via toast notifications, and expose data through a custom hook for the channel view.

Export and use the channel details hook in the channel view, fetch details by id with the useParams hook, and display a loading spinner while handling not found errors.

Render a follow button in the channel description by passing the channel ID. Show it only when the user is logged in and prepare to follow the channel.

Refetch followed channels by passing the get channels function through components without a global store, using on success to refresh the sidebar and update the follower list.

Fixes a bug where the sidebar disappears after refetching follower channels, by passing is locked to the use channels hook so follower channels are fetched on success.

Explore RTMP theory and how OBS streams feed a low-latency SMTP server, enabling online channels and playback over HTTP via an API.

Create a node.js project and install node media server to establish an rtmp-based streaming backend. Explore the web admin panel and connect OBS to publish live streams.

Start a node media server, configure its default settings, and run npm start to verify http 8000, websocket 8000, and rtmp 1935 streaming with the OBS dashboard.

Set up and stream using obs to a Node media server, configure basic obs settings, add a display capture, and prepare the stream key for the smtp server.

Learn to stream from obs to a node media server by configuring the stream key, starting the server and app, and verifying the live feed on the dashboard.

Stream from OBS to an RTMP server and display a flv stream in a React app with React Flv Player, starting with a hardcoded url and later making it channel-specific.

Learn to pass the correct stream url for every channel by using the channel's stream key on the server side, then deliver it to the client without hardcoding.

Fix the bug by generating a new stream key for each new channel using a function reference, ensuring unique uuids and preventing replication, and refresh the database to reset channels.

Discover how to build a Twitch clone with MERN, check if a channel is online by querying the media server via Axios, and conditionally render video based on live streams.

Implement online status for channels by fetching channel details, importing axios, and cross-checking live streams to mark which channels are online, preparing for the chat feature.