MovieHub
Movie Database App
Role(s)
- Front End Developer
Tool(s)
- React
- TMDb API
- jQuery
- CSS3
- Animated CSS
Your Endless Movie List
MovieHub is a React-built web application that sources up-to-date movie data while allowing users to create a personalized watch list.

App Tasks
- Shows current trending & top-ranking movies, inc. key details such as ranking, overview, starring actors/ actresses etc.
- Allows movie search by keywords
- Allows add/ remove movies to a list which can be revisited later





What You'll Read About
Development Process:
- How did I prevent users from misunderstanding that my site is broken while data is being fetched?
- How did I solve the inevitable user experience problems?
How I fulfilled the App tasks

Extra steps to make the app more user-friendly.
01. Set Loading State

I perceive this as a crucial element in the app. As mentioned above, the app relies heavily on an external API but every fetch request takes time.
Without any indication of 'loading', the app will go blank and appears broken before data has been successfully fetched.
To inform the user, I decided the app has to render a little loading animation on pages that require data fetching. This can be done easily by state-handling, i.e. setLoading(), and CSS animation:
See the Pen State Handling by lam-tiffany (@lam-tiffany) on CodePen.
02. Solving User Experience Problems
Occassionally, users may arrive to pages that contain empty information - e.g. missing image of a particular actress or movie poster, an empty watch list, wrong URL, etc.
Perhaps except the last example, all are highly likely to happen. To minimize its negative effects on user experience, these are what I did:
- Created a placeholder image that is coherent to the theme of my app. More importantly, set that as a default image for all images and replace them to real images only if that particular image is available in The Movie Database (TMD) .
- If users have not added any movies to his/ her watch list, the page will render a warm reminder on how to use the watch list feature instead of an empty watch list.
- If users arrive to an invalid URL, the page will provide a link to go back to home page so they can continue searching.

See the Pen Placeholder Image on Moviehub by lam-tiffany (@lam-tiffany) on CodePen.

See the Pen Watch List Ternary Operator Demo - MovieHub by lam-tiffany (@lam-tiffany) on CodePen.
