An iPod Classic simulator that connects to Apple Music and Spotify. Built with React & Styled Components
See the codeThe iPod Classic, rebuilt for the streaming era.
Spotify and Apple Music in a pixel-perfect iPod Classic, complete with click wheel, games, and themes.
pnpm install
pnpm dev
On first run, you'll be prompted to enter values for each secret (Spotify credentials, Apple Developer Token). These are stored in a local Cloudflare Secrets Store managed by Wrangler.
Visit http://127.0.0.1:3000/ipod to start.
Use
127.0.0.1instead oflocalhost. Spotify's redirect URIs require it.
This project uses Cloudflare Secrets Store for managing secrets in both production and local development.
Running pnpm dev will automatically detect missing secrets and prompt you for values. You can also run the setup manually:
pnpm sync-dev-vars
You'll need the following values:
| Secret | How to get it |
|---|---|
SPOTIFY_CLIENT_ID | Create an app in the Spotify Developer Dashboard |
SPOTIFY_CLIENT_SECRET | Same Spotify app — copy the Client Secret |
APPLE_DEVELOPER_TOKEN | See the Apple Music JWT Generator |
Add http://127.0.0.1:3000/ipod as a redirect URI in your Spotify app settings. Must be 127.0.0.1, not localhost.
To update local secret values at any time:
pnpm sync-dev-vars
Deployed on Cloudflare Workers via OpenNext.
pnpm build # Next.js + Serwist service worker
npx opennextjs-cloudflare build # Bundle for Cloudflare Workers
npx opennextjs-cloudflare deploy # Deploy to production
Production secrets are managed in the Cloudflare Secrets Store via the dashboard or wrangler secrets-store CLI.
Next.js, React, TypeScript, Styled Components, Motion.
MIT
173 followers · starred Jan 2023
1,572 followers · starred Jun 2021
114 followers · starred Jan 2020
137 followers · starred Jun 2021
An iPod Classic simulator that connects to Apple Music and Spotify. Built with React & Styled Components
See the codeThe iPod Classic, rebuilt for the streaming era.
Spotify and Apple Music in a pixel-perfect iPod Classic, complete with click wheel, games, and themes.
pnpm install
pnpm dev
On first run, you'll be prompted to enter values for each secret (Spotify credentials, Apple Developer Token). These are stored in a local Cloudflare Secrets Store managed by Wrangler.
Visit http://127.0.0.1:3000/ipod to start.
Use
127.0.0.1instead oflocalhost. Spotify's redirect URIs require it.
This project uses Cloudflare Secrets Store for managing secrets in both production and local development.
Running pnpm dev will automatically detect missing secrets and prompt you for values. You can also run the setup manually:
pnpm sync-dev-vars
You'll need the following values:
| Secret | How to get it |
|---|---|
SPOTIFY_CLIENT_ID | Create an app in the Spotify Developer Dashboard |
SPOTIFY_CLIENT_SECRET | Same Spotify app — copy the Client Secret |
APPLE_DEVELOPER_TOKEN | See the Apple Music JWT Generator |
Add http://127.0.0.1:3000/ipod as a redirect URI in your Spotify app settings. Must be 127.0.0.1, not localhost.
To update local secret values at any time:
pnpm sync-dev-vars
Deployed on Cloudflare Workers via OpenNext.
pnpm build # Next.js + Serwist service worker
npx opennextjs-cloudflare build # Bundle for Cloudflare Workers
npx opennextjs-cloudflare deploy # Deploy to production
Production secrets are managed in the Cloudflare Secrets Store via the dashboard or wrangler secrets-store CLI.
Next.js, React, TypeScript, Styled Components, Motion.
MIT
173 followers · starred Jan 2023
1,572 followers · starred Jun 2021
114 followers · starred Jan 2020
137 followers · starred Jun 2021