- Responsive Design
- React JS
- React Router
- CSS 3
- Use of API (The Movie Database API)
- Adobe Photoshop
- Adobe Illustrator
About the Project
Movie posters are designed with different colors and styles so I want to make my website as minimal as possible to avoid clashes. It was in this situation where I devoted most of my time making the app work rather than concentrating on the style itself.
Despite this decision, I still took into consideration how I wanted it to look like. For the header, I implemented a banner with the title of the app and immediately followed by the search bar.
The reason why I wanted the search bar to be more prominent was because as a user of other movie databases, I don't want to think. Like me, I want users to jump straight to a search bar and immediately type in what they are looking for in the database.
First, I obtained an API key by signing up at the The Movie Database (TMDB) website.
I find the TMDB documentation for API usage very helpful. For situations like getting popular movies to getting release dates, the documentation for developers offers it all:
I enjoyed using the
useState() hook because they are easy to work with
test. Also, it makes your code look cleaner and more readable. When coupled with
useEffect(), these hooks make it easier to implement API calls. Below
snippet of how to import these hooks:
One of the most challenging parts of creating this app was storing favourite movies into the "Favourites" local storage. After several tries, I managed to keep them in local storage and also was able to remove them if necessary.
There are a lot of features built in React that makes working with it easier. I personally liked using the hooks and liked how powerful it is when doing API calls.
One mistake I made was not checking how everything works before publishing it. An example would be the navigation menu items. They are a bit twitchy on hover and are not great for user experience.