Gerçek Zamanlı Mesajlaşma Klonu: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher (2023)
Bu, Gerçek Zamanlı Mesajlaşma Klonu için bir depodur: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher.
En son web geliştirme teknolojilerini kullanarak gerçek zamanlı bir Mesajlaşma klonu oluşturmanın inceliklerini öğrenin. Bu kapsamlı rehberde, endüstrideki en iyilerle yarışabilecek tamamen işlevsel ve görsel olarak çarpıcı bir sohbet uygulaması oluşturma sürecini adım adım anlatacağız.
Ana Özellikler:
- Pusher kullanarak gerçek zamanlı mesajlaşma
- Mesaj bildirimleri ve uyarıları
- Şık bir arayüz için Tailwind tasarımı
- Tailwind animasyonları ve geçiş efektleri
- Tüm cihazlar için tam duyarlılık
- NextAuth ile kimlik doğrulama
- Google kimlik doğrulama entegrasyonu
- Github kimlik doğrulama entegrasyonu
- Cloudinary CDN kullanarak dosya ve resim yükleme
- react-hook-form kullanarak istemci formu doğrulama ve yönetimi
- react-toast ile sunucu hata yönetimi
- Mesaj okuma bilgileri
- Çevrimiçi/çevrimdışı kullanıcı durumu
- Grup sohbetleri ve birebir mesajlaşma
- Mesaj eklentileri ve dosya paylaşımı
- Kullanıcı profil özelleştirme ve ayarlar
- Route işleyicilerinde POST, GET ve DELETE rotalarını nasıl yazacağınız
- (app/api) yol işleyicilerinde verileri nasıl çekeceğiniz (API OLMADAN! Sanki sihir gibi!)
- Gerçek zamanlı bir ortamda Sunucu ve Alt bileşenler arasındaki ilişkileri yönetme
- Sohbet odaları ve kanallar oluşturma ve yönetme
Deneyimli bir geliştiriciyseniz beceri setinizi genişletmek ya da en son web geliştirme teknolojilerini öğrenmeye hevesli bir acemiyseniz, bu öğretici herkes için bir şeyler sunuyor. Bu heyecan verici yolculuğa katılın ve web geliştirme becerilerinizi yeni zirvelere taşıyın!
Node sürümü 14.x
git clone https://github.com/HakanKorkz/messenger-clone.git
npm i
DATABASE_URL=
NEXTAUTH_SECRET=
NEXT_PUBLIC_PUSHER_APP_KEY=
PUSHER_APP_ID=
PUSHER_SECRET=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
GITHUB_ID=
GITHUB_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
npx prisma db push
npm run dev
Komutları npm ile çalıştırma npm run [komut]
komut | açıklama |
---|---|
dev |
Uygulamanın geliştirme örneğini başlatır |
Bu proje, Antonio Erdeljac'ın orijinal çalışmasının tam bir kopyasıdır. Projeyi oluşturan Antonio Erdeljac'a minnettarlığımı sunmak isterim. Orijinal projeyi GitHub deposunda bulabilirsiniz.
- GitHub: Antonio Erdeljac
- YouTube Kanalı: Code With Antonio
This project is an exact replica of the original work by Antonio Erdeljac. I would like to extend my gratitude to Antonio Erdeljac for creating the project. You can find the original project on his GitHub repository.
- GitHub: Antonio Erdeljac
- YouTube Channel: Code With Antonio