https://github.com/dipesh-kuwarbi/spotify-player
Welcome to the Music Player application repository! This project is a fully-featured music player built using React and Chakra UI, designed to provide a seamless and engaging user experience.
https://github.com/dipesh-kuwarbi/spotify-player
chakra context-api music-player react responsive-web-design
Last synced: 3 months ago
JSON representation
Welcome to the Music Player application repository! This project is a fully-featured music player built using React and Chakra UI, designed to provide a seamless and engaging user experience.
- Host: GitHub
- URL: https://github.com/dipesh-kuwarbi/spotify-player
- Owner: dipesh-kuwarbi
- Created: 2024-08-29T06:21:19.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-01T13:26:16.000Z (9 months ago)
- Last Synced: 2024-12-30T11:29:06.449Z (5 months ago)
- Topics: chakra, context-api, music-player, react, responsive-web-design
- Language: JavaScript
- Homepage: https://dipesh-music-player.vercel.app
- Size: 474 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Music Player Application
## Overview
This Music Player application allows users to browse, play, and control songs. It features a player with controls for play/pause, volume, and track navigation. The app also includes a search bar to filter songs and dynamically updates the UI based on the currently playing song.
## Features
- Search for songs by artist
- Play, pause, and navigate tracks
- Display song information and cover
- Volume control
- Responsive design
- Smooth background transitions
## Technologies
- React
- Chakra UI
- Framer Motion
- JavaScript (ES6+)
- Axios (for data fetching)
- Context API
- fast-average-color (for background gradient)
## Setup
### Prerequisites
Ensure you have the following installed:
- **Node.js** (version 14.x or later)
- **npm** (comes with Node.js)
### Installation
1. **Clone the repository:**
```bash
git clone
```
2. **Install the dependencies:**
```bash
npm install
```
3. **Start the development server:**
```bash
npm start
```
The app will be running on `http://localhost:3000`.
### Building for Production
To create an optimized production build:
```bash
npm run build
```