A sleek, responsive Spotify clone frontend built with React + Custom CSS + Bootstrap
A professional, responsive frontend for HTh Beats – a full-featured Spotify clone. Built using React, styled with custom CSS and selected Bootstrap components, this UI delivers a complete streaming experience across devices.
 |
 |
 |
 |
 |
 |
- 🔐 JWT-based user authentication
- 🎵 Stream songs, albums, artists, and playlists
- 👥 Enjoy with your friends in music room and listen track together in sync
- 💾 Playlist creation & management
- 🔍 Real-time search across the platform
- 🖼 Profile image uploads with Cloudinary
- 🎧 Functional and interactive music player
- 📱 Responsive layout
- ⬇️ Fast and high quality audio download
| Layer | Tech Used |
|---|---|
| Framework | React.js |
| Styling | Custom CSS, Bootstrap (partial) |
| Media | Cloudinary (for profile images) |
| Requests | Axios |
| WebSocket | Ably (for real-time interactions) |
| Routing | React Router DOM |
| State Mgmt | React Hooks, LocalStorage, App-level Context API |
| UI Behavior | URL-based UI state (modals, drawers, etc. via params) |
# Clone this repo
git clone https://github.com/mahesh548/HTh-Beats-Frontend
cd HTh-Beats-Frontend
# Install dependencies
npm install --force
# Start the dev server
npm run devCreate a .env file at the root of the project and add the following:
VITE_API=<url_to_hthbeats_api> VITE_BACKEND=<url_to_hthbeats_backend> META_SECRET=<your_meta_secret_here>
Note: These values are required for API communication and secure metadata fetching from the Vercel Edge Function.
- Mastered React fundamentals including state management, context API, and component-based architecture.
- Built complex custom components with efficient conditional rendering and reusable logic.
- Implemented secure authentication workflows and managed user sessions effectively.
- Developed responsive layouts combining custom CSS and Bootstrap for a polished UI across devices.
- Integrated and handled API requests smoothly using Axios, including error handling and async flows.
- Leveraged Ably for real-time communication, enabling live updates and synchronized user experiences.
- Gained hands-on experience deploying React apps on Vercel, including environment variable management and production optimizations.
Contributions, issues, and feature requests are welcome!
Feel free to fork this repository and submit a pull request.
If you find a bug or want to suggest an improvement, please open an issue.
This project is licensed under the MIT License.
You're free to use, modify, and distribute this project with proper attribution.
⚠️ Disclaimer:
This project, HTh Beats, is a personal portfolio project built solely for learning and showcasing frontend and full-stack development skills.
It is not affiliated with JioSaavn, Spotify, or any other music streaming service.
All audio content and media used within the app are sourced from publicly accessible JioSaavn URLs and are not hosted or stored by the developer.
This project is not intended for commercial use, distribution, or monetization.