BIOS Screen Using React, Redux, Tailwind !!!

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 keydown events
• 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!