Kapsamlı Elektrikli Araç Şarj İstasyonu Platformu Geliştirme Promptu (Next.js Versiyonu) Aşağıdaki prompt, Next.js kullanarak elektrikli araç şarj istasyonu platformunu geliştirmeniz için adım adım bir rehber niteliğindedir. Bu promptu Next.js geliştirme ortamınızda ya da başka bir AI aracında kullanabilirsiniz. CopyElektrikli araç şarj istasyonu platformu için Next.js 14 tabanlı bir web uygulaması geliştirmem gerekiyor. Bu uygulama, farklı şarj istasyonu sağlayıcılarını tek bir platformda birleştirerek kullanıcılara kesintisiz bir deneyim sunmayı amaçlıyor.

Uygulama modern Next.js App Router ile geliştirilmeli ve temiz bir mimari yapıya sahip olmalı:

1. App Router yapısı ile sayfalar (/app directory)
2. UI Bileşenleri (UI Components)
3. State Yönetimi (React Context API veya Redux Toolkit)
4. Servis Katmanı (API ve harici servis entegrasyonları)
5. Veritabanı Katmanı (Veritabanı modelleri ve işlemleri)
6. Ortak Yardımcılar (Utils ve Hook'lar)

Ana Özellikler:

• Kullanıcı kaydı ve yetkilendirme sistemi (NextAuth.js)
• Harita üzerinde şarj istasyonlarını görüntüleme (Mapbox veya Google Maps)
• Filtreleme ve arama seçenekleri (konnektör tipi, güç, ücret, müsaitlik)
• QR kod taraması ile şarj başlatma (QR okuma için web API)
• Şarj oturumu izleme (gerçek zamanlı)
• Ödeme işlemleri (Stripe entegrasyonu)
• Şarj geçmişi ve faturalar
• Kullanıcı profili yönetimi
• Rota planlama

Teknik Gereksinimler:

• Next.js 14+
• TypeScript
• Tailwind CSS veya styled-components
• NextAuth.js kimlik doğrulama
• Prisma ORM ile veritabanı yönetimi
• PostgreSQL veritabanı
• React Query veri yönetimi
• Harita API'si (Mapbox, Google Maps)
• WebSocket/Socket.io gerçek zamanlı iletişim
• Stripe ödeme entegrasyonu
• OCPP protokolü ile istasyon entegrasyonu
• PWA özellikleri
• Responsive tasarım

Başlamak için lütfen şunları oluşturun:

1. Next.js 14 proje yapısı ve klasör organizasyonu
2. Temel bileşen ve sayfa şablonları
3. Tema konfigürasyonu (global CSS veya tema provider)
4. NextAuth.js kurulumu
5. Ana veritabanı modelleri (Prisma)
6. API route'larının temel yapısı
7. Örnek bir sayfa uygulaması (örn. harita ekranı veya istasyon detay sayfası)

Her kısım için açıklamalı kod örnekleri ve TypeScript tiplerini de sağlayın, böylece mimariyi anlayabilir ve genişletebilirim. Bu temel promptu kullanarak sistemi geliştirmeye başlayabilirsiniz. İhtiyaç duyduğunuz spesifik bileşenler için aşağıdaki gibi ek promptlar kullanabilirsiniz: Ek Promptlar (İhtiyaca Göre) Kullanıcı Yönetimi CopyElektrikli araç şarj uygulaması için Next.js ve NextAuth.js kullanarak tam bir kullanıcı yönetim sistemi geliştirmem gerekiyor. Bana aşağıdakileri içeren kapsamlı bir kod örneği gösterir misiniz?

1. NextAuth.js kurulumu ve konfigürasyonu

2. Credential, Google, Apple gibi çoklu giriş yöntemleri

3. Kullanıcı veritabanı modeli (Prisma schema)

4. Kullanıcı API rotaları (/api/auth/...)

5. Profil yönetimi sayfası ve bileşenleri

6. Oturum durumunun uygulama genelinde kontrolü için SessionProvider ve hooks

7. Korumalı rotalar (middleware ile kimlik doğrulama)

8. TypeScript tip tanımları Harita ve İstasyon Görüntüleme CopyElektrikli araç şarj uygulaması için Next.js'de Mapbox veya Google Maps entegrasyonu ile şarj istasyonlarını gösteren bir modül geliştirmem gerekiyor. Lütfen aşağıdakileri içeren kapsamlı bir kod örneği sağlayın:

9. Harita servisinin Next.js'e entegrasyonu

10. Client-side harita bileşeni

11. İstasyon marker bileşenleri ve kümeleme

12. Kullanıcı konumunu alma ve gösterme

13. İstasyonları çeşitli kriterlere göre filtreleme için UI ve fonksiyonlar

14. Sunucu tarafından istasyon verilerini çekme (Server Actions veya API Routes)

15. Mobil ve masaüstü için responsive harita tasarımı

16. İstasyon detay sayfası (dinamik route ile) Ödeme Sistemi CopyNext.js'de elektrikli araç şarj uygulaması için Stripe kullanarak güvenli bir ödeme sistemi entegrasyonu geliştirmem gerekiyor. Aşağıdakileri içeren bir örnek sağlayabilir misiniz?

17. Stripe'ın Next.js uygulamasına entegrasyonu

18. Ödeme kartı yönetimi bileşenleri

19. Stripe Elements kullanımı

20. Ödeme intent oluşturma ve işleme için API routes

21. Webhook entegrasyonu (ödeme bildirimleri için)

22. Ödeme geçmişi ve fatura görüntüleme sayfaları

23. Ön yetkilendirme ve şarj sonrası ödeme mantığı

24. Stripe ile güvenli ödeme işlemi akışı QR Kodu ile Şarj Başlatma CopyElektrikli araç şarj uygulaması için Next.js'de QR kod tarama ve şarj oturumu başlatma özelliği geliştirmem gerekiyor. Aşağıdakileri içeren kodları sağlayabilir misiniz?

25. Web kamerası erişimi için Browser API kullanımı

26. QR kod tarama bileşeni

27. QR kod içeriğinin doğrulanması ve işlenmesi

28. Şarj oturumu başlatma API'si

29. Socket.io ile gerçek zamanlı şarj durumu izleme

30. Şarj izleme ve kontrol arayüzü bileşenleri

31. Mobil cihazlarda kamera erişimi ve PWA entegrasyonu

32. Şarj tamamlandığında ödeme akışına yönlendirme API ve Veritabanı Entegrasyonu CopyElektrikli araç şarj uygulaması için Next.js'de API rotaları ve Prisma ORM kullanarak veri katmanını geliştirmem gerekiyor. Lütfen şunları içeren kodu sağlayın:

33. Prisma şeması (User, Station, ChargingSession, Payment modelleri)

34. API rotaları için RESTful yapı

35. Veri işlemleri için servis fonksiyonları

36. API route handler'lar ve middlewares

37. Server Components için veri getirme fonksiyonları

38. React Query ile Client Components için veri yönetimi

39. Hata işleme ve veri doğrulama stratejileri

40. Rate limiting ve güvenlik önlemleri Gerçek Zamanlı İletişim CopyNext.js elektrikli araç şarj uygulaması için Socket.io kullanarak gerçek zamanlı iletişim sistemi geliştirmem gerekiyor. Bana şunları sağlayabilir misiniz?

41. Socket.io server kurulumu (Next.js API route veya özel server.js)

42. Client tarafı Socket.io entegrasyonu

43. Şarj durumu için gerçek zamanlı güncelleme sistemi

44. İstasyon müsaitlik durumlarını gerçek zamanlı izleme

45. Bildirim sistemi entegrasyonu

46. React Context veya hook'lar ile socket state yönetimi

47. Bağlantı kesintilerini yönetme stratejileri

48. Performans optimizasyonları Test ve CI/CD Kurulumu CopyNext.js elektrikli araç şarj uygulaması için test altyapısı ve CI/CD kurulumu yapmam gerekiyor. Bana şunları sağlayabilir misiniz?

49. Jest ve React Testing Library kurulumu

50. Birim testleri için örnek test sınıfları

51. Bileşen testleri için test şablonları

52. E2E testleri için Cypress veya Playwright kurulumu

53. Mock servisler ve test yardımcıları

54. GitHub Actions workflow dosyaları

55. Vercel veya diğer platformlar için deployment yapılandırması

56. Test ve kalite kontrol raporlama sistemi Performans Optimizasyonu CopyNext.js elektrikli araç şarj uygulaması için performans optimizasyonu yapmam gerekiyor. Aşağıdaki konularda kod örnekleri ve stratejiler sağlayabilir misiniz?

57. Image optimizasyonu (next/image)

58. Server Components ve Client Components optimal kullanımı

59. React Suspense ve streaming

60. Veritabanı sorgu optimizasyonu (Prisma)

61. Statik ve dinamik sayfa oluşturma stratejileri

62. Bundle analizi ve optimizasyonu

63. Web Vitals ölçümü ve iyileştirme

64. Lazy loading ve code splitting stratejileri

65. Önbellek stratejileri (SWR, React Query) Mobil Uyumluluk ve PWA CopyNext.js elektrikli araç şarj uygulaması için PWA özellikleri ve mobil uyumluluk geliştirmem gerekiyor. Bana şunları sağlayabilir misiniz?

66. PWA konfigürasyonu (next-pwa veya native)

67. Manifest.json ve service worker dosyaları

68. Offline destek stratejileri

69. Responsive tasarım bileşenleri ve layout'lar

70. Mobil cihazlar için özel UI/UX stratejileri

71. App store yükleme promosyonu

72. Push notification entegrasyonu

73. Geolocation API kullanımı ve izin yönetimi