Hey fellow devs! I'm Dennis Morello, a Senior Frontend Engineer with a passion for both cutting-edge web technologies and retro computing. I'm excited to share my latest project that combines these interests: a faithful recreation of the Windows 98 Disk Defragmenter, built entirely for the web.
Check it out: defrag98.com
Update 19 Jul 2024: We're on Product Hunt! š
Great news, everyone! The Windows 98 Disk Defragmenter Simulator is now live on Product Hunt. This is an exciting milestone for the project, and I'm thrilled to share it with a wider audience of tech enthusiasts and nostalgia lovers.
Update 14 Jul 2024: Featured on The Verge and Hacker News!
The project has been featured on Hacker News and The Verge! Thank you to everyone who has tried it out and shared their love for this blast from the past.
The Tech Stack
For this project, I leveraged some of the most powerful tools in modern web development:
- React: For building the UI components
- Next.js: To optimize performance and SEO
- Zustand: To manage the state of the app
- TailwindCSS: To style the app, along with 98.css for bringing in the Windows 98 aesthetic
- Radix UI Primitives: For accessible interactive components like sliders and modals
- Vercel: The hosting platform for the app
Challenges and Solutions
1. Recreating the Defragmentation Algorithm
One of the biggest challenges was implementing a defragmentation algorithm that felt authentic. I created a custom algorithm that:
- Randomly selects clusters to process
- Simulates file movements across the disk
- Adjusts processing speed based on the selected virtual drive
2. Pixel-Perfect UI Recreation
Achieving the exact look and feel of Windows 98 required meticulous attention to detail. I used a combination of 98.css and TailwindCSS to:
- Match colors precisely
- Recreate the characteristic 'chunky' borders
- Implement the classic Windows 98 typography
3. Simulating Hard Drive Sounds
To add an extra layer of nostalgia, I implemented realistic hard drive sounds. This involved:
- Recording and editing authentic HDD sounds
- Leveraging the Web Audio API for precise playback control
- Synchronizing sound effects with the visual defragmentation process
- Adapting the HDD sounds to the chosen drive speed
What I Learned
This project was a fantastic opportunity to:
- Deep dive into the intricacies of writing a custom defrag algorithm, and find a balance between performance and simulation accuracy
- Explore the challenges of accurately simulating legacy software
- Push the boundaries of what's possible in browser-based applications
What's Next?
This is a project I started just for fun, but I'm excited to see where it goes. I'm looking forward to continuing to improve the app, and adding more features as feedbacks from users come in.
I'd love to hear your thoughts, suggestions, or questions about this project. Have you worked on similar retro tech simulations? What challenges did you face?
Top comments (1)
This is so cool, being not just an "image" but an actual simulation with so much thought put into it!