All Projects → tayfunerbilen → react-tailwind-spotify-clone

tayfunerbilen / react-tailwind-spotify-clone

Licence: other
Spotify clone with full functionality using React + Tailwind (Not finished)

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to react-tailwind-spotify-clone

Expo Spotify
Spotify UI Clone with React Native & Expo || web support => https://expo-spotify.vercel.app
Stars: ✭ 287 (+37.32%)
Mutual labels:  spotify, clone
hepsiburada
Hepsiburada.com Tailwind/VueJS/CSS Clone
Stars: ✭ 39 (-81.34%)
Mutual labels:  clone, tailwindcss
Clone Wars
100+ open-source clones of popular sites like Airbnb, Amazon, Instagram, Netflix, Tiktok, Spotify, Whatsapp, Youtube etc. See source code, demo links, tech stack, github stars.
Stars: ✭ 12,604 (+5930.62%)
Mutual labels:  spotify, clone
linearapp clone
A Linear App clone with React and Tailwind CSS
Stars: ✭ 125 (-40.19%)
Mutual labels:  clone, tailwindcss
spotify-clone
🎶🎶Simple Spotify Clone using ReactJs. Here we are using the Official Spotify API to make calls. Here we can able to login, logout and gear the music.
Stars: ✭ 21 (-89.95%)
Mutual labels:  spotify, tailwindcss
tailwind-vue-modal
A simple configurable modal component built with Vue.js and Tailwind CSS
Stars: ✭ 24 (-88.52%)
Mutual labels:  tailwindcss
coc-tailwind-intellisense
Coc.nvim extension for Tailwind CSS IntelliSense
Stars: ✭ 117 (-44.02%)
Mutual labels:  tailwindcss
rebuilding-acquia
A clone of Acquia's dashboard, built with Vue.js and Tailwind CSS.
Stars: ✭ 20 (-90.43%)
Mutual labels:  tailwindcss
hugo-starter-tailwind-basic
A basic and simple to set up Hugo with TailwindCSS starter project.
Stars: ✭ 80 (-61.72%)
Mutual labels:  tailwindcss
statify
An app where anyone can join with Spotify credentials and see a lot of cool statistics about his/her profile.
Stars: ✭ 23 (-89%)
Mutual labels:  spotify
163MusicToSpotify
Convert your favorite 163 music playlist to Spotify
Stars: ✭ 98 (-53.11%)
Mutual labels:  spotify
Spotify-Headless
Experimental wrapper for Spotify API to search songs and control the web player using the CLI. (Feat. Puppeteer)
Stars: ✭ 73 (-65.07%)
Mutual labels:  spotify
Netflix
Netflix in React
Stars: ✭ 16 (-92.34%)
Mutual labels:  clone
flowrift
Beautifully designed Tailwind CSS UI blocks - view / copy / customize
Stars: ✭ 229 (+9.57%)
Mutual labels:  tailwindcss
merakiui
Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode 🚀 ☄️.
Stars: ✭ 1,185 (+466.99%)
Mutual labels:  tailwindcss
theodorusclarence.com
💠 Personal website and blog made using Next.js, TypeScript, Tailwind CSS, MDX Bundler, FaunaDB, and Preact.
Stars: ✭ 205 (-1.91%)
Mutual labels:  tailwindcss
eleventy-chirpy-blog-template
Blog template for 11ty based on Chirpy UX
Stars: ✭ 37 (-82.3%)
Mutual labels:  tailwindcss
nowplaying-widget
A Spotify Now Playing widget that's accessible with anything that can render a webpage
Stars: ✭ 15 (-92.82%)
Mutual labels:  spotify
spotify-lambda
λ🎵AWS Lambda functions for Spotify tracking
Stars: ✭ 12 (-94.26%)
Mutual labels:  spotify
horahora
Self-hosted video-hosting website and yt-dlp video archival manager for Niconico, Bilibili, and Youtube
Stars: ✭ 536 (+156.46%)
Mutual labels:  tailwindcss

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/

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].