Spotify Web clone with React + TailwindCss

Overview

Spotify Clone

React + Tailwind kullanarak Spotify'ın web versiyonun arayüzünün klonudur.

home search collection fullscreen

Hooks

  • useMemo()

Memoization; aynı girdiler için aynı işlevler çağrıldığında işlevin tekrardan çağrılmadan saklanılmış olan sonucun döndülmesine denir. Bu tekniğin React hook'u olarak kullanılmasını sağlayan işlev: ueMemo(). Verilen girdilerin durumlarına göre önceden üretilen sonuçları döndürür.

  • useNavigate()

Router, SPA uygulamalarda sayfalar arası gezinmek için kullanılan yapıdır. Belirtilen linkler üzerinden ilgili sayfaya geçmeye yardımcı olur. bir React router hook'u olan useNavigate, geçmiş nesnesine erişir ve belirli Url ile ileri veya geri sayfalara gitmeye yardımcı olur.

  • useRef()

Dom ögelerine veya react elementlerine erişmemize yardımcı olur. Oluşturulan ref ile js'deki selectorlar gibi dom elelmanlarına erişmeyi sağlar. Ref verilen öge üzreinde gerçeklerşen olayları useRef ile kontrol edilir.

Dependencies

Events Managements

  • stopPropagation()

React da bir olay yöneticisinde olay yayılımını durdurmak için gerekli sekilde tetiklenmelidir. stopPropagation() tetiklenen olay zincirini keser. Birbirini etkileyen olaylar tanımlandığında bu etkinin ortadan kaldırılmasında yardımcı olur. Olaylar arasındaki zincir bağı kopar ve birbirlerinin tetiklemesi önlenir.

CSS

  • Tailwind

Özelleştirilebilir yapıya sahip bir CSS framework.

  • Headless UI

Tailwind CSS ile güzel bir şekilde entegre olacak şekilde tasarlanmış, tamamen stilsiz, tamamen erişilebilir UI bileşenleri.

You might also like...
🎵 The frontend of Oud,  an online music streaming service that is a high quality clone of Spotify with all its functionalities built using ReactJS, React-Router, Bootstrap.
🎵 The frontend of Oud, an online music streaming service that is a high quality clone of Spotify with all its functionalities built using ReactJS, React-Router, Bootstrap.

Oud Front-End Table of Contents About the Project Build with Getting Started Installation Running Screenshots Videos File Structure Unit Testing Runni

spotify clone built with react, next, tailwind

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind

A spotify clone built with React
A spotify clone built with React

Spotify Web Clone App A spotify clone built with React - DEMO 📖 Features of this app: ✅ Cross Platform functionality ✅ Smooth transition between song

A React app that uses Spotify's Web API to get your favorite tracks, artists, and recently played songs.

Explorify A React app that uses Spotify's Web API to get your favourite tracks, artists and recently played songs. You can also filter them by timelin

Learn to build Udemy Web Clone with ReactJS. ... This is a front to back `Udemy Web Clone` course for absolutely everybody.

Udemy Clone React Learn to build Udemy Web Clone with ReactJS. ... This is a front to back Udemy Web Clone course for absolutely everybody. What is th

A Discord clone made with TailwindCSS And React.js

Discord Tailwind Just a Discord clone made with TailwindCSS. Initial idea from e

A wordle clone made with React, TypeScript, TailwindCSS, Vite and Zustand
A wordle clone made with React, TypeScript, TailwindCSS, Vite and Zustand

A wordle clone made with React, TypeScript, TailwindCSS, Vite and Zustand

Responsive whatsapp clone using React (Typescript), tailwindcss and firebase
Responsive whatsapp clone using React (Typescript), tailwindcss and firebase

Responsive whatsapp clone using React (Typescript), tailwindcss and firebase

Netflix Clone - Cloning Netflix with NextJS + Tailwindcss

Netflix Clone - Cloning Netflix with NextJS + Tailwindcss

Comments
  • not able to run

    not able to run

    i try to install on my local machine
    after download i open in vs code and in terminal run "npm install " so its install all dependencies after that i tried "npm install", npm run builld , npm build etc nothing happening just getting erros

    image

    opened by amiraligull 0
Owner
Zeynep Demirel
Zeynep Demirel
Simple react js web that consume data from Spotify WEB API and use Spotify Playback SDK for playing a tracks

React JS Spotify Clone Simple react js web that consume data from Spotify WEB API and use Spotify Playback SDK for playing a tracks How to run First y

Dody 3 Sep 3, 2022
A Spotify Clone which built with ReactJS. 3rd party API integration, user authentication, spotify API, responsive design, material-ui, react context api are used to built it.

Spotify Clone with ReactJS In this Spotify Clone application you can log in to the application with your spotify account and see your own playlist. Sp

Mert Çankaya 11 Jul 11, 2022
Clone do spotify usando react.js e consumindo api do spotify

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

GUILHERME ROCHA 0 Dec 28, 2021
Spotify playlist Clone build with ReactJS + Spotify API + Material-UI

Spotify playlist Clone build with ReactJS + Spotify API + Material-UI

null 3 Jan 3, 2022
Spotify Web clone with React + TailwindCss

Spotify Clone React + Tailwind kullanarak Spotify'ın web versiyonun arayüzünün klonudur. Hooks useMemo() Memoization; aynı girdiler için aynı işlevler

Zeynep Demirel 6 Sep 7, 2022
Spotify Profile App - A web app for visualizing personalized Spotify data created using React and Node.js

Spotify Profile App A web app for visualizing personalized Spotify data Local Installation & Set Up Register a Spotify App in your Spotify Developer D

Manish Bhandari 1 May 24, 2022
A front-end clone project of the Spotify Web Player. The project was created using React.

Spotify Web Player Clone A front-end clone project of the Spotify Web Player. The project was created using React. This is my first big React.js proje

Oğuzhan ULUKAYA 175 Sep 13, 2022
Discord-clone - Discord Clone using React, ReactQuery, Tailwindcss, Redux, Socket IO, NodeJS, Express, MongoDB and Redis

Discord Clone using React, ReactQuery, Tailwindcss, Redux, Socket IO, NodeJS, Ex

Milad Ranjbar 195 Sep 20, 2022
Medium-clone - Medium-Clone with Next.JS, Typescript, Tailwindcss, and Sanity

Medium Clone ?? Overview /pages ✔️ pages/index.tsx = Homepage and list all Blogs

argikurnia 23 Sep 13, 2022
Simple Spotify UI Clone built with React + Electron + Typescript.

Spotify UI Clone Simple Spotify UI Clone built using React + Typescript + Electron. I also built this template on Figma if you are interested. Install

Mateus Pandino 41 Sep 19, 2022