Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tenal/my-spotify-profile
A web app modeled after Spotify's profile interface for viewing your Spotify data. Built using Next.js 15, TypeScript, Tailwind CSS, shadcn/ui, OAuth & the Spotify API.
https://github.com/tenal/my-spotify-profile
nextjs15 oauth shadcn-ui spotify-api tailwind-css typescript vercel
Last synced: 14 days ago
JSON representation
A web app modeled after Spotify's profile interface for viewing your Spotify data. Built using Next.js 15, TypeScript, Tailwind CSS, shadcn/ui, OAuth & the Spotify API.
- Host: GitHub
- URL: https://github.com/tenal/my-spotify-profile
- Owner: Tenal
- Created: 2025-01-16T14:44:56.000Z (29 days ago)
- Default Branch: main
- Last Pushed: 2025-01-30T17:45:19.000Z (15 days ago)
- Last Synced: 2025-01-30T18:34:54.272Z (15 days ago)
- Topics: nextjs15, oauth, shadcn-ui, spotify-api, tailwind-css, typescript, vercel
- Language: TypeScript
- Homepage: https://myspotifyprofile.vercel.app
- Size: 462 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# My Spotify Profile
A web application, modeled after Spotify's profile interface, for visualizing your spotify data. It uses Next.js v15+ (App Router), TypeScript, Tailwind CSS, and shadcn/ui. OAuth and data fetching are handled through the Spotify Web API.
Desktop View | Mobile View
:----------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------:
 | 
 | 
 | 
 | 
## Table of Contents
- [Overview](#overview)
- [Project Structure](#project-structure)
- [Architecture](#architecture)
- [Application Structure](#application-structure)
- [Auth/Fetching Flow](#authfetching-flow)
- [Styling Strategy](#styling-strategy)
- [Environment Variables](#environment-variables)
- [Installation & Setup](#installation--setup)
- [Scripts](#scripts)
- [Dependencies](#dependencies)
- [Future Plans](#future-plans)
- [License](#license)
## Overview
My Spotify Profile is a Next.js application that displays a user’s top artists, top tracks, recently played tracks, playlists, and other profile-related data using the Spotify Web API. It authenticates via OAuth, stores tokens in HTTP-only cookies, and renders user data via React Server/Client Components.
Features currently include:
- Login / Logout via Spotify OAuth
- Top artists with time-range filtering (e.g., All Time, 6 Months, 4 Weeks) & drill-down artist info (followers, popularity score, etc)
- Top tracks with time-range filtering (e.g., All Time, 6 Months, 4 Weeks) & drill-down track info (artists, popularity score, etc)
- Recently played tracks
- Public playlists followed & drill-down playlist info (individual tracks, owner, etc)
- Minimal theming with Tailwind + shadcn/ui components
## Project Structure
```
my-spotify-profile
├── app/
│ ├── api/
│ │ └── auth/
│ │ ├── login/route.ts # auth login route
│ │ ├── callback/route.ts # OAuth callback route
│ │ ├── refresh/route.ts # refresh token route (in development)
│ │ └── logout/route.ts # logout route
│ ├── (various pages) # home (root page.tsx), artists, tracks, recent & playlists
│ ├── layout.tsx # root layout
│ ├── globals.css # global Tailwind styles
│ ├── components/ # icons, shadcn/ui components, reusable UI components
│ └── lib/ # constants, spotify fetch & token functions, utility functions, TS interfaces
├── public/ # static files, fonts, & favicons
├── .env files # environment variables (.local & .production)
├── (various configs) # config files for tailwind, TS, next, eslint, etc
└── README.md
```
## Architecture
#### Application Structure
- Next.js (App Router) for server + client rendering
- TypeScript for type-safe development
- Spotify OAuth flow via custom /api/auth/login and /api/auth/callback routes
- Server Components for SSR data loading, Client Components for interactive parts (modals, user click handlers, etc)
- Cookies (HTTP-only) for storing tokens
- Tailwind CSS + shadcn/ui for styling and UI components
#### Auth/Fetching Flow
- user clicks login & is redirected to Spotify OAuth page
- on success, Spotify calls /api/auth/callback?code={x}
- access + refresh tokens are stored in HTTP-only cookies
- root layout & pages read cookies
- if none, show login
- if exists, call various endpoints
- on logout (via token expiry or logout click), cookies removed via /api/auth/logout
- root layout sees no token → skips data calls & shows login page
#### Styling Strategy
- shadcn/ui for prebuilt UI components (cards, tooltips, etc)
- tailwind CSS for body/component/utility classes and quick custom styles
## Environment Variables
To run this app, you'll need .env.local & .env.production files with the following values:
```
SPOTIFY_CLIENT_ID=
SPOTIFY_CLIENT_SECRET=
SPOTIFY_REDIRECT_URI=/api/auth/callback
NEXT_PUBLIC_SITE_URL=
```
Required:
- SPOTIFY_CLIENT_ID: Found in your Spotify Developer Dashboard
- SPOTIFY_CLIENT_SECRET: Secret key for your Spotify app
- SPOTIFY_REDIRECT_URI: Must match the callback route (e.g., http://localhost:3000/api/auth/callback)
- NEXT_PUBLIC_SITE_URL: Base URL for your Next.js site (local or production)
## Installation & Setup
1. Clone the repository:
```
git clone https://github.com/YourUser/spotify-profile.git
cd spotify-profile
```
2. Install dependencies:
```
npm install
```
3. Configure environment variables:
```
SPOTIFY_CLIENT_ID=xxxxx
SPOTIFY_CLIENT_SECRET=xxxxx
SPOTIFY_REDIRECT_URI=xxxxx/api/auth/callback
NEXT_PUBLIC_SITE_URL=xxxxx
```
4. Start the development server (local site usually runs at http://localhost:3000):
```
npm run dev
```
## Scripts
| Script | Description |
| ------ | ------------------------------------------------------ |
| dev | runs the dev server with hot reloading `(npm run dev)` |
| build | builds the production-ready Next.js app |
| start | starts the production server after building |
| lint | runs ESLint over the codebase |
## Dependencies
Core
- Next.js (App Router)
- TypeScript
- Tailwind CSS
- shadcn/ui
- Spotify Web API (via custom fetch logic)
Additional
- ESLint for code linting
- Prettier (optional formatting)
## Future Plans
- add testing coverage
- refine token management and add token refresh flow
- add expansions for user follow lists, user’s saved albums, etc
- add ability to play songs in-app
## License
This project is public