JSONify

A web application that converts your Spotify data into JSON format. Export your music preferences, playlists, listening history, and more with ease.

Features

• 🎵 Liked Songs - Export all your liked songs to JSON
• 📋 Playlists - View and export all your playlists
• 🎧 Recently Played - Track your recently played tracks
• ⭐ Top Items - Get your top tracks and artists
• 👤 User Profile - Export your Spotify profile data
• 🎨 Follow Artists - View and export your followed artists
• 🌙 Dark Mode - Light and dark theme support
• 🔐 Secure Auth - OAuth 2.0 authentication with Spotify

Tech Stack

• Framework: Next.js
• Language: JavaScript/JSX
• Styling: Tailwind CSS (with PostCSS)
• Authentication: Spotify OAuth 2.0
• API Integration: Spotify Web API

Installation

1. Clone the repository:

git clone <repository-url>
cd jsonify

2. Install dependencies:

npm install

3. Set up environment variables: Create a .env.local file with your Spotify API credentials:

SPOTIFY_CLIENT_ID=your_client_id
SPOTIFY_CLIENT_SECRET=your_client_secret
SPOTIFY_REDIRECT_URI=http://localhost:3000/auth/callback

4. Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

Usage

1. Login - Click the login button to authenticate with your Spotify account
2. Navigate - Use the menu to browse different data categories
3. Export - Click export buttons to download data as JSON

API Endpoints

Authentication

• GET /auth/login - Initiate Spotify login
• GET /auth/callback - Handle OAuth callback
• GET /auth/refresh - Refresh access token

User Data

• GET /api/user/profile - Get user profile
• GET /api/user/top-items - Get top tracks and artists
• GET /api/user/recently-played - Get recently played tracks
• GET /api/user/followed-artists - Get followed artists
• GET /api/user/playlists/owned - Get user's own playlists

Music Data

• GET /api/liked-songs - Get liked songs
• GET /api/playlists - Get all playlists

Project Structure

src/
├── app/                    # Next.js pages and API routes
│   ├── api/               # API endpoints
│   ├── auth/              # Authentication pages
│   ├── user/              # User data pages
│   ├── liked-songs/       # Liked songs page
│   ├── playlists/         # Playlists page
│   └── playlist/[id]/     # Individual playlist page
├── ui/                    # React components
├── utils/
│   └── server/            # Server utilities and Spotify API helpers
└── theme/                 # Theme configuration

Features In Progress

• User authentication
• Liked songs export
• Playlists display
• User profile
• Top items tracking
• Recently played
• Followed artists