Proje ant design kullanılarak tasarlanmıştır.Sayfa yönlendirmeleri için react-router-dom kullanılmıştır.State management için redux ve rudux toolkit araçları kullanılmıştır.Swapi Api işlemleri axios ile yapılmıştır.
Burada sayfa ilk açıldığında home sayfası görüntülenmektedir ve hoşgeldiniz yazısı ve lottie starwars animasyonu yer almaktadır. Sayfayı aşağı indirilmesine karşın menü üst kısma sabitlenmiştir.Menüde Starships List'e tıklandığında starships liste sayfasına gitmektedir.Sayfa tasarımında layout içinde header ve content olarak tasarlanmıştır.Sayfa değiştiğinde sadece content kısmı değilmektedir.
Bu sayfada starships listesi model, name ve rate değerleri swapi api'sini kullanılarak listelenmiştir.Sayfa ilk açıldığında swapi api'sinden gelen birinci sayfa starships listelemektedir.
Load More butonuna tıklandığında ikici,üçüncü ve dördüncü sayfa starships listelemektedir.
Listelenen starships detail'a tıklandığında tıklanan starship'in detay sayfasına yönlendiriliyor.
Aramak istenilen starships search bar'a yazıldığında name ve model değerlerine göre starships listeleniyor. Aşağıda search bar'a "corvette" değeri girilmiş ve bu değere sahip starships listelenmiştir.
Search bar'a "star" değeri girilmiş ve bu değere sahip starships listelenmiştir.
Starships list sayfasında listelenen starship verilerinden detail'a tıklandığında ilgili starship verisinin name,model ve diğer değerleri bu sayfada kart şeklinde görüntülenerek tasarlanmıştır.Go to back butonu ile starships list sayfasına geri dönmektedir.
Path name değeri yanlış girildiğinde not found sayfası gelmektedir.Sayfa lottie animasyonu ile tasarlanmıştır.
