Discover your top song and artist https://topbeat.danials.space
Find a file
2025-08-07 19:16:07 +03:30
.github/workflows comment nodejs test workflow 2023-08-06 09:49:07 +03:30
public Enhance index.html by improving meta tags for dark mode compatibility and updating Open Graph and Twitter tags for better SEO. Format links for improved readability. 2025-08-07 19:12:36 +03:30
screenshots implement generate playlist from liked songs 2023-12-25 14:27:50 +03:30
src Update color styles in ArtistPage and SongPage components for improved visibility; change primary text color to white and secondary text color to a lighter gray. 2025-08-07 19:16:07 +03:30
.gitignore implement version 1.0.1 2023-08-03 19:21:27 +03:30
CHANGELOG.md version 2.0.1 2023-12-25 15:17:52 +03:30
LICENSE implement version 1.0.1 2023-08-03 19:21:27 +03:30
package-lock.json Update version to 2.1.2, refactor ArtistPage and SongPage components to support dynamic artist and song counts, and implement loading states. Add truncate utility for string length management. 2025-07-31 20:45:51 +03:30
package.json Update version to 2.1.2, add Terms of Service and Privacy Policy pages, and enhance styling for better user experience. 2025-03-12 23:08:36 +03:30
README.md implement generate playlist from liked songs 2023-12-25 14:27:50 +03:30
TODO.md add TODO.md file 2023-08-12 00:50:58 +03:30

🎧 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.