Build a website to utilize an API to display movie information and TV information similar to IMDB
Research:
Understand the limits of an external API, how to access it and how to use it
Without owning the API, the data is limited to what the api provides
An API typically has a cost, so TMDB was used due to its free tier
Studying similar sites give an indication of how to structure the site
Planning:
How should the site be layed out, how to interconnect relevant layers such as TV shows linking to seasons linking to episodes
Creating a simple search bar to search for movies and TV shows
What information is relevant to each section of the site
Next.js was used for ease of use and reliability. Dynamic pages were made simple with Next's routing features.
Implementation:
The homepage was designed to be a simple search bar, with a list of popular movies and tv shows.
A full search page was also implemented to give a full featured search experience
Each movie, TV show, season and episodes were generated using a dynamic template that fetches data from the API and uses that data to generate information for the page, as well as creating links to relevant series
Polishing:
Accessibility, Resposiveness
Color scheme would consist of a darker gray colors to preserve the 'dark cinematic' experience
Recreated carousel similar to IMDB's homepage, made the animation smoother than original
Sliders were designed to be similar to movie reel film
Each part of the site was modified to make certain parts look clickable, and link towards relevant areas of the site.
Navigation between pages were designed to be intuitive and easy to use
Site was tested using different screen sizes and browsers to site behaves predictably regardless of usage.
Production:
Launching the site
Vercel was chosen to host the site for ease of deployment, amongst other time saving features.
