streamhub

Project overview

I built StreamHub from the ground up whilst making design decisions along the way with user experience and performance in mind. I am continously improving the app as I pick up new skills and technologies.

The solution

Next.js was the logical choice for this web app, offering the ability to set up dynamic page and API routes with ease, along with various rendering options that can lead to improved performance. The app uses a mixture of SSG, CSR & SSR for speedy page loads which provided me the opportunity to familiarise myself with web performance and SEO best practices.

React Query was used for the interior genre and search pages, which involve infinite query , to reduce the amount of code needed for fetching data and improving performance by handling data caching and background refetching.

Challenges

One of the main challenges I encountered was image optimisation due to the large volume of images in the application. Using the Next/Image component or a custom loader would have incurred some costs, therefore, I opted out of the offered by Vercel which would have generated images in next-gen format, resized them for different screen sizes, and prevented cumulative layout shifts.

However, I implemented best practices where possible, such as lazy loading and fetching images from the TMDB API at appropriate sizes.

Lessons learned

This is the largest application I've built from scratch which provided valuable lessons in code structure and organisation. Initially, my code was not clean, and instead of refactoring, I completed tasks and moved on to the next. I have since made a point of refactoring my code for better readability and organisation.