Rick and Morty evreninde gezinmek için yazdığım tek sayfalık bir uygulama: karakterler, bölümler ve konumlar The Rick and Morty API üzerinden canlı veriyle geliyor. Ana sayfada 826 karakterin hepsini isim, durum, cinsiyet ve türe göre filtreleyip sayfa sayfa gezebilirsin. Bir karakterin sayfasını açtığında kökenine ve son konumuna giden bağlantıları, ilk ve son göründüğü bölümü, sezonlara ayrılmış bölüm listesini görüyorsun; önceki ya da sonraki karaktere de buradan geçebiliyorsun. Bölümler sezon sekmelerine ayrılmış. Bir bölümü adıyla ya da S03E07 gibi bir kodla arayabilirsin, her bölümde o bölümün karakterleri listeleniyor. Konumlar da orada yaşayanlarla birlikte açılıyor. Beğendiğin karakteri tek dokunuşla favorilere ekleyebilirsin.

Uygulamanın kendi arka ucu yok; bütün veri bu üçüncü taraf API'den geliyor. React 19, TypeScript, Vite 8, React Router, TanStack Query, Tailwind CSS 4, Radix UI ve Motion ile yazdım. Rick and Morty, Adult Swim'in markası; bu proje bir hayran çalışması.

Durum URL'de yaşıyor

Filtreleme ve sayfalama API tarafında yapılıyor ama filtrelerin ve sayfa numarasının asıl yeri URL. Bir hook bunları React Router'ın useSearchParams değerinden okuyup oraya geri yazıyor; arama kutusu da yazdığını kısa bir gecikmeyle URL'ye işliyor. Böylece filtrelediğin her görünümün paylaşılabilir bir adresi oluyor, tarayıcının geri tuşu da beklediğin gibi çalışıyor. Eski /char/:id bağlantıları da /character/:id adresine yönleniyor.

Aynı isteğin tekrar gönderilmesini TanStack Query engelliyor. Liste sorgularında keepPreviousData kullanıyorum; sayfa değiştirdiğinde yeni sayfa gelene kadar önceki sonuçlar ekranda kalıyor, liste boşalıp yeniden dolmuyor.

Küçük ama görünür ayrıntılar

Favoriler localStorage'da tutuluyor. storage olayını da dinlediğim için başka bir sekmede yaptığın değişiklik bu sekmeye hemen yansıyor. Depolamaya her erişim küçük bir sarmalayıcıdan geçiyor, böylece gizli mod gibi durumlarda uygulama hata fırlatmıyor. Açık, koyu ya da sistem teması sayfa açılırken titremeden uygulanıyor. Veri yüklenirken iskelet ekranlar, sonuç çıkmazsa boş durum ekranları, bir hata olursa da tekrar dene düğmesi görüyorsun.

Erişilebilirlik tarafında klavyeyle gezinme, "içeriğe geç" bağlantısı, ARIA etiketleri ve prefers-reduced-motion desteği var. Her sayfa kendi başlığını, açıklamasını, Open Graph ve Twitter kartlarını ve JSON-LD verisini kendisi üretiyor. Üretim imajında uygulamayı nginx sunuyor. SPA yönlendirmesi, /assets için uzun süreli önbellek, güvenlik başlıkları ve Open Graph adreslerini isteğin geldiği alan adına göre yeniden yazma işi bu yapılandırmada duruyor.