/messenger-clone

Primary LanguageTypeScript

Gerçek Zamanlı Mesajlaşma Klonu: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher (2023)

Copy of Copy of Fullstack Twitter Clone (1)

Bu, Gerçek Zamanlı Mesajlaşma Klonu için bir depodur: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher.

VIDEO ÖĞRETİCİ

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!

Önkoşullar

Node sürümü 14.x

Depoyu Klonlama

git clone https://github.com/HakanKorkz/messenger-clone.git

Paketleri Yükleme

npm i

.env Dosyasını Ayarlama

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=

Prisma'yı Ayarlama

npx prisma db push

Uygulamayı Başlatma

npm run dev

Kullanılabilir Komutlar

Komutları npm ile çalıştırma npm run [komut]

komut açıklama
dev Uygulamanın geliştirme örneğini başlatır

Teşekkürler

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.

Proje Sahibi

Acknowledgements

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.

Project Owner