ChatGPT AI Voice Chatbot Build with React and FAST API Combo

Course Curriculum

Chapter 1: Introduction and Resources

Lecture 1: What We Are Building

Lecture 2: About Your Instructor

Lecture 3: Course Structure

Lecture 4: Expectation vs Reality

Lecture 5: Tech Stack – Backend

Lecture 6: Tech Stack – Frontend

Lecture 7: Tech Stack – Styling

Lecture 8: CODE Package Resources

Lecture 9: Resource Instructions

Lecture 10: WARNING: OpenAI API Occasional Delay

Chapter 2: Extra: (OPTIONAL) – React Crash Course

Lecture 1: MUST READ

Lecture 2: Create React App with Vite

Lecture 3: Install Tailwind

Lecture 4: What We Are Building

Lecture 5: Your First Component

Lecture 6: What Just Happened

Lecture 7: Optional Reading – More On Technical Behind the Scenes

Lecture 8: Styling Our First Button

Lecture 9: Running a Parent Function From a Child (Passing Props)

Lecture 10: Monitor State and Handle Side Effects with useEffect

Lecture 11: BetBox Structuring

Lecture 12: Adding BetButton Functionality

Lecture 13: Random Org URL

Lecture 14: Send Axios Fetch Request

Lecture 15: Final Updates and Finishing Touches

Lecture 16: React Learning Next Steps

Chapter 3: Environment Setup – Frontend and Backend

Lecture 1: VS Code Recommendation and Plugins

Lecture 2: Folder Setup

Lecture 3: Python and Node Version Installation Checks

Lecture 4: FastAPI Python Backend Preparation and Package Installations

Lecture 5: Frontend JSON Script

Lecture 6: React Frontend Preparation and Package Installations

Lecture 7: Tailwind CSS Integration

Lecture 8: API Keys

Lecture 9: Setting Up Environment Variables

Chapter 4: Backend Build – Working with AI

Lecture 1: Important Note – Google Chrome

Lecture 2: Backend Initialisation with Imports and CORS

Lecture 3: About Docs and Endpoints

Lecture 4: Record Voice Snippet

Lecture 5: Convert Voice to Text with Whisper

Lecture 6: Prompt Engineering ChatGPT

Lecture 7: Receiving ChatGPT Response

Lecture 8: Store and Reset Message Data

Lecture 9: Eleven Labs API Docs Walkthrough

Lecture 10: Giving Rachel a Human Sounding Voice

Lecture 11: Frontend Preparation and Troubleshooting Discussion

Chapter 5: Frontend – React Web Application

Lecture 1: Important – Please Read

Lecture 2: Structuring Controller Component

Lecture 3: Title Component – Part I (Reset Function)

Lecture 4: Title Component – Part II (Render Completion)

Lecture 5: Controller Recorder Container

Lecture 6: Adding Audio Recording Functionality

Lecture 7: Animating a Record Icon

Lecture 8: Playing Back Audio and Blob Encoding

Lecture 9: Hello Rachel

Lecture 10: Full User Interaction and Tweaking

Lecture 11: Making Production Ready

Chapter 6: Next Steps

Lecture 1: Further Prompt Engineering and Use Cases

Lecture 2: Discord and Links

Lecture 3: Next Steps