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!
๐ Star the repo
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.