Skip to content

danial2026/TopBeat

 
 

Repository files navigation

🎧 TopBeat

Deployment Status :

Cloudflare Pages License Website

Documents :

Ghost Medium

Technologies and Services :

React Spotify Cloudflare

Screenshots:

Discover your 🔝 song and 🎤 artist with our music app! Connect your 🎧 Spotify account, and we'll show your most-played track. 💡 Stylish. Simple. Start listening! 🎶

✨ New Feature

Generate Playlist from Liked Songs:

TopBeat now offers the ability to create a Spotify playlist containing your liked songs, so you can share your favorite songs seamlessly.

🚀 Quick Start

Clone the repository:

git clone https://github.com/danialdot/topbeat.git
cd topbeat

Install dependencies:

npm install

Add your Spotify Client ID:

Open src/components/LoginPage.js. Replace 'YOUR_SPOTIFY_CLIENT_ID' with your actual Spotify App Client ID.

Run the app:

npm start

Open your web browser and navigate to http://localhost:3000 to access TopBeat.

🛠️ Tech Stack

  • React.js: Frontend UI library
  • Spotify Web API: Fetching user's top tracks and artist information
  • Material-UI: Icons for the iOS-style back button
  • Local Storage: Caching the Spotify access token for future visits

📝 License

This project is licensed under the MIT License. See the LICENSE file for details.

About

Discover your top Spotify song and artist

Resources

License

Stars

Watchers

Forks

Contributors

Languages

  • JavaScript 76.8%
  • CSS 18.7%
  • HTML 4.5%