Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hwanheejung/spotify-lq-client
[CLIENT] A Spotify-inspired app featuring Lyrics Quizzes, real-time lyrics sync, and personalized music playback, built with Next.js.
https://github.com/hwanheejung/spotify-lq-client
apollo apollo-client graphql graphql-client nextjs spotify spotify-playback-sdk tailwindcss typescript zustand
Last synced: about 1 month ago
JSON representation
[CLIENT] A Spotify-inspired app featuring Lyrics Quizzes, real-time lyrics sync, and personalized music playback, built with Next.js.
- Host: GitHub
- URL: https://github.com/hwanheejung/spotify-lq-client
- Owner: hwanheejung
- Created: 2024-10-26T10:44:23.000Z (3 months ago)
- Default Branch: develop
- Last Pushed: 2024-12-01T16:50:42.000Z (about 1 month ago)
- Last Synced: 2024-12-01T17:24:50.843Z (about 1 month ago)
- Topics: apollo, apollo-client, graphql, graphql-client, nextjs, spotify, spotify-playback-sdk, tailwindcss, typescript, zustand
- Language: TypeScript
- Homepage:
- Size: 824 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ๐ง Spotify
> [!IMPORTANT]
> Both **Spotify Playback** and **Spotify Web API** require users to authenticate with a valid Spotify **Premium** subscription.
## ๐ธ Screenshots
Real-time lyrics sync
## ๐น Features
โช **Real-Time Music Playback**: Play songs using the Spotify Playback SDK.
โช **Playback Controls**: Full playback functionality including play, pause, next, previous, shuffle, and repeat.
โช **Personalized Access**: View and play your saved playlists, albums, and liked songs.
โช **Playback Devices**: Switch between different playback devices (desktop, mobile, smart speakers).
โช **Lyrics Sync**: Follow along with synced lyrics for a karaoke-like experience.
โช **Custom Playlists**: Create and manage your own playlists within the app.
## ๐ธ Technologies Used
โช **Next.js**: Frontend framework for building user interface.
โช **Apollo Client**: GraphQL client for fetching data from Apollo Server.
โช **Zustand**: Client state management.
โช **Node.js(Express)**: Backend server handling Spotify Web API requests and managing authentication.
โช **Apollo Server**: GraphQL server for securely delivering Spotify data to the frontend.
โช [**Spotify Web API**](https://developer.spotify.com/documentation/web-api): Used exclusively by the backend server for fetching Spotify data like playlists, albums, and playback status.
โช [**Spotify Playback SDK**](https://developer.spotify.com/documentation/web-playback-sdk): Enables real-time music playback on the frontend.
## ๐ฅ Architecture Overview
This project follows a client-server architecture that integrates the Spotify Web Playback SDK for real-time music playback and the Spotify Web API for data fetching.
### 1. Backend (Express + Apollo Server) ๐ [repo](https://github.com/hwanheejung/Spotify-LT-Server)
- Handles authentication with `Spotify API` (OAuth flow). ๐ [blog post](https://hwanheejung.tistory.com/65)
- Fetches Spotify data (e.g., playlists, albums, playback state) via the `Spotify Web API`.
- Acts as a `GraphQL server` (using Apollo Server) to securely expose Spotify data to the frontend.
- Manages sensitive credentials (e.g., Spotify client ID and secret) and ensures they are never exposed to the client.
### 2. Frontend (Next.js + Apollo Client)
- Connects to the backend's `Apollo Server` to retrieve and display Spotify data using GraphQL.
- Manages playback controls (play, pause, skip) and state updates via the `Spotify Web Playback SDK`.
- Directly interacts with `Spotify's playback server` for real-time track streaming and control.
- Does not directly communicate with the `Spotify Web API`, ensuring API credentials are securely managed by the backend.
### 3. Communication Flow
```mermaid
graph LR
A[Frontend] -->|GraphQL Queries| B[Apollo Client]
B -->|Fetch Data| C[Apollo Server]
C -->|API Requests| D[Spotify Web API]
D -->|API Responses| C
C -->|GraphQL Responses| B
B -->|Update UI| A
A -->|Playback Controls| E[Spotify Web Playback SDK]
E -->|Manage Playback| A
```
## ๐ ๏ธ Troubleshooting
- **Playback Not Starting**: Ensure you have a Spotify **Premium** account and the app is connected to an active device.
- **Authentication Errors**: Verify your environment variables and Spotify Developer Dashboard settings.
- **API Rate Limits**: Avoid exceeding Spotify Web APIโs rate limits. Use caching to optimize requests.