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.

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.

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.

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.

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 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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.