https://github.com/tvillarete/ipod-classic-js
An iPod Classic simulator that connects to Apple Music and Spotify. Built with React & Styled Components
https://github.com/tvillarete/ipod-classic-js
apple-music
Last synced: about 1 month ago
JSON representation
An iPod Classic simulator that connects to Apple Music and Spotify. Built with React & Styled Components
- Host: GitHub
- URL: https://github.com/tvillarete/ipod-classic-js
- Owner: tvillarete
- License: mit
- Created: 2019-12-23T09:45:09.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-08-23T07:04:08.000Z (2 months ago)
- Last Synced: 2025-08-24T09:38:12.659Z (2 months ago)
- Topics: apple-music
- Language: TypeScript
- Homepage: http://tannerv.com/ipod
- Size: 18.1 MB
- Stars: 1,524
- Watchers: 14
- Forks: 114
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - ipod-classic-js
README
# 🎵 iPod.js
**A nostalgic music player that bridges the gap between classic iPod design and modern streaming**
[](https://vercel.com)
[](https://nextjs.org)
[](https://reactjs.org)
[](https://www.typescriptlang.org)
**Created by [Tanner Villarete](https://tannerv.com)** • [LinkedIn](http://linkedin.com/in/tvillarete) • [Website](http://tannerv.com)
---
## 🌟 About
Before the days of streaming services, we relied on physical devices to store our limited libraries of
music. Now with the streaming age, we no longer rely on physical storage and have endless hours of songs
at our disposal. This project is an homage to the good 'ol days. A mix of the old and new. Experience the
iPod Classic you used to own that now connects to Spotify and Apple Music — the two most popular music
streaming platforms in the world.
**iPod.js** recreates the iconic iPod Classic experience in your browser, complete with the signature click wheel navigation and that satisfying tactile feel (Android only) — but now powered by **Spotify** and **Apple Music**, giving you access to millions of songs.
Built with extensibility in mind, this isn't just a music player. It can run games (like the classic Brick game!), and there's room for many more apps and easter eggs in the future.
*Experience the nostalgia with modern streaming power*
---
## ✨ Features
### 🎵 **Music Streaming**
- **Spotify Web Playback SDK** integration
- **Apple Music** via MusicKit JS
- Full playback controls (play, pause, skip, seek)
- Browse artists, albums, playlists
- Search functionality
### 🎮 **Interactive Experience**
- Authentic iPod click wheel navigation
- Multiple device themes (Silver, Black, U2 Edition)
- Built-in games (Brick)
- Smooth animations with Framer Motion
- Responsive design
### 🛠 **Modern Tech Stack**
- **Next.js 14** with App Router
- **React 18** with TypeScript
- **Styled Components 6** for styling
- **Framer Motion 10** for animations
- Deployed on **Vercel**
### 🎨 **Design**
- Pixel-perfect iPod Classic recreation
- All SVGs hand-crafted in Figma
- Authentic UI/UX down to the smallest details
- Dark/Light mode support
- Customizable themes
---
## 🚀 Quick Start
### Prerequisites
- **Node.js** (version specified in `.nvmrc`)
- **Yarn** package manager
- **Vercel CLI** (optional, for deployment)
### Installation
```bash
# Use the recommended Node version
nvm use
# Install dependencies
yarn install
# Start development server
yarn dev
```
Visit **[http://localhost:3000/ipod](http://localhost:3000/ipod)** to experience the magic! ✨
---
## ⚙️ Configuration
### Environment Variables
Create a `.env.local` file in your project root:
```bash
# Spotify Configuration
SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
# Apple Music Configuration
APPLE_DEVELOPER_TOKEN=your_apple_developer_token
```
### 🎵 Spotify Setup
1. Create a Spotify app in the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard)
2. Add `http://localhost:3000` to your app's redirect URIs
3. Copy your **Client ID** and **Client Secret**
📚 [Spotify Web Playback SDK Documentation](https://developer.spotify.com/documentation/web-playback-sdk/quick-start/)
### 🍎 Apple Music Setup
1. Join the [Apple Developer Program](https://developer.apple.com/programs/)
2. Create a **MusicKit** identifier in the Apple Developer Portal
3. Generate a **private key** for MusicKit
4. Create a **developer token** (JWT)
> 💡 **Need help generating Apple Music JWTs?** Check out the [**Apple Music JWT Generator**](https://github.com/tvillarete/apple-music-jwt-generator) — a helpful tool I created to simplify the JWT creation process
📚 [Apple MusicKit JS Documentation](https://developer.apple.com/documentation/musickitjs)
📚 [Getting Keys and Creating Tokens Guide](https://developer.apple.com/documentation/applemusicapi/getting_keys_and_creating_tokens)
---
## 🎯 Usage
### Navigation
- **Click Wheel**: Scroll through menus
- **Center Button**: Select items
- **Menu Button**: Go back
- **Play/Pause**: Control playback
- **Forward/Back**: Skip tracks
### Music Services
1. Go to **Settings** → **Choose Service**
2. Select **Spotify** or **Apple Music**
3. Sign in with your account
4. Start exploring your music!
### Themes
- **Silver**: Classic iPod look
- **Black**: Sleek modern variant
- **U2 Edition**: Special red and black design
---
## 🤝 Contributing
Contributions are welcome! This project is built to be highly extensible.
### Ideas for Contributions
- 🎮 New games and apps
- 🎨 Additional themes
- 🔧 Performance improvements
- 🐛 Bug fixes
- 📱 Mobile optimizations
---
## 📄 License
This project is open source and available under the [MIT License](LICENSE).
---
**Made with ❤️ by [Tanner Villarete](https://tannerv.com)**
*Bringing back the magic of the iPod Classic, one click at a time*
[](https://github.com/tvillarete/ipod-classic-js/stargazers)
[](https://github.com/tvillarete/ipod-classic-js/network/members)