A modern web app that shows the most popular tracks of any artist on Spotify.
- 🔍 Search for any artist on Spotify
- 📊 View all tracks ranked by popularity score
- 🎨 Beautiful dark theme with Spotify-inspired design
- 📱 Fully responsive design
- ⚡ Fast and efficient with TanStack Query caching
- 📋 Sortable, paginated table with TanStack Table
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Data Fetching: TanStack Query
- Tables: TanStack Table
- API: Spotify Web API
- Node.js 18+
- A Spotify Developer account
- Clone the repository:
git clone https://github.com/yourusername/spotify-popularity.git
cd spotify-popularity- Install dependencies:
npm install- Create a
.env.localfile with your Spotify credentials:
SPOTIFY_CLIENT_ID=your_client_id_here
SPOTIFY_CLIENT_SECRET=your_client_secret_hereGet your credentials at Spotify Developer Dashboard
- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
src/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ │ └── artist/ # Artist endpoint
│ ├── artist/[name]/ # Artist page
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/
│ ├── ui/ # shadcn/ui components
│ ├── tracks-table/ # TanStack Table implementation
│ ├── artist-header.tsx # Artist info display
│ ├── logo.tsx # App logo
│ ├── providers.tsx # React Query provider
│ └── search-artist.tsx # Search input component
├── hooks/
│ └── use-artist-tracks.ts # React Query hook
└── lib/
├── spotify/ # Spotify API layer
│ ├── api.ts # API functions
│ ├── auth.ts # Token management
│ └── types.ts # TypeScript types
└── utils.ts # Utility functions
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Run ESLint |
MIT