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-r...
⭐ 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 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
Смотрите видео Build and Deploy a Full Stack Realtime Chat Messaging App with NextJS 13 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Josh tried coding 08 Апрель 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 227,37 раз и оно понравилось 7.4 тысяч людям.