For design, my primary concern was that the site look and perform well on mobile devices. Good clean typography and nice vertical rhythm are key to making a design clean and inviting to read. I used modularscale.com as a resource to take the guess work out of type sizes, and the excellent Typi Sass library combined with Mappy-Breakpoints to take care of responsive resizing, vertical rhythym and sizing type appropriately at different screen sizes. Page layout for the most part was very basic, and I used CSS Grid with a Flexbox fallback for anything that called for a grid structure. Finally, I wanted to use animations to add fun and bring the game to life. React Transition Group to the rescue! Using this tool, I was able to add CSS animations to React components as they mounted and unmounted, and even to react routes as users navigate between pages.
This is still very much a work in progress, and I have lots of plans for improvements in the future. Next up, I’d like to create a login system using oAuth, and connect the site to a database, so that players can have accounts on the site, and hopefully can challenge their friends on social media to trivia games. Eventually I’d like to use React Native to build this into an iOS/Android app.