Github Repo
Overview
I had a lot of fun creating this Disney+ clone using React, Redux, and a Firebase database. It is a fully functional and mobile responsive web app so feel free to check it out. You can log in using Google authentication and browse through the (limited) catalogue of Disney+ content to view some trailers.
The Tech Stack
This front-end project uses some of the most popular and modern technologies including:
- React, Redux, Styled Components
- HTML, CSS, JavaScript
- Firebase database and hosting
My Favourite Part
The best part about creating a full project like this is seeing everything come together. The beauty of React Router is being able to create a single page application with navigation that doesn't need to reload every time a user clicks on something. React is definitely a beast of a tool and I've only just scratched the surface of what it can do.
I also really enjoyed doing the CSS styling. For the most part, I stayed true to the original design and did my best to recreate the hover transitions using a few different sources and some CSS magic.
Challenges
The biggest challenge in creating this clone was making the database of Disney+ content to automatically render it on the home page. Without access to the Disney+ API or any metadata, my only option was to use a limited catalogue of movies/tv shows and manually input them into the database. While I was still able to save a lot of time by using a database instead of creating a component for each movie/show in the app itself, it wasn't as efficient as I hoped.
Next Steps
If I were to continue improving this project, the next steps would be to make use of the search and filter features, along with the watch list. Without access to the Disney API, there wasn't really any reason to filter through the very limited catalogue although it would have been a great addition.