Films Lair

Films Lair is a React application intended for users to browse and choose films to watch later. I built this project from scratch with Typescript, React, Redux and Firebase. This application was the perfect way to improve my understanding of state management and asynchronous logic. I utilized the Movie Database API to gather the films data and the Firebase platform to store user accounts and the watchlist.

Project purpose and goal

I built this project with the main purpose of improving my comprehension of Redux and APIs in general, as well as using the best practices of state management and data manipulation. I also wanted to make this a movies application that I would enjoy using, meaning it had to be visually pleasing and allow users to search and save films to watch later.

Spotlight

Among the features implemented in this application, the most complex one has to be the Redux store. Composed of two slices, one that manages authentication and the other that stores the movies, the app-wide state is accessible from any component that needs it.

A big hurdle that I encountered was integrating the asynchronous API requests with the pure synchronous logic in the reducers. Thanks to the Thunk functions, I was able to interact with the redux store after fetching the data and at the same time monitor the lifecycle of the request. Also, this helps keep the code separated from the UI layer.

Lessons learned

This project helped to solidify a lot of my React knowledge, such as using hooks and updating states. I also got a lot of great practice with Redux and integrating APIs. This was a large project to undertake that taught me how important is to structure and organize code so it will give less headaches in the future.