Implementing a chess transcriber in React

React is today one of the most popular frameworks for coding UI layers of modern web apps. By the moniker “modern”, I mean an era where best practices have matured for the vast majority of use cases & some level of declarative programming has been achieved (you code what should happen, instead of how to do it).

I think there are two fundamental aspects of React’s popularity (especially compared to the frameworks / libraries used before it):

Chess transcriber

Here I want to talk about how I implemented a chess transcriber using React (source).

https://miro.medium.com/max/700/1*z4zTg1NIUHNFEtPLnOuD-w.png

My chess transcriber web app

A second look & re-architecture

The more I learnt to think in React (and since I wanted to improve the app), I thought through exactly which component needed which data flow and how to arrange them in a well-organized dataflow-lean way. I decided to re-architect the app making the following changes.

This app has been pretty useful to appreciate the underlying design choices of React and to understand when exactly to use (or not) Store libraries. Clean code comes from clean architecture, which requires having a clear idea of what exactly various tools offer, and when they make sense to use. Try out the app, and let me know your thoughts!

This article was cross-posted to Medium & Dev.to, so you can also follow there or post comments.