Spotify clone with full functionality using React + Tailwind
React + Tailwind = Spotify Clone
React + Tailwind serisinin bu bölümünde spotify’ın web versiyonunu birlikte kodluyoruz.
-
bölümde öğrenecekleriniz
- React ve tailwind kurulumu
- React Router kurulumu
- Temel componentlerin oluşturulması
- Mevcut sayfalar için view’ların oluşturulması
- SVG iconların oluşturulması
<Sidebar />
componentinin kodlanması
-
bölümde öğrenecekleriniz
<Navbar />
ve<Home />
componentlerinin kodlanmasıtailwind
içinline-clamp
eklentisi kullanımı- Accessibility için
headlessui
kullanımı react-router
hookları
-
bölümde öğrenecekleriniz
<Player />
componentinin kodlanması- Ses dosyalarını yönetmek için
react-use
paketinin kullanımı - Player range slider için
react-range
paketinin kullanımı - State’leri global olarak yönetmek için
redux
kullanımı
-
bölümde öğrenecekleriniz
- Search bölümünü kodluyoruz
- Drag scrollbar paketini kurup ufak bir carousel hazırlıyoruz
- Bolca tailwind kullanıyoruz ?
-
bölümde öğrenecekleriniz
- Full Screen Player yönetimi
- Full Screen’e özel hook’un kullanımı
- Bolca tailwind ?
-
bölüm hazırlanacak….
Demo
Şu ana kadar yapılmış son halinin demosu
https://react-tailwind-spotify-demo.netlify.app/