Projede, öncelikle dosya yapısını ve oluşturacağım componentleri hazırladım. Ardından sayfa/component tasarımlarını kodladım. Tasarımı kodlarken bazı element özelliklerini öğrenmek için https://www.themoviedb.org/ da inspect yöntemini kullandım. Ardından axios kullanarak verileri çektim. Daha sonra github da bulup incelediğim paketleri projede kullandım. axios ve lazy load kullanırken sık sık network'ü dinledim. Proje üzerinde çalışırken react hook yapılarını da kullandım. Projede değişiklik yaptıkça github'a pushladım.
Unit test ve Docker hakkında yeterli teknik bilgim olmadığı için bunları projede kullanamadım.
- Kullanıcı slider veya tab üzerinde geçiş yaptığında lazy load şeklinde görüntülenme sağlanmaktadır.
- Her bir filmin score göstergesinde score'a göre renklendirme yaptım. score >= 70 ise yeşil, score < 70 ve score >= 40 ise sarı, score < 40 ise kırmızı renklendirme gerçkeleştiriyorum.
- Poster üzerinde thumbs up ve thumbs down iconları bulunmaktadır. Eğer kullanıcı iconlardan birine tıklarsa ekranda sadece tıkladığı icon gösterilir. Aynı icona tekrar tıklarsa 2 icon da tekrar görünebilir olmaktadır.
- Projede toplam 9 component bulunmaktadır
- Projede mobil uyumlu olacak şekilde çalışılmıştır.
- React
- Axios
- react-circular-progressbar
Filmlerin score göstergesini oluşturmak için bu paketi kullandım ve tasarıma göre özelleştirdim. - react-lazy-load-image-component
Slider kaydırıldığında veya tab değiştirildiğinde lazy load uygulamak için bu paketi kullandım. Birkaç paket denedim fakat en düzgün çalışan bu oldu. - react-responsive
Filter barı desktop görünümünde filter bar, mobil görünümde ise dropdown component olacak şekilde kodladım. Fakat hangi görünümde olduğumu anlayabilmek için bu paketin içinde bulunan MediaQuery componentini kullandım.
1) Projede bulunan paketleri yüklemek İçin : npm install
2) Projeyi Çalıştırmak İçin : npm start