BeatFlow is a sleek and modern music player web application that offers a seamless and immersive audio experience. Built with React, Tailwind CSS, and Vite, it provides a stylish and user-friendly interface, allowing users to browse, play, and manage their favorite tracks effortlessly.
- 🎼 Dynamic Song List: Browse and play trending, popular, and favorite songs with smooth filtering functionality.
- 🎧 Real-Time Playback: Enjoy seamless music playback with play, pause, next, and previous controls.
- ❤️ Favorites & Playlists: Create and manage your own playlists with the ability to mark songs as favorites.
- 🎵 Today’s Playlist: Discover a fresh selection of tracks daily by loading a new playlist from a separate JSON file.
- 🌌 Custom Scrollbars & Dark UI: Sleek, gradient scrollbars and a visually appealing dark-themed UI for an elegant experience.
- 🎚️ Audio Player Controls: Includes volume adjustment, seek bar, and mute/unmute options.
- 🔥 Top Artists Section: Displays popular artists with stylish cards.
- 🌐 Responsive Design: Optimized for both desktop and mobile devices.
- Frontend: React, Tailwind CSS, Vite
- State Management: Context API
- JSON Data: Dynamic song loading from local files
- Icons & Components: React Icons, SVG, and custom components
- Clone the repository:
git clone https://github.com/AnujIstwal/BeatFlow- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and visit:
http://localhost:5173
/src
├── components # Reusable React components
├── assets # Images, icons, and styles
├── context # Context API for global state management
├── data # JSON files for song data
├── pages # Main pages and layout
└── App.jsx # Main application component
- 🌟 API Integration: Fetch songs and artist data from a real-time API.
- 🎙️ Equalizer & Visualizer: Add an advanced music visualizer.
- 📱 Mobile App: Expand the project into a mobile music player app.
- 🌐 Deployment: Host on Vercel or Netlify for public access.
🔗 Live Demo
💻 GitHub Repository
🔥 Feel free to fork, star ⭐, and contribute to BeatFlow! 🎧