A few months ago I started a side project to showcase the books I've been reading. Books Project Part 1 outlines the process where I setup a backend to pull data from google sheets and expose that via a GraphQL endpoint.
In this second part I'll describe the second half of the project where I setup the front end. You can see the final project at books.mikemjharris.com and the code for it is on GitHub.
Vue vs React
In part 1 I suggested I'd try out Vue to build the front end. In the meantime I experimented with that framework while building out my dashboard project. Whilst I've worked with React at work for around three years none of my personal projects have utilised it. In my side projects I can have a bit more fun and try out new things even with a familiar framework and in this case opted to use React.
Styled Components
Another bit of tech that I wanted to experiment with is styled components. Really enjoyed the playing with them in this project - they're still CSS and you still need to know how that works but you can manage your styles a bit differently. Creating the colourful rainbow effect for the book layout worked out really easy to implement using a bit of JS with CSS.
Stats and filtering
Additional functionality I wanted was to be able to filter by year and gender and also some stats over time. For both I setup a filter helper file where the same function is used for both purposes. This isn't that efficient but for the data set I have there isn't a noticeable performance issue. In future the filter helper code could be shared with the backend and the stats compiled and cached there to improve frontend speed.
Respecting the web
When using filters I want the whole page to reflect the current state of the data - if I share the URL I want the recipient to be able to see the same data. To achieve this I added filter params and added the previous view to the page history so you get a smooth web experience as you'd expect.
Conclusion
Having a two part series helped push me to write another post and to have something to build. The actual project allowed me to showcase some of my React knowledge. Styled components worked really well and weren't that different from writing normal CSS. The finished project does everything I wanted it to - pretty happy with the look and feel - apologies if the rainbow effect is a bit too much - it did allow me to play with more dynamic styles wich was one of my aims.