A modern recreation of the classic iPod interface built with React.js and TypeScript. Relive the nostalgic click wheel experience in your browser!
Live Demo: [Coming Soon] GitHub Repository: https://github.com/aapav01/ipod-app
- 🎛️ Circular click wheel navigation
- 📱 Retro-styled LCD display
- 🎮 Functional sub-menu system
- ⚙️ Settings and Games screens
- 🕒 Real-time clock and battery indicator
- 📱 Mobile-responsive design
- Clone the repository:
git clone https://github.com/aapav01/ipod-app.git
cd ipod-app- Install dependencies:
npm install- Start the development server:
npm run dev-
Click Wheel:
- ← → : Navigate through menu items
- MENU : Return to previous screen
- CENTER : Select highlighted item
- PLAY/PAUSE : Toggle playback (simulated) (WIP)
-
Menu Navigation:
- Main Menu: Music, Games, Settings
- Music Sub-Menus: All Songs, Artists, Albums
- Games Screen: Retro-style game placeholder
- Settings Screen: Device information
ipod-app/
├── src/
│ ├── components/ # React components
│ │ ├── ClickWheel.tsx # Interactive wheel component
│ │ ├── Display/ # Screen display component
│ │ └── Menu/ # Menu system components
│ │ └── LeafScreen/ # Different app screens
│ │ ├── index.tsx
│ │ ├── Games.tsx
│ │ └── Settings.tsx
│ └── App.tsx # Main application component
├── public/ # Static assets
└── package.json # Project dependencies
- Add music playback functionality
- Create actual playable games maybe?
- Include animations for menu transitions
- Add dark mode/light mode toggle?
Contributions are welcome! Here's how you can help:
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Please report bugs and feature requests using GitHub Issues.
- Inspired by Apple's iconic iPod Classic
- Built with Create React App
- Icons by Lucide
- Special thanks to the React community
Relive the magic of digital music revolution! 🍎🎶