In this video, we'll build a full stack realtime chat app with NextJS 13 together. We'll be using Upstash Redis as our database, React for the user interface, and write our code in TypeScript. By the end of the video, you'll have a superperformant realtime chat app deployed to the web, ready to be used by actual users.

The best features:
Instant realtime messaging using Upstash Redis
Full friendship system to add, accept or deny friends
Super fast database queries with Redis
Responsive UI built with TailwindCSS
Protection of sensitive routes
Google Authentication

.. and many more!

Project links
⭐ The GitHub repository (feel free to give it a star): https://github.com/joschan21/nextjsr...
⭐ My GitHub: https://github.com/joschan21
⭐ Discord:   / discord  
⭐ Upstash: https://upstash.com/?utm_source=Josh2
⭐ Pusher: https://pusher.com/

Thank you to Upstash for sponsoring this video. I've used their managed Redis service even before they reached out and Redis fits super well into this build as a fast database.

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

0:00 What you'll learn
03:41 Realtime Chat Demonstration
06:51 Understanding core concepts
13:16 Laying the app foundation
40:39 Integrating our database
46:49 Implementing authentication
1:06:32 Creating the login page
1:26:25 Adding users as friends
2:03:34 Creating our database helper function
2:07:28 Finishing the add friend feature
2:23:19 Creating our dashboard layout
3:07:33 Creating the active friend requests page
3:34:35 Accepting a friend request
3:38:07 Protecting our sensitive routes
4:08:21 Creating the chat functionality (not realtime yet)
5:51:24 Summary: Messages functionality is working
5:57:32 Further chat styling improvements
6:03:05 Implementing realtime communication!
7:07:50 Adding loading states for better UX
7:30:09 Adding a main dashboard homepage
7:45:19 Creating a mobile navigation menu
8:03:35 Final improvements, bug fixes & deployment
8:22:52 Final app demo, everything works smoothly