CD-Mixtape
A Nostalgic Windows 98 Media Experience
CD-Mixtape is a front-end application that captures the nostalgic essence of the late 90s personal computing era. By meticulously recreating the Windows 98 desktop environment, it offers users a unique, interactive experience. The core functionality allows users to search for tracks on YouTube, compile them into a 'mixtape,' and then 'burn' them to a virtual CD. The application then transitions to a classic CD player interface to play back the custom playlist, blending retro aesthetics with modern streaming technology.
Problem & Purpose
In an age of hyper-sleek, minimalist design, there's a growing appreciation for the tangible, quirky interfaces of the past. This project began as a personal challenge to explore 'skeuomorphic' design—making digital items resemble their real-world counterparts. The goal was to create more than just a media player; it was to build an 'experience' that evokes the feeling of crafting a personal CD mixtape, a ritual many of us cherished.
The primary objectives were to:
- Master advanced CSS and component styling to replicate a complex, retro UI.
- Integrate with a major third-party API (YouTube) for dynamic content.
- Handle complex, multi-stage state management within a client-side React application.
- Showcase creativity and attention to detail in UI/UX design.
Technical Challenge & Solution
The main challenge was managing the application's state across different 'modes' or 'scenes'—the desktop, the mixtape creator, and the CD player—without a formal state management library like Redux or Zustand. The state, including the Youtube results, the pending mixtape tracklist, and the final 'burned' playlist, needed to persist seamlessly as the user navigated the experience.
Solution:
- I architected the state using a combination of React's `useState` for local component state and `useContext` for global state. A primary `AppContext` was created to hold the tracklist and application mode.
- By lifting state up to this shared context, I could ensure that when the user 'burned' their CD, the playlist data was immediately available to the CD Player component without prop drilling, enabling a smooth and logical transition between interfaces.
Lessons Learned
This project was a deep dive into the fundamentals of React state management, reinforcing the power and utility of the Context API for medium-sized applications. It also highlighted the importance of component architecture in preventing performance issues, especially when dealing with interactive, draggable UI elements. Finally, it was a valuable lesson in balancing nostalgic design with modern usability standards to create an app that is both fun and functional.
Tech Stack & Architecture
| Category | Technologies |
|---|---|
| Core | React 18 |
| Language | JavaScript (ES6+) |
| Styling | 98.css, Custom CSS |
| API Integration | YouTube Data API v3 |
| State Mngmt | React Hooks (useState, useContext) |
| Deployment | Vercel, GitHub |
Key Features
- - Leveraged the 98.css library to recreate the classic Windows 98 desktop environment with pixel-perfect window chrome, icons, and interaction patterns.
- - Implemented authentic system behaviors including window dragging, minimizing, and focus states.
- - Custom-built media player interface that mimics real CD player functionality with play/pause, track skipping, and volume controls.
- - YouTube integration allowing users to create playlists of up to 10 videos and save them as named 'mixtapes'.
- - Implemented complex state logic to maintain playlist data between the mixtape creation and playback modes.
- - Developed a smooth transition between 'burning' the CD and switching to player mode with preserved playlist data.
- - Maintained the Windows 98 aesthetic while ensuring full responsiveness across modern devices.
- - Carefully balanced nostalgic UI elements with intuitive UX patterns for contemporary users.