luanscar / redis-chat-app

Extremely Fast Chat App with Redis

Redis Chat App ⚡

Video Tutorial on Youtube

About This Course:

• ⚛️ Tech Stack: Next.js 14, TypeScript, Tailwind CSS, UPSTASH Redis
• 🔐 Authentication
• 💬 Real-Time Messaging
• 📱 Responsive UI
• 🌗 Light and Dark Mode
• 🔔 Notification Sounds
• ⌨️ Satisfying Typing Effects
• 📊 Learn About Redis Data Types
• 📷 Image Uploads
• 🛠️ Integration with Upstash Redis for Scalable Chat
• 💙 Awesome Landing Page
• 🌐 Deployment
• 🚀 And Many More Cool Features
• ✅ This is a lot of work. Support my work by subscribing to the Channel

Setup .env file

KINDE_CLIENT_ID=
KINDE_CLIENT_SECRET=
KINDE_ISSUER_URL=
KINDE_SITE_URL=
KINDE_POST_LOGOUT_REDIRECT_URL=
KINDE_POST_LOGIN_REDIRECT_URL=


UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
NEXT_PUBLIC_CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=


PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=

NEXT_PUBLIC_PUSHER_APP_KEY=

Install dependencies

npm install

Start the app

npm run dev

Timestamps for your convenience:

• 00:00:00 - App Showcase
• 00:01:52 - Project Setup
• 00:14:40 - Auth Page Design
• 00:26:40 - Preferences Tab
• 00:46:20 - Chat Layout Design
• 02:09:00 - Satisfying Typing Effect (easy)
• 02:15:00 - Authentication
• 02:23:00 - Auth Callback and Redis
• 02:54:50 - Fetch Users for Sidebar
• 03:18:30 - SEND Messages
• 03:41:00 - GET Messages
• 03:53:30 - SEND Images
• 04:08:05 - Realtime Messages
• 04:31:50 - Deployment
• 04:38:10 - Testing in Production and Bye!

I'll see you in the next one! 🚀