JioSaavn Music Streaming App

A modern, feature-rich music streaming application built with React and JavaScript, powered by the JioSaavn API.

Features

Core Functionality

• Song Search: Search for songs, artists, albums, and playlists
• Music Player: Full-featured player with seek bar, volume control, and playback controls
• Mini Player: Persistent mini player that stays synced with the full player
• Queue Management: Add, reorder, and remove songs from the queue
• Local Persistence: Queue and player state persist across sessions

Advanced Features

• Shuffle Mode: Randomize song playback
• Repeat Modes: Repeat all songs or repeat single song
• Background Playback: Music continues playing when navigating between pages
• Responsive Design: Works seamlessly on desktop and mobile devices

Tech Stack

• React 18 - UI framework
• React Router DOM - Client-side routing
• Zustand - State management with persistence
• Axios - HTTP client for API requests
• Vite - Build tool and dev server

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd JioSaavn

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:3000

Build for Production

npm run build

The production build will be in the dist folder.

Project Structure

src/
├── components/          # Reusable components
│   ├── AudioPlayer.jsx  # Audio element wrapper
│   └── MiniPlayer.jsx   # Mini player component
├── pages/               # Page components
│   ├── Home.jsx         # Home/search page
│   ├── Player.jsx       # Full player page
│   └── Queue.jsx        # Queue management page
├── services/            # API services
│   └── api.js           # JioSaavn API client
├── store/               # State management
│   ├── usePlayerStore.js    # Player state (Zustand)
│   └── useSearchStore.js    # Search state (Zustand)
├── App.jsx              # Main app component
└── main.jsx             # Entry point

API Documentation

The app uses the JioSaavn API:

• Base URL: https://saavn.sumit.co/
• Documentation: https://saavn.sumit.co/docs

Key Endpoints Used

• GET /api/search/songs - Search for songs
• GET /api/songs/{id} - Get song details
• GET /api/artists/{id} - Get artist details

Features in Detail

State Management

The app uses Zustand for state management with localStorage persistence:

• Player Store: Manages current song, playback state, queue, and player controls
• Search Store: Handles search queries, results, and pagination

Player Synchronization

The mini player and full player are perfectly synchronized through shared state:

• Both use the same Zustand store
• Playback state updates in real-time
• Navigation doesn't interrupt playback

Queue Management

• Add songs individually or play all search results
• Reorder songs by moving them up/down
• Remove songs from the queue
• Queue persists across browser sessions

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

This project is for educational purposes.

Acknowledgments

• JioSaavn API for providing the music data
• Design inspiration from the Lokal Music Player UI Kit