Build and Deploy Movie App - React 18, Chakra UI, Firebase Auth and Database

In this tutorial, we'll build and deploy a Movie App using React 18, Chakra UI, Firebase Authentication & Database, and TMDB API for getting movie data.

👨🏻‍💻 Github Repository:
https://github.com/stefandjikic/movie...

🔧 What You'll Learn:

• Setting up a React 18 project with the latest features and improvements.
• Designing a modern and responsive user interface with ChakraUI.
• Connecting to an external API to fetch and display movie data dynamically.
• Implementing user authentication using Firebase for a secure and personalized experience.
• Integrating Firebase Database to handle the user's watchlist.

🔗 Resources Used:

• React Documentation: https://react.dev/
• ChakraUI Documentation: https://chakra-ui.com/
• Firebase Documentation: https://firebase.google.com/docs
• TMDB API: https://developer.themoviedb.org/docs...

🕐 TIMESTAMPS:

0:00 - Intro and Overview
4:00 - Create Vite App
6:00 - Chakra UI & Code cleanup
17:10 - React Router
21:30 - Pages & Layout
35:00 - TMDB API
39:00 - Coding [API, Data Fetching and UI]
3:26:50 - Firebase Setup
3:33:40 - Auth Context
3:44:12 - Coding [User Login & Navbar]
3:51:33 - Coding [Watchlist Page & Protected Route]
3:58:28 - Firebase Database Setup
4:00:20 - Database Design
4:04:30 - Coding [Database]
4:44:30 - Coding [Finish Watchlist Page]
4:48:25 - FIX Protected Route
4:50:00 - Coding [Finish Watchlist Page]
4:57:55 - FIX Navbar for Mobile Screens
5:00:45 - Firebase Security Rules
5:02:45 - Deploy
5:05:20 - Add Authorized Domains

‪@Firebase‬
‪@thesegunadebayo‬
‪@VercelHQ‬