This content originally appeared on DEV Community and was authored by Dennis Morello
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
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?
This content originally appeared on DEV Community and was authored by Dennis Morello