Mosaic
Mosaic is a React application for browsing trending movies and TV shows via the TMDB API, built with a RESTful data layer and React Router. The app was redesigned from a previous Figma project to be faster and more minimal.
goals
- The idea behind this project was to have a single app to keep up with trending movies and TV shows. I then built upon that by adding a bookmarking section for 'watch later' items. These requirements steered the implementation toward data caching in React useStates, since frequent API calls might cause a bottleneck. To give trending media visual priority, I built a carousel.
- The last phase of the project was implementing a trailer feature. This specific feature wasn't part of the original design so designed it myself, keeping it minimal.
highlights
- The app relies heavily on grids and lists which also render across many viewport sizes, so isolating components in Storybook let me catch horizontal scrolling, and missing list keys in advance.
- The carousel and long lists create friction for keyboard navigation. They also degrade screen-readers' ability to quickly parse a page's content. I added skip links to jump between internal sections so users can skip or dive into items. The app is fully keyboard-navigable.
- The use of local storage to save items is convenient to avoid the overhead of Redux or backend work and makes retrieval seamless from any page. The limitation of this approach is the lack of cross-device sync.
what's next
- The hard-earned lesson of this project is that 'temporary' crappy code is here to stay. In the early stage, I created messy dependencies, one-shot components, and a jungle of folders and subfolders, just to 'do things quickly and move on'. I soon realised this approach would backfire. I refactored toward atomic design, modular Sass, and BEM, and now apply that structure from day one on every new project.
- One feature I might add down the line is the integration with a showtime API to check which cinemas offer that movie nearby. Unfortunately, the costs of that API are prohibitive right now.