React + Tailwind = Spotify Clone

React + Tailwind serisinin bu bölümünde spotify’ın web versiyonunu birlikte kodluyoruz.

  1. 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ı
  2. bölümde öğrenecekleriniz

    • <Navbar /> ve <Home /> componentlerinin kodlanması
    • tailwind için line-clamp eklentisi kullanımı
    • Accessibility için headlessui kullanımı
    • react-router hookları
  3. 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ı
  4. bölümde öğrenecekleriniz

    • Search bölümünü kodluyoruz
    • Drag scrollbar paketini kurup ufak bir carousel hazırlıyoruz
    • Bolca tailwind kullanıyoruz 🙂
  5. bölümde öğrenecekleriniz

    • Full Screen Player yönetimi
    • Full Screen’e özel hook’un kullanımı
    • Bolca tailwind 🙂
  6. bölüm hazırlanacak….

Demo

Şu ana kadar yapılmış son halinin demosu

https://react-tailwind-spotify-demo.netlify.app/

GitHub

View Github