Uzay Gemisi Arama Uygulaması

Sitenin Çalıştırılması

İlk olarak, geliştirici sunucuyu çalıştırın:

npm run dev
# or
yarn dev
# or
pnpm dev

Sonucu görmek için tarayıcınızda http://localhost:3000 linkini açın.

Kullanılan API'lar

• SWAPI kullanılarak geliştirildi.

Kullanılan Kütüphaneler

• Axios
• Chakra UI
• React-Icons

Özellikler

• Context API kullanılarak geliştirildi.
• Projede Next.js ve React kullanıldı.
• Responsive design dikkate alınarak tasarlandı.
• Başlangıçta bütün uzay gemileri ana sayfada bulunur.
• "Load More" butonu ile daha fazla uzay gemisi yüklenir.
• Arama çubuğunda Star Wars evreninden her türlü uzay gemisi isim veya modeline göre filtrelenebilir.
• Daha detaylı bir veriye ulaşmak istenildiğine uzay gemisi kartlarına tıklanarak geminin detay sayfasına gidilir.
• Detay sayfasından " <- " butonu ile bir önceki sayfaya geçilir.
• Sol üstteki kask logosu ana sayfa butonu olarak tasarlanmıştır.

Ana Sayfa Butonu (Kask Logosu) Canlı Gösterim

Detay sayfasından "Ana Sayfa" butonu ile ana sayfaya geçiş yapılır :

Filtreleme İşlemi ve Geri Butonu Canlı Gösterim

Ana sayfadan filtreleme işlemi yapılarak detay sayfasına gidilir. Detay sayfasından bir önceki sayfaya "Geri" butonu ile geçiş yapılır :