Completed
Designing Login Screen UI
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
AI SaaS Chat Bot using MERN Stack – Tutorial
Automatically move to the next video in the Classroom when playback concludes
- 1 Introduction, Demo and Overview
- 2 Deep Introduction About Our Goals
- 3 What is MERN Stack?
- 4 Why should we use MERN Stack instead of other stacks?
- 5 Technical Introduction On Our Project
- 6 Setup Node, Express Starting Project With TypeScript
- 7 How to create REST API With NodeJS and Express Practical
- 8 Setup MongoDB Database Connection
- 9 Get API Keys From OpenAI
- 10 Setting Up Routes For Users and Chats
- 11 Define Database Models and Schema
- 12 Creating our first GET Request to get all users
- 13 Creating User Signup POST Route To Store Users
- 14 What is a Middleware?
- 15 Setting up data validation middleware with express-validator library
- 16 Creating User Login Route
- 17 Deep dive into User Authentication and Authorization With JWT Access Tokens and HTTP Only Cookies Explanation
- 18 Implementing JWT Tokens
- 19 Setting HTTP Only Cookies with Cookie-parser
- 20 Setting Up Frontend. A React App With Vite and Typescript, Installing Dependencies, Importing Fonts
- 21 Creating a customized theme of Material UI
- 22 Add Routes with react-router-dom
- 23 Design App's Header
- 24 Adding Authentication Context Provider
- 25 Adding Navigation Links To Header
- 26 Designing Login Screen UI
- 27 Creating and Sending API Request to backend
- 28 Keeping the user logged in: Verify JWT Token Validity and Login the user
- 29 Integrating OpenAI to NodeJS application and creating chat completion route request
- 30 Designing Chat Page UI on Frontend
- 31 Sending API Request For Chat completion
- 32 Display Code Blocks in React App
- 33 Fetch All Chats Of User On Refresh
- 34 Deleting all chats of user
- 35 Adding Protected Routes and Logout user request
- 36 Creating Signup UI
- 37 Design Homepage UI: Adding Typing Animation and Images Rotation and Screenshot of our chat.
- 38 Fixing alignment issues
- 39 Summary!
