03 · Hardware · Music

Ipod Snapshot

LIVE

A snapshot of my iPod Nano 5th generation.

iPod Nano · Expo SDK 57 · React Native · TypeScript · Zustand · Expo Audio · Expo Video · Docker

Ipod Snapshot screenshot

Overview

A web recreation of the 5th-generation iPod nano: Click Wheel, menus, Now Playing, Cover Flow, and playback of music, videos, and photos from a folder on this computer.

The Problem

The 5th-generation iPod nano is a beloved device, but it's no longer supported by Apple. I wanted to create a snapshot of it for posterity.

The Experience

  • Navigate the Click Wheel and menus.
  • Play music, videos, and photos from a folder on this computer.
  • View the Now Playing screen.
  • View the Cover Flow screen.
  • View the iPod Nano 5th generation in all its glory.
  • FM-style tuner over internet radio streams.
  • Shuffle all music in the folder.
  • Settings — About, Library, Shuffle, Repeat, EQ, backlight, brightness, clicker, finish color.
  • Extras — Clock, Brick, Notes, Voice Memos, Pedometer, Stopwatch

Technology

  • Built with Expo SDK 57 and React Native.
  • Uses Zustand for state management.
  • Uses Expo Audio for audio playback.
  • Uses Expo Video for video playback.
  • Uses Docker for containerization.

Technical Decisions

  • Use Expo SDK 57 and React Native because it's the most compatible with the iPod Nano 5th generation.
  • Use Zustand for state management because it's a lightweight state management library.
  • Use Expo Audio for audio playback because it's a lightweight audio library.
  • Use Expo Video for video playback because it's a lightweight video library.
  • Use Docker for containerization because it's a lightweight containerization library.

Challenges

  • Some song names, album names, and artist names don't display correctly in the Now Playing screen.
  • Copyright restrictions on some songs prevent them from being played.

← All work