When my apartment complex's posted TV channel listings didn't match up with what my TV actually registered, I decided to over-engineer a bit of a solution for myself.
The web app is deployed to GitHub pages and proxied by Cloudflare to be available at channel-list.jackwarren.info. A small preview is below:
The source code is available on GitHub.
For this project, I decided to dip my toes into a few technologies I hadn't worked with much before:
The end product is fairly simple:
- Channels are loaded and parsed from
.jsonupon loading the app in the browser
- Typing in the top bar filters results upon each key press
- Clicking or tapping on a channel opens a small modal with instructions on how to use Alexa in the apartment to change the TV to that channel
The simplicity here is key: channels can be easily edited via the configuration file, the interface behaves well on mobile devices, and the modal smoothes over special cases in the Alexa logic. Beyond solving a real-world problem, building this web app was a great intro to React and it was what ultimately inspired me to remake my own website from scratch.