Let's become amazing web devs together! In this single video, we'll build a super useful customer support chatbot using OpenAI's ChatGPT. It's an awesome portfolio piece to have because it shows your ability to create interactive web apps that solve realworld problems.

The best features:
Realtime streamed chatbot responses
Optimistic updates for the best UX
Secured, ratelimited API routes to prevent abuse
Graceful error handling
.. and many more!


Project links
⭐ Upstash for API route security: https://upstash.com/?utm_source=Josh2
⭐ GitHub repository (star if you're cool): https://github.com/joschan21/bookbuddy'>https://github.com/joschan21/bookbuddy
⭐ OpenAI: https://openai.com/
⭐ My GitHub: https://github.com/joschan21
⭐ Discord:   / discord  

Thank you to Upstash for sponsoring this video. I've used their ratelimiting service before they reached out and it fits super well into this build to secure our OpenAI API route.

How to use the "FC" snippet I keep using in the video:
Step 1: Paste the following into your Settings; User Snippets; typescriptreact.json: https://pastebin.com/PWzQGH08
Step 2: Type "fc" and hit TAB.
Step 3: If you still can't figure it out, here's me explaining it in detail:    • How to create Custom Snippets in VSCo...  

Timestamps:
0:00 Introduction
0:47 What you'll learn & demonstration
4:17 Project setup
10:28 Creating our collapsed chat
26:51 Creating our chat input
54:38 Setting up our API route
1:03:47 Prompting & metadata for the chatbot
1:06:40 Implementing realtime response streaming
1:35:50 Creating our context & why bother
1:57:00 Creating our ChatMessages component
2:14:57 Properly rendering the chat responses
2:30:10 Implementing graceful error handling
2:33:27 Last tweaks
2:36:53 API ratelimitation with Upstash
2:46:15 We're all done! Good job.