A self-inspired React app to show off a digital board game shelf.
The intended goal of this app was to create something from scratch using React. Having done guided development for my other previous apps, I wanted to try without a safety net. I attempted to limit the use of other modules for major parts, to allow for more learning. Bulma.io is used for a style framework. The API used is BoardGameAtlas, used for the search, then data for dimensions and box art for colour. The module react-image-palette to analyze the box art and provide complimentary, readable colours. A simple loader spinner is in place while any fetching and analysis occur.
The shelves where the game boxes are displayed are variable, based on a few inputs. The overall full shelf is built with a simple CSS grid, with each shelf a flexbox to display the games. When the shelf dimensions are modified, the games will move where they will fit, though based on the order added. The focus was more on building in React and all, so the app is primarily for desktop rather than mobile use.
Since this app was driven by my own ideas, I’ve included a larger post mortem below.
React (creat-react-app), Bulma.io, react-image-palette, node-sass
Unsurprisingly, there were quite a few things that could have improved. Even throughout development, you would be able to see the progress over the modules and overall style used. There are pieces of code that work but aren’t necessarily elegant. With React, there is an emphasis on modularity, and the app could be atomized further.
I made the choice to stop at this point, as the app does everything I initially set out to do. The next step would be to add more user messages during the process and handle errors. Connecting further into the BGA API would allow pulling user data to populate the shelves from one’s collection. Further, adding sorting and/or moving of games would let users organize their shelves to their liking.
However, even with that all said, the goal of self-led learning with this app was accomplished. I encountered errors and faults, but came to realizations that were interesting and occasionally brand new to me: