Spotify Tracks Table Manager

A high-performance React table management application for exploring and analyzing 30,000+ Spotify tracks with advanced filtering, sorting, search capabilities..

Live Demo

View Live Demo

Screenshots

Main Table View

Light Mode

Dark Mode

Search

Advanced Filtering

Pagination

Responsive

Tablet

Mobile

Features Implemented

• Table Rendering - Efficiently displays 30,000+ tracks
• Sorting - All columns sortable with visual indicators (ascending/descending)
• Filtering - 5 filterable columns with multiple filter types:
  • Text filter (Track Name)
  • Dropdown filter (Genre, Artist)
  • Range filter (Popularity 0-100)
  • Number filter (Release Year)
  • All filters work together with AND logic
• Global Search - Searches across all columns with 300ms debouncing
• Pagination - Adjustable page size (25/50/100 rows per page)
• User Experience
  • Loading states with animated skeleton
  • Error handling with retry functionality
  • Empty states with helpful messages
  • Responsive design (desktop, tablet, mobile)
  • Theme - Light & Dark

Tech Stack

Core Technologies

• React 18+ - UI library with hooks
• TypeScript 5+ - Type safety and better DX
• Vite - Fast build tool and dev server

Table Management

• TanStack Table v8 - Headless table library (9KB)

Styling & UI

• Tailwind CSS - Utility-first CSS framework
• Lucide React - Beautiful icon library
• Shadcn UI - UI Components

Data Processing

• PapaParse - CSV parsing and handling

State Management

• React hooks (useState, useMemo, useCallback, useEffect)
• Custom hooks for reusable logic