Projenin amacı, TV dizileri, filmler ve belki de gelecekte birçok farklı şeyin takibini kolaylaştırmaktır. Daha önce izlediklerimi takip etmek için Notion kullanıyordum, ancak bunu manuel olarak yapmak oldukça zorlayıcıydı. Benzer uygulamalar olsa da kendi sorunları vardı. İhtiyaçlarımı karşılamak için yeterli değillerdi. Bu yüzden böyle bir uygulama geliştirmek istedim.
- Yakında Gelecekler
- Listeler Oluşturma
- Yorum Yapma
İstemci: React, Firebase, Zustand, TailwindCSS, Shadcn-ui, Valibot, React Hook Form, React CSV, Next Themes, Query String
Sunucu: Next.js, next-firebase-auth-edge, Firebase Admin
Proje hazırlanırken birçok zorlukla karşılaştım. Muhtemelen en büyük zorluk çoklu dil desteğiydi. Hem kullanıcı kimlik doğrulamasını hem de çoklu dil arayüzünü kurmak 5 gün sürdü. Kullanıcı giriş/çıkış sistemi ve Firebase Admin kurulumu zorlayıcıydı.
next-themesile koyu/açık mod geçişifirebaseile gerçek zamanlı veri değişiklikleri@tanstack/react-queryile sayfalamafirebaseile profil üzerinde tam kontrol (profil resmi ekleme, kullanıcı adı ekleme, görünen ad ekleme, şifre değiştirme, e-posta değiştirme)- Mobil uyumlu
next-intlile çoklu dil desteği (tr, en, de)- Güvenli kimlik doğrulama
next-firebase-auth-edge react-csvile veri dışa aktarma@tanstack/react-tableile tablo işlevselliği- Kullanıcı takip etme
- Favorilere ekleme, derecelendirme, durum ekleme
- SEO desteği
- Shadcn-ui ile erişilebilir bileşenler
react-hook-formvevalibotile form doğrulama- Hız sınırlama (rate limiting)
react-iconsuse-debounceile geciktirme- Firebase ile gerçek zamanlı mesajlaşma sistemi
next/dynamic ile içe aktarma, sunucu taraflı işlemler (SSR) ve react-query kullanımı
Soru 1: Soru 1
Cevap 1: Cevap 1
Soru 2: Soru 2
Cevap 2: Cevap 2
Projeyi klonlayın:
git clone [email protected]:dukeofsoftware/series-tracker-v2.gitProje dizinine gidin:
cd series-tracker-v2Gerekli paketleri yükleyin ve .env dosyasına gereken değerleri ekleyin:
pnpm installSunucuyu çalıştırın:
pnpm serveBu projeyi çalıştırmak için aşağıdaki ortam değişkenlerini .env dosyanıza eklemeniz gerekecek. Bu değerlere .env.example dosyasında ulaşabilirsiniz.
ANALYZE=false
FIREBASE_PROJECT_ID=
FIREBASE_API_KEY=
FIREBASE_CLIENT_EMAIL=
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----
-----END PRIVATE KEY-----\n"
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_PROJECT_ID=
NEXT_PUBLIC_BUCKET=
NEXT_PUBLIC_MESSAGING_SENDER_ID=
NEXT_PUBLIC_APP_ID=
NEXT_PUBLIC_MEASUREMENT_ID=
NEXT_PUBLIC_FIREBASE_DATABASE_URL=
NEXT_PUBLIC_REDIRECT_URL=
USE_SECURE_COOKIES=false // true olarak ayarlayın eğer https kullanılıyorsa
TMDB_TOKEN=
SITE_URL=
İşte bazı il
gili projeler:
Eğer herhangi bir geri bildiriminiz varsa, lütfen bize [email protected] adresinden ulaşın.