Creating a mock Netflix site with React & Firebase: A Beginner’s Journey
ZonaFlix is a mock Netflix site that I created to learn the React framework. The project involved the use of React, HTML, CSS, the Stripe API for payment processing, and Firebase for the back-end, and hosting. The aim was to create a simple yet functional web application that allows users to sign up, choose a subscription tier, and make payments using their debit or credit cards. In this post, I’ll use the STARL method to detail the creation process of ZonaFlix.
Situation: As a beginner in web development, I wanted to learn the React framework and create a simple yet functional web application. I decided to create a mock Netflix site as my first project using React. The reason I chose React is that it’s a very popular JavaScript framework and despite being intimidated by it at first I wanted to step my learning curve a notch. Also, because of my deep interest in film and television so I thought that this project would be challenging yet fun at the same time.
Task: The task was to create a web application that allows users to sign up, choose a subscription tier, and make payments using their debit or credit card. The user’s information was to be stored in Firebase to enable user authentication and hosting. Then once the user payment goes through, the user is then taken to the homepage of ZonaFlix and can scroll through the page of movies based on different categories.
Action: The first step was to create the sign-up page where users could input their information. I used HTML and CSS to design the page, and React to manage the state and logic.
During this process, I found the fundamentals of React pretty interesting in that you’re able to develop every element into separate components and then bring everything together in the App.js file. I did run into some syntax errors due to some React updates while developing. For example, v6 of the react-router-dom no longer uses ‘Switch’ syntax and is now called ‘Route’. This was important because it’s through the ‘Routes’ that we are able to connect our page components together. Special thanks to Google for helping me figure out the new syntax.
Once the user’s information was entered and verified, they were redirected to the subscription page where they could choose their subscription tier. Like most streaming platforms you can choose a basic plan, standard, and premium options.
Next, once the user has chosen their plan, it takes them to the payment page. I integrated the Stripe API to allow users to input their debit or credit card information and make payments. The API was set up to securely handle the user’s payment information and process the transaction.
**As of now the app doesn’t actually take real card data, but you can play around and input fake card information.**
To store user information, I used Firebase’s user authentication and hosting features. This enabled me to keep track of the users and their subscription status. Firebase was also new for me to navigate but out of all the back-end hosting platforms that I’ve experienced, I would say Firebase was pretty easy to navigate. Their documentation was very easy to follow and was able to set up the user authentication and I was able to deploy the application there as well.
Result: The final result was a functional web application that allowed users to sign up, choose a subscription tier, and make payments using a mock debit or credit card. The ZonaFlix homepage was designed to look similar to the Netflix homepage, and I used the TMDB API to fetch and display movie data. The project was a success, and I was able to learn a lot about React and handling user information on the back end.
Lesson Learned: The creation of the ZonaFlix app taught me the fundamentals of React and how to integrate different APIs and technologies to create a functional web application. Some features I would love to add to this would be to build more on the film data. I would like the users to be able to click on the film and for it to display more information about the film and perhaps an embedded YouTube video to show trailers of the films.
You can check out the deployed application here.
Let me know any other suggestions or thoughts on ZonaFlix!
Till next time! 😎✌🏽
