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
Generating 20 Results for Search, Trending, and Top-Rated Movie Pages (Desktop)Search by keyword 'Avengers' (Desktop)Individual Movie Details (Desktop)Personalized Watch List (Desktop)App Introduction (Desktop)
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
Major Components & how I built them
Extra steps to make the app more user-friendly.
01. Set Loading State
Loading Animation while data being fetched from database (Mobile)
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:
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) .
Placeholder Images for Unavailable Images (Desktop)
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.
Empty Watch List: Teaches users how to Add Movies to the List (Desktop)
