BIOS Emulator Web Interface – React Edition 🚀
Before we start — if you find this project interesting, please consider giving it a ⭐️
GitHub Repo: BIOS-Emulator-Web-Interface
🔙 A Look Back: The First Version (2024)
Last year, I built a BIOS emulator as a web interface using pure HTML, CSS, and JavaScript.
While functional, it quickly became difficult to manage:
- Code was large and tightly coupled
- UI elements had to be manually hidden/shown based on key presses
- It started behaving like a full SPA (Single Page Application)... just without a framework HAHA
🔁 The Rebuild: Moving to React (2025)
So I decided to rebuild it using React JS.
At first, it seemed simple... until I found myself diving deep into the Phoenix BIOS User Manual (PDF).
From there, it became a 10-day journey of:
- Handling complex
keydownevents - Dynamically rendering components based on key inputs
- Improving accessibility and layout with Tailwind CSS
- Managing global state using Redux Toolkit
- And yes — a little help from ChatGPT
Despite the added complexity, the project became far more readable, modular, and maintainable than the original version.
🧱 Project Structure Evolution
Here’s a quick comparison between the first and second versions:
Before :
After :
🧪 Try It Live
Demo:
🔗 BIOS Emulator Web Interface (GitHub Pages)
Keyboard Controls:
-
ArrowUp,ArrowDown,ArrowLeft,ArrowRight -
Enter,Space,F1,F9,F10,Esc
💻 For best results, view on a desktop browser — it’s designed to simulate a legacy BIOS screen.
🙏 Support
If you enjoyed this project or found it helpful, please give it a star on GitHub. It means a lot and helps others discover it!
Thanks for reading!
Top comments (4)
man, seeing something go from scrappy html to this is just rad - ever hit moments where you almost wanted to ditch it or did building the new version just keep pulling you back in?
Thank you, I faced some obstacles that made me frustrated but i go away far from the code a day or 2 days and come back with new enthusiasm to complete work.
Don't forget to give us a star on Github.
I like it 👍
Thank you,
Don't forget to give us a star on Github.