DEV Community

Dennis Morello
Dennis Morello

Posted on • Updated on

Recreating History: Building a Windows 98 Disk Defrag Simulator with Modern Web Tech

Defragmenting a disk in Windows 98 Disk Defrag Simulator

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.

Windows 98 Disk Defrag Simulator - Relive the 90s: Windows 98 Defrag Simulator Nostalgia | Product Hunt

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)

Collapse
 
smsteel profile image
Aleksey Smirnov

This is so cool, being not just an "image" but an actual simulation with so much thought put into it!