https://github.com/r4ultv/spotify-web-player
Listen to your Music Anytime, Anywhere.
https://github.com/r4ultv/spotify-web-player
authjs nextjs14 spotify-web-api web-player
Last synced: 10 months ago
JSON representation
Listen to your Music Anytime, Anywhere.
- Host: GitHub
- URL: https://github.com/r4ultv/spotify-web-player
- Owner: R4ULtv
- License: mit
- Created: 2024-10-04T14:17:31.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-17T15:26:27.000Z (over 1 year ago)
- Last Synced: 2025-04-01T07:59:15.911Z (about 1 year ago)
- Topics: authjs, nextjs14, spotify-web-api, web-player
- Language: JavaScript
- Homepage: https://web-player.raulcarini.dev
- Size: 3.86 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Experience your music like never before with stunning visuals that dance to your favorite tunes. This web-based Spotify player combines seamless integration with beautiful visualizations for an enhanced music experience.
## 🚀 Technologies Used
- [Next.js 14](https://nextjs.org/)
- [React](https://reactjs.org/)
- [Next-Auth v5](https://authjs.dev/)
- [Spotify Web Playback SDK](https://developer.spotify.com/documentation/web-playback-sdk/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Shadergradient](https://www.shadergradient.co)
## 📋 Prerequisites
- Node.js (version 18.x or later)
- npm or yarn
- Spotify Developer account and API credentials
## 🛠️ Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/spotify-web-player.git
```
2. Navigate to the project directory:
```bash
cd spotify-web-player
```
3. Install dependencies:
```bash
npm install
```
4. Set up environment variables:
Create a `.env.local` file in the root directory and add:
```
AUTH_SECRET= # Add by `npx auth`. Read more: https://cli.authjs.dev
AUTH_SPOTIFY_ID=your_client_id
AUTH_SPOTIFY_SECRET=your_client_secret
```
## 🎮 Running the Development Server
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to start using the player.
## 🔑 Authentication
1. Click "Sign in with Spotify"
2. Authorize the application
3. You'll be redirected back to the player
4. Start enjoying your music with stunning visualizations!
## 📝 License
This project is open source and available under the [MIT License](LICENSE).
Made with ❤️ by Raul Carini