My Movie List
Being a film nerd, it seemed appropriate to make an app based on movies.
My Movie List enables users to create a list of movies that they wish to see. The user can also rate the movies, select if they've seen the movie and filter the list by name & genre.
Features
> Auto-complete search
> Authentication
> Add and remove movies to a list
> Rate and mark if watched
> Filter movies by name, genre, and if watched
Project Goal
The project had two different stages and iterations. The first stage allowed users to search for movies and add movies to their local storage. The second stage was more complex and required firebase for authentication and database storage.
My aim was to create an app that's influenced by movie theatres: full-frame images, movie posters and slow dissolves between selections. Netflix heavily influences the design of the app.
I also wanted to learn more about Redux and authentication, while creating an app that needed limited use of React Router.
Technologies
React was chosen for this project because I wanted to create a single-page app. Firebase was the choice for authentication because of its seamless synchronization. I also used Material UI to help make the project look professional.
I used The Movie Database API for fetching data and images due to it's clear and concise documentation.
ReactJS
Material Ui
Technical Hurdles & Solutions
Processing the states in the different containers was the most complex part of building this app. This is why Redux was utilised as there were so many state scenarios. Keeping on top of all of the action creators was key whilst keeping DRY in mind.
The auto-complete search bar was quite an advanced feature to implement The most challenging part was making sure that it's a pleasant experience for the user whilst optimising performance with useEffect. I also experienced some CORS errors when fetching from the API, which was fixed by creating a proxy URL with Heroku.
The auto-complete is a nice little feature, which aided in sticking to using react-router in a limited capacity. However, the search bar does take a while to load when you first login into the site. This is due to the API's slow response, and I believe that is out of my control.
Code Snippets
Lessons Learned
There were many lessons learnt on this project, but the most important ones were my newfound understanding of Redux, API integration and authentication. This was my first large project with React, and I learnt the core principles of creating a well structured and organised application.
On reflection, I would certainly improve my approach to building the app. I wouldn't rely on Redux so much and only have one component container to manage the state. I'd also split out the components even further to make the project more manageable.
It's nice to look back at this project and realise how much I've grown as a developer.
Other Projects
PODAPP
PodApp is an application for discovering and listening to podcasts in your web browser.
WEATHER CITY APP
Users can search for a city name and if matched, will display current weather.