Red Button Trainer
Production grade red button training for business critical applications.
I came up with an application to build that wasn't yet another todo app. I also had fun with it by implementing the user interface using Wokwi Elements. As this a single page application; it did not need any routing for other pages to be handled so I did not need to use a web framework like Next.js.
Source code available: codeberg.org/jkenlooper/red-button-trainer
I took this project on myself because I wanted something silly to build and learn more about how to use React. The overall idea, design, development and launching of this application was handled by myself. It was originally started quite a few years ago when I was first teaching myself React. I have since then updated and maintained it to use the latest React version as well as reduced some of the extra complexity in the initial implementation.
Technology Stack
- React - Used for handling the interactivity and user interface state management. Made organizing and structuring the code easier to maintain.
- Vite - Made developing and bundling the JavaScript, and CSS much easier. The static files needed for production were all minimized using Vite
- Wokwi Elements - The button, lights, and 7 segment display were all done as web components from Wokwi Elements. This made the application more interesting and engaging.
Summary and Takeaways
- React can now finally use HTML web components in it's virtual DOM without needing to do anything special for the most part.
- React is a very common library to use for web applications that have a lot of user interaction and state management.
- I don't push red buttons as fast as some of my friends.