Build and Deploy a Full Stack Realtime Chat Messaging App with NextJS 13

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 super-performant realtime chat app deployed to the web, ready to be used by actual users.

The best features:
– Instant real-time 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/nextjs-realtime-chat
⭐ My GitHub: https://github.com/joschan21
⭐ Discord: https://discord.gg/4vCRMyzgA5
⭐ 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: https://www.youtube.com/watch?v=Dert_kpLWE0

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 real-time yet)
5:51:24 Summary: Messages functionality is working
5:57:32 Further chat styling improvements
6:03:05 Implementing real-time 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