Samespace Music Player

Welcome to the Samespace Music Player, a dynamic and responsive music player application built with Vite, React, and Tailwind CSS. This app offers a seamless music listening experience with features like responsive design, background gradient changes, and fluid animations.

🍕 Features:

✅ Responsive Design: The player component adapts to smaller screens with a menu button to show a list of songs.
✅ REST API Integration: Load song list data using REST API.
✅ Dynamic Cover Images: Fetch images based on the "cover" key from the API. For example: https://cms.samespace.com/assets/{COVER_IMAGE_ID}.
✅ Persistent Playback: Music continues to play even if the user visits another tab.
✅ Background Gradient Change: The background gradient color changes according to the cover image of the song.
✅ Interactive Interface: Fluid animations and transitions, including list loading animation and background color change animation.
✅ Search Functionality: Search for songs within the application.
✅ Music Controls: Play, pause, next, and previous controls for seamless music playback.
✅ Tab Navigation: Easily switch between different tabs like "For You" and "Top Tracks".
✅ Music Seeker Control: Control music playback via the seeker.

⚙ Technology Used:

✅ React: A JavaScript library for building user interfaces.
✅ Redux: A predictable state container for JavaScript apps.
✅ Tailwind CSS: A utility-first CSS framework for rapid UI development.
✅ Git & GitHub: Version control and collaboration platform for software development.

🚀 Getting Started

Installation and Setup

Follow these steps to get the project up and running on your local machine:

1. Clone the repository:

   git clone https://github.com/saurabhmaurya45/samespace-music-player.git
   cd samespace-music-player
   

2. Install dependencies:

   Make sure you have Node.js installed. Then run:

   npm install
   

3. Run the development server:

   Start the Vite development server:

   npm run dev
   

   Open http://localhost:3000 with your browser to see the result.

4. Build for production:

   To create an optimized production build, run:

   npm run build
   

   This will generate a dist folder containing the production build.

5. Serve the production build:

   After building the project, you can serve the production build locally:

   npm run serve
   

   Your application should be running on http://localhost:5000.

🌟 Give It a Spin!

Experience the Samespace Music Player now: Live Demo

📝 License

This project is licensed under the MIT License.