UPSIDE MIX 📼

A nostalgic web application that brings the retro Walkman experience to your browser.
Create custom mixtapes from YouTube videos and enjoy 1980s aesthetics.

Demo

🎧 Enjoy your mixtapes from here! 🚨 No Mobile supported at the moment!

📸 Screenshots

Player View	Collection View

✨ Features

• 🎨 Retro UI: Authentic "UPSIDE MIX" player design with 1980s aesthetics
• 📼 Mixtape Management: Create A-side / B-side playlists with intuitive drag-and-drop
• 🎯 Realistic Experience:
  • Authentic button click sounds
  • Cassette reel animations synchronized with playback
  • LED display with track information
• 💾 Backup & Restore: Export your entire collection to JSON and restore it anytime
• 🖼️ Cover Art Editor: Design custom cassette labels with built-in image cropping
• 🔍 Smart Import: Automatically fetch YouTube video titles and validate playback availability

🛠️ Tech Stack

• Frontend: React 18 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• State Management: Zustand
• Animations: Framer Motion
• Audio: Web Audio API
• Video Player: YouTube IFrame API

🚀 Getting Started

Prerequisites

• Node.js 22.x or higher
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/ritachoi-dev/upside-mix.git
   cd upside-mix

2. Install dependencies

   npm install

3. Run development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

Build for Production

npm run build
npm run preview  # Preview production build locally

📖 Usage

Creating a Mixtape

1. Click "New Mixtape" from the main menu
2. Enter a mixtape name and optional description
3. Add YouTube URLs to A-side or B-side
4. Customize your cover art
5. Save and start listening!

Exporting & Importing

• Export: Click the backup icon to download all your mixtapes as JSON
• Import: Click the restore icon and select your backup file

🗂️ Project Structure

upside-mix/
├── public/           # Static assets
├── src/
│   ├── components/   # React components
│   ├── stores/       # Zustand state stores
│   ├── hooks/        # Custom React hooks
│   ├── utils/        # Utility functions
│   ├── types/        # TypeScript type definitions
│   └── styles/       # Global styles
├── docs/             # Documentation and screenshots
└── ...

🐛 Troubleshooting

Videos won't play

• Ensure your Youtube video is allowed embedding
• Verify CORS settings

Mixtapes not saving

• Check browser's local storage quota
• Try exporting and re-importing your data

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by classic Sony Walkman designs
• Sound effects from freesound.org
• Retro fonts from Google Fonts

📧 Contact

Rita Choi - @ritachoi_dev

Project Link: https://github.com/ritachoi-dev/upside-mix

Created with ❤️ for the analog era.