https://github.com/birkankervan/rick-and-morty

https://github.com/birkankervan/rick-and-morty

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/birkankervan/rick-and-morty
• Owner: birkankervan
• Created: 2021-07-27T08:13:27.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-12-05T14:15:28.000Z (about 1 year ago)
• Last Synced: 2024-04-19T20:53:57.720Z (8 months ago)
• Language: JavaScript
• Size: 502 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Rick And Morty App

https://rick-and-morty-five-dusky.vercel.app/

Bu uygulama React js kullanılarak oluşturulmuştur.

Bu web uygulaması ile rick and morty bölümlerini inceleyebilirsiniz. Her bölüm içerisndeki karakterleri filtreleyebilir veya search box ı kullanarak arama yapabilirsiniz.

Karakterler arasında gezebilir, hangi karakterlerin hangi bölümlerde bulunduğunu inceleyebilirsinz.

## **Kullanılan Kütüphaneler:**

- React JS

- swr

- tailwind

- classnames

- axios

- react-router-dom

## **Kullanılan Kütüphanelerin Amaçları**

React memoizes hookları kullanıldı. Bu sayede component lerin gereksiz yere render edilmesi önlendi. Maliyetli fonksiyonlar memoizes edilerek verimliliği artırıldı. `React.lazy` ve `Suspense` ile codesplit yapıldı.

### SWR

Bir fetch hookudur. Fetch edilen datayı cahcler böylelikle tekrar render ın çnüne geçer. Aynı zamanda kendi içersine ek hooklar yazarak yeni özellikler getirebilirsiniz. Ben bunu `/episodes` sekmesindeki karakterleri bir fetch işlemi yapmadan filtrelemek için kullandım. `hooks/useCharacter.js` dosyasını inceleyebilirsiniz.

### axios

Fetch işlemlerinde `swr` ile beraber fetch yapmak için kullanıldı.

### Tailwind

Çok fonksiyonel bir css aracı. Sade ve kullanışlı arayüzler oluşturmanıza imkan tanımakta.

### classnames

Class isimlerini bir koşula bağlayarak düzenlememize olanak tanır. Üst kısımdaki `Navbar`'ın responsive olması ve Navbarda bulunan sekmelerden aktif olananın gösterilmesi için kullanıldı.

### react-router-dom

Tüm routing işlemleri bu kütüphane ile  yapıldı.