Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
BIOS Emulator Web Interface – React Edition ?
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:
So I decided to rebuild it using React JS.
At first, it seemed simple... until I found myself diving deep into the .
From there, it became a 10-day journey of:
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:
?
Keyboard Controls:
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!
? A Look Back: The First Version (2024)Before we start — if you find this project interesting, please consider giving it a
GitHub Repo:
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 ?
So I decided to rebuild it using React JS.
At first, it seemed simple... until I found myself diving deep into the .
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:
?
Keyboard Controls:
- ArrowUp, ArrowDown, ArrowLeft, ArrowRight
- Enter, Space, F1, F9, F10, Esc
? 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!