🔥 Build NETFLIX With React JS - Tailwind CSS - FIREBASE - Front-End Web Developer Project
Code Commerce2022-05-07
133K views|2 years ago
💫 Short Summary
The video tutorial showcases creating a Netflix clone with React.js, Tailwind CSS, and Firebase. It covers setting up authentication, navigation, API calls, styling components, user-specific account pages, saving shows, and deploying the project to Firebase hosting. The tutorial emphasizes using Tailwind CSS for easy styling, Firebase for backend functionality, and React Router DOM for navigation. Viewers are guided through setting up protected routes, managing user authentication states, and utilizing Firebase Firestore for cloud storage. The final project allows users to sign up, log in, save favorite shows, and access them in their account.
✨ Highlights
📊 Transcript
✦
Creating a Netflix clone using React.js and Tailwind CSS with Firebase backend.
00:09Users can sign up, log in, save movies, and view them in their account.
The application uses Firestore for cloud storage and React Router DOM for navigation.
Tutorial includes creating a React app with Tailwind CSS, setting up protected routes for authentication.
npm or yarn is utilized for package management.
✦
Setting up Tailwind config file and adding styles to index.css.
03:57Installing dependencies such as axios, react-router-dom, and firebase.
Including additional packages like react-icons and tailwind-scrollbar-hide.
Configuring tailwind-scrollbar-hide in the config file and adding base styling to CSS file.
Emphasizing the need to restart the server for the styles to take effect, followed by organizing project files and creating a components folder with a navbar component.
✦
Recommendations for VS Code plugins to enhance development efficiency.
08:01Tailwind CSS Intellisense provides auto-suggestions for class names, saving time while typing.
Prettier function helps with code reformatting upon saving.
ES7 React Redux Snippets allow quick generation of functional and class-based components.
Tips shared for auto-importing components and styling buttons efficiently using Tailwind CSS.
✦
Setting up navigation and structuring pages in React.
13:19Creation of home, sign up, sign in, and login pages within a 'pages' folder.
Explanation of implementing React Router DOM for routing and configuring browser router.
Highlighting the importance of displaying a navigation bar on all pages and setting up individual routes for each page.
Touching on creating a main component using Axios, useState, and useEffect hooks.
✦
Setting up API key for movie database access and making secure API calls.
16:23Create a file 'requests.js' to store endpoints and API key securely.
Use axios to make API calls within a useEffect hook to prevent continuous calls.
Demonstrate how to fetch popular movies data and set state with response data.
✦
The segment covers logging data from movies API, filtering for movie results, and randomly selecting a movie to display.
22:03Demonstrates retrieving and displaying movie data on a webpage using JavaScript.
Includes styling webpage elements like images and alt tags for SEO.
Utilizes optional chaining to access nested objects within the movie data array.
Aims to dynamically update the displayed movie upon page refresh for a seamless user experience.
✦
Setting up an API and styling with Tailwind CSS.
25:17Demonstrates adding base URL and endpoint, using template literals and back ticks for full URL.
Shows styling image with object fit for aspect ratio, and adding overlay with gradient.
Adding buttons with specific styling and functionality like play and watch later buttons.
Tutorial emphasizes using Tailwind CSS for easy styling and customization.
✦
Overview of styling elements in HTML using divs and buttons.
30:16Demonstrates setting absolute width and using media queries for responsive design.
Emphasizes the importance of mobile-first design for different device sizes.
Covers optional chaining, font styling, and text truncation for improved user experience.
Focus on creating visually appealing and responsive layouts for websites and applications.
✦
Using JavaScript to truncate strings and add ellipses.
34:18Creation of an arrow function named 'truncateString' that takes a string and a number as parameters.
The function checks the length of the string and returns a truncated version with ellipses if it exceeds the specified number.
Examples of truncating strings to different lengths are shown in the demonstration.
The segment also discusses creating a reusable 'row' component for different sections of the application.
✦
Setting up a row component, adding an h2 title, creating a div for images, and introducing a slider element on a website.
39:44Using axios to request data, mapping through the data for rendering content, and styling the components accordingly.
Demonstrating how to fetch a URL, retrieve data, and display it on the webpage.
The segment covers setting up the basic structure for displaying content on a website using React components and API requests.
✦
The tutorial covers CSS styling for mapping data and creating hover effects with overlays.
43:28The tutorial explains setting image widths and adding hover effects to elements on a webpage.
Creating overlays with opacity changes and styling text elements are also discussed in the tutorial.
Template literals and optional chaining are explained as tools for effective CSS implementation.
Various CSS properties for design purposes are highlighted to help improve web development techniques.
✦
Adding icons and state using React Icons in a React application.
48:46Importing icons from the React Icons library to use in the application.
Setting up state using the useState hook in React.
Using a ternary operator to display different icons based on the state.
Positioning icons using classNames and simplifying code by mapping through a separate movie component file.
✦
Adding styling to a row component in React.
53:20Setting width, height, and overflow properties for the row component.
Adding React icons for navigation and styling them with background color and opacity.
Ensuring icons are hidden until hovered over.
Demonstrating the process of adding icons and styling them for a visually appealing movie application interface.
✦
Implementation of functionality for scrolling through rows using JavaScript.
01:01:35Functions are created for sliding left and right, grabbing elements by ID, and adjusting scroll positions.
A unique row ID is added to differentiate between rows for smooth scrolling.
UI layout for a Netflix clone is completed in an hour and a half using React.js and Tailwind CSS.
Next step involves connecting Firebase for backend functionality and managing user state.
✦
Setting up a Firebase project and securely managing credentials.
01:02:53Importance of creating a Firebase config file and using environment variables for sensitive information.
Process involves creating a .env file with API key, project ID, storage bucket, message sender ID, and app ID.
Accessing these variables in the application using process.env.
Emphasis on integrating Firebase credentials into the project securely.
✦
Setting up authentication with Firebase using email and password.
01:08:04The video shows creating a context folder, importing components from React, and setting up an authentication context provider.
Importing SDKs for Firebase products and defining a provider function are crucial steps in the process.
It is important to restart the server after making changes to the environment file for proper functioning.
The tutorial emphasizes the use of context API with Firebase for managing user authentication states.
✦
Setting up application with navbar in app.js for conditional rendering of buttons based on user login status.
01:11:27Creating an auth context provider to handle user authentication logic, including signing in and out, creating new accounts, and checking login status.
Importing necessary functions from Firebase, setting up state, and creating functions for signing up, logging in, and logging out.
Implementing an onAuthStateChanged listener to establish the foundation for user authentication within the application.
✦
Setting up Sign-in, Sign-up, and Account Pages for an App.
01:17:43The narrator imports components and sets up routes for login, sign up, and account pages.
Adjusts styling and backgrounds for the sign-up page by creating classes and setting up background images.
Adds overlays for styling and mentions importing links for proper navigation between pages.
Covers initial setup and design considerations for key app pages.
✦
Styling a form using Tailwind CSS.
01:23:50The video demonstrates setting custom values for divs, classes, and inputs to style a form.
Recommendations are provided for form styling and layout, highlighting the flexibility and simplicity of using Tailwind CSS.
The presenter showcases the ease of adding styling for buttons, forms, inputs, checkboxes, and help text within the form.
The segment concludes by discussing the time-saving benefits and customization options available with Tailwind CSS.
✦
Setting up a sign-up component for a website.
01:29:24Importing user authentication context and defining state variables are key steps in the process.
Creating a handle submit function is crucial to prevent default form submission.
Asynchronous functions with try-catch blocks are implemented for effective error handling.
The goal is to create a clean and efficient sign-up process for new users on the platform.
✦
Setting up sign-up form and user authentication in Firebase.
01:34:35Demonstrates creating a new user in Firebase through form submission.
Redirects users to home page upon login and discusses conditional rendering based on authentication status.
Imports context and user authentication, implements log out functionality.
Showcases user data access in Firebase and conditional rendering based on user login status.
✦
Adding logout functionality to a website.
01:38:20Creating a handleLogout function as an asynchronous function with try-catch to handle errors.
Redirecting users to the home page upon logout and updating the UI to display login or sign up options.
Implementing error handling by setting an error state and displaying error messages to improve user experience.
✦
Setting up a protected route for an account page in React.
01:44:55Creating a protected route component and wrapping the account page within it.
Using React Router DOM and context for user authentication.
Successfully testing the protected route by logging in and out, with redirection and access based on authentication.
Future plans to integrate Firestore for cloud storage in Firebase and setting permissions for database access.
✦
Setting up Firestore in a Firebase project is demonstrated, with a focus on importing necessary components and initializing user data upon sign up.
01:50:05User-specific data, such as saved movies, is stored by creating a user file in the database with an email and an empty array for saved shows.
The ease of creating a backend in Firebase is highlighted, showcasing the process of adding new users and saving specific data for each user.
The segment emphasizes the simplicity and effectiveness of utilizing Firebase for backend operations.
✦
Setting up movie component with user authentication and Firebase functionalities.
01:54:38Creating movie ID reference using user email data.
Implementing save show function that updates document details in Firebase using array union.
Handling user login status to enable movie saving.
Addressing error alerts for unauthorized users and demonstrating functionality by refreshing the page and testing the save feature.
✦
Tutorial on logging in, saving movies, and displaying them in a user-specific account.
01:59:00Users can log in with various credentials, save favorite shows, and access them on their account page.
Creation of a new component for displaying saved shows and styling the account page with background images and overlays.
Emphasis on user interactivity and customization within the application interface.
✦
Managing shows in a database with 'save shows' component.
02:04:00Involves selecting rows, organizing show data, and rendering show information.
Importing necessary components, handling images, and utilizing hooks like useState and useEffect.
Accessing a Firebase Firestore database, updating documents, and using snapshots.
Importance of setting dependencies correctly and efficiently managing show data within the component.
✦
Implementing delete functionality, optional chaining for email changes, and mapping through saved shows data.
02:09:46Errors related to undefined properties are addressed.
Close icon added for deletion.
Setting up click events, passing IDs for deletion, and creating a delete function referencing the database.
Optional chaining used to access user email data for proper data handling and deletion functionality.
✦
Deleting an item from an array in Firebase using client-side handling.
02:13:42The function 'delete show' takes in an ID, filters out the unwanted ID from the array, and updates the database.
The process involves removing the ID from the client-side state and pushing the updated array back to Firebase.
Handling deletions on the client side is necessary due to Firebase's limitations.
Instructions on deploying the project using Firebase CLI tools are provided at the end of the segment.
✦
Deployment process to Firebase hosting for a React application.
02:18:47Initialization of Firebase, selection of existing project, creation of build folder, and compilation of the React application.
Steps involved in deploying the project, including running commands like 'firebase init' and 'yarn run build'.
Successful deployment of the project and access to live hosted content.
Encouragement for viewers to like the video, create a new user, save shows, and subscribe for more React-related content.
00:00hey what's up guys in this video i'm going
to show you how to create a react.js project
00:04styled with tailwind css something that you can
use on your very own portfolio to help you get a
00:09job as a junior front-end web developer so this is
what we're building today we're building a netflix
00:14clone okay but what's cool is we're gonna be using
firebase for our backend so we're gonna be able to
00:19create a new user with an email and password we're
gonna be able to sign in with that user and we're
00:24actually gonna be able to store user specific
data and how we're gonna do that is we're gonna
00:28be using firestore which is a cloud storage for
firebase okay and whenever we create a new account
00:33we're actually going to store this user into our
database that way we can store some specific data
00:38so this is the front end of our application today
like i said netflix here got a nice nav bar at the
00:43top any kind of a hero presentation banner image
here and down here we have a row component and
00:50we're going to be using the movie database api
okay we're going to be using a lot of really
00:53cool stuff in here like firebase um like i said
we're starting everything with tailwind we're
00:57gonna be using axios to make our api calls we're
gonna be using context api you state uh use hook
01:03a lot of really really cool things here in react
so notice how we hover over here we get a little
01:08button here to save a uh save the movie so it says
please sign in to save a show so let's go ahead
01:13and do that i'm gonna show you how it works let's
click on that sign up page and i'm just gonna say
01:17and test bob is this guy's name at email.com his
password is password you see it's not very safe
01:25so notice when we sign in we automatically get
redirected to the home page here and that's using
01:30react router dom and then let's go ahead and
click on our account page so we can see we have
01:34no movies saved here so let's go ahead and save a
couple movies we'll save see northman batman and
01:41this spider-man movie if we cruise back on over
to account you can now see that these movies are
01:46stored into our account so we can log out and log
back in the movies will still be there because our
01:52in our database firestore database using firebase
so let's go ahead and delete these and i'm going
01:57to show you how to build this from scratch
like i said using react.js and tailwind css
02:03so if you want to see how i built this you
build it along with me feel free to use it
02:08in your own portfolio so you can get a
job as a junior front-end web developer
02:12so let's go ahead and build this thing from
scratch i'm just going to drop that thing
02:16down here and all i am in here is um it's
just vs code which is a blank code editor
02:21and i've already created a file that i'm in this
netflix react.js i'm just going to bring that over
02:26so let's just go ahead and hit control back tick
button to open up our terminal we're going to
02:30create our react application so i'm going to say
yarn see create and then react dash app and i'm
02:36just going to hit the period there so it installs
it into our current directory that we're in
02:40so we're going to be building this with
tailwind so and that's the first thing that
02:44we're going to do so i'm going to go over
to tailwind css while this thing installs
02:49and like i said we're gonna have some protected
routes you guys which means i'll show you real
02:52quick we go to the account page notice we're not
signed in right now we go to the account page it
02:57should just bounces right back to the home page
so protected routes if a user is not authenticated
03:02be doing a lot of really really cool
things in here so in for tailwind there
03:06tell ncss.com go ahead and click on get started
we're going to click on framework guides
03:13and then going down here i'm
using the create racked app okay
03:16first thing it wants us to do to create our
react application so we've already done that
03:21next if you're using npm just copy that whole line
uh i'm using yarn so that's why i'm only going to
03:26copy this part of it here i'm just gonna say yarn
um add paste that in and this is next command here
03:34mpx there go ahead and copy that whole thing
there go ahead and hit that and this is going
03:39to create a tailwind config file there and this is
very important because the next step is actually
03:45copy this into the content array okay so that's
what we want right there and then we need to add
03:51this into our index.css so let's go ahead and
just replace all that boiler code with our with
03:57those styles there and that's all we need from
tailwind okay so next let's go ahead and install
04:06some dependencies that we're going to be using
for this project so and right there i just hit
04:09the command b button okay to to toggle our sidebar
here if you're wondering what i was doing there
04:14so like i said let's install our dependencies
for yarn add and i'm going to install axios
04:19we're using axios to make our api calls we'll be
using react router dom for our routing then we're
04:27going to be using firebase i'll go install that
and see go ahead and get those installing there's
04:31a couple more so and while those are installing
this app.css the app.test logo.svg the report
04:40web bottles in the setup test these are in the
source folder i'm going to go ahead and just
04:44delete those to kind of declutter a bit there and
we're only going to be working out of this source
04:50folder right there so we should just have the
app.js index.css and index.js so let's go to our
04:57package.json axios firebase required on perfect
so i forgot the other ones we're going to need um
05:04yarn add we're going to need react icons for this
portfolio or for this package here and we're also
05:09going to need uh we need tailwind scroll bar hide
okay so and what that's going to do basically um
05:17so we have this row and we don't want to show
the scroll bars so a tailwind doesn't have a
05:22class name directly to uh or natively to to
remove those so that's why we need that there
05:28so we got those two more packages in there done
with package.json so in this uh config file or
05:35sorry in the yeah in the config file what we
want to do to use that package is say require
05:41then we're going to put in here tailwind scroll
bar hide that's it right there perfect that's
05:47all we need to do for that there and what we do
need to do is uh add in i want to add some base
05:53styling here and i'm just going to bring over a um
i'm going to bring over a font that i'm going to
05:58be using you don't have to do this you can use
whatever font you like the the default font or
06:02if you want to go to google and bring one in i'm
going to paste one in there like that then this is
06:07about the only uh css i'm going to write but i'm
just going to say background color but background
06:14color and i'm going to give it a color of black
all zeroes there and then font family like i said
06:21we're going to be using lotto and then it's always
a good idea to give secondary fonts just in case
06:26the browser does not support that so that's
all we need to do in our index dot css file
06:32i'm going gonna close that there now let's
go ahead and start our server with yarn start
06:37now if you've already started your server and then
you start you installed tailwind while your server
06:42was already running then you're not gonna
see the tailwind styles go into effect so
06:47make sure you restart your server if you if it
feels already started so we should just have a
06:52blank screen here we have uh our errors here and
that's okay let's go and fix those so our index.js
06:58let's go and delete that report web vitals we're
getting those errors because we deleted those uh
07:04all those cluttered files so in our app.js we're
gonna delete that there and we're gonna leave
07:10this as an empty frag there perfect that's
what we want and if we type in here h1 hello
07:19we're not going to be able to see
this because we'll give us last name
07:22text white we should be able to see some text in
there perfect that's what we want right there you
07:26guys that's what we want perfect so let's go
ahead and um kind of start our layout of our
07:32project here so inside of our source folder okay
let's create another folder called components and
07:38this is where all of our components are gonna live
so let's create our nav bar component navbar.jsx
07:45js or jsx it doesn't matter i use jsx so i can use
my html snippets to kind of save a little bit time
07:52and then just a few uh plugins that
i'm going to be using in a vs code here
07:56in this build i recommend you get these as
well so go over this plugins tab so if you're
08:01using tailwind i highly highly recommend you use
this uh where is that tailwind css intellisense
08:08what that's going to do is while we're typing our
class names for tailwind it's going to give us
08:12suggestions and it helps it saves you so much
time when you're developing so definitely get
08:18that tailwind css intellisense also we're
going to be using this prettier function
08:24this prettier right here and what that's going
to do every time we save it's going to reformat
08:28our code and just keep everything looking nice and
neat then the third thing we're going to be using
08:34is the es7 react redux snippets and that way we
can generate functional and class-based components
08:39just with like literally a few characters so
we're going to save a lot of time and this is
08:44the react redux 7 shortcut right here r a f c e
is going to generate a functional component and
08:50that's all we have to do to generate functional
components here so for our navbar let's go ahead
08:56and import our navbar here so our app.js say nav
bar go ahead and hit enter there so auto imports
09:03another little trick here you guys if it didn't
import you can just press uh if you're selected
09:07at the end of the component you just hit ctrl
spacebar it's going to open up this little dialog
09:11box and it'll it'll usually always prompt you
if you want to automatically import something so
09:16just to save a little bit of time there
so inside our nav bar let's get started
09:21so inside our nav bar we're gonna have an h1
in here and this is gonna say netflix just like
09:30that perfect and then we're gonna have a div and
inside this div we're gonna have two buttons going
09:35to have a sign in i'm going to copy this down i'm
just hit shift alt then the down arrow that lets
09:41us copy things down or up that's what we're going
to say here so let's just give this a class name
09:46so we can see what we're doing so i'm going to
say text white first of all boom there we go now
09:54actually i'm going to leave that blank for now
because we're going to come back and install
09:59everything individually so we let's do this h1
first so we can actually see what we're doing so
10:03class name i'm going to say text red i'm going to
be the 600 and text this is going to be our size
10:10i want it to be see 4xl font bold there we go and
cursor not auto but pointer there we go i'm gonna
10:20string that down so you can see a little better
but that's what we want right there perfect and
10:25for the buttons here i'm gonna press this alt
button so we can actually type on multiple
10:29lines or actually i'm just going to style this
button here and i'll show you why so let's go
10:33ahead and give this button some styles and i'm
going to say for this button we want it to say
10:39fiji red 600 that's a background red of 600 the
numbers go from i believe 100 to 900 the higher
10:46the number the darker it is so if we said 200 for
example this would be almost like a pink color
10:51so like i said i'm going to leave this at 600
and then for padding p x i'm going to say uh c6
10:58it's just padding then p y for padding on
the top bottom i'm going to say two and
11:02the way tail one works for numbers four
is one rim okay so if we hover over this
11:07if i hover over this you see that dialog box pop
up that is the tailwind css intellisense plug-in
11:12that i was referring to so super powerful it
helps you a lot so as you can see four is one
11:18ram uh if you did eight that would be two ram
but and two would be uh just point five rim
11:24so that's what we're gonna do right there now you
can just say rounded to get some rounded corners
11:29cursor pointer this is how fast tailwind
is you guys you can style up button so fast
11:35just like that um without having a css file so
that's how we're going to do that there and then
11:40for this button here we'll say class name and i
want this to be text y and i'm actually gonna say
11:47margin or sorry padding right of four which is
one rim so but we want this display on the same
11:54line so let's give this a class here we'll say
flex items center then we're going to say justify
12:03justify between and then p4 so we want this
to stand out just like that that's perfect
12:11that is what we want right there you guys
everything's looking good um we're add a few
12:15more styles to this here so we want to give this
a z see 10. i'm just going to give this a z of
12:21100 i'm putting this in brackets because z-100
does not exist in tailwind and whatever we're
12:27going to put a value in tailwind we can replace it
with brackets and we can enter in our own value so
12:34i'm just going to enter that in just like so and
that is all we need to do i do want to make this
12:40positioned as absolute perfect
so let's have a look boom refresh
12:49oh what's going on oh i deleted
the wit full sorry about that
12:52there we go width full that's what we need there
perfect so i'm going to re adjust it here i want
12:59to make sure i'm in this video there for you
guys so there we go that is all we need to
13:03do for our nav bar for now at least and what we
want to do next let's open our sidebar back open
13:10and the way we're going to structure our our
application is we're going to have a home page
13:15right and this is going to be considered the
home page we're going to have a sign up page
13:19a sign in page and also a login page so four
pages and let's go ahead and create those here
13:26so inside of our source folder right we're going
to create another folder called pages and for now
13:32i'm going to create one page and i'm going to
call it home.jsx now i'm going to type rafce
13:37so we can get our functional component here
and let's go ahead and uh import this here so
13:43like i said we're going to be using react router
dom and so we can start using links and routes
13:47let's go ahead and configure react router dom
so let's go into an index.js i'm just going to
13:54select that and i'm going to replace this so
the way what we have to do with regular dom
13:57we actually have to surround our entire
application with browser browser router zoom
14:04just like that and go and import that now in some
in some builds you might see somebody just say
14:10something like this router that's fine too but
if you do that you have to go up here where you
14:15import and say browser router as router it
doesn't really make a difference uh people
14:20just do it because they think it's a little
bit cleaner so that's what we're doing there
14:26so let's go back into our app.js now we want
our nav bar to be displayed on all the pages
14:33no matter if it's a home page sign in or login
page doesn't matter we want it everywhere so
14:37i'm going to leave our nav bar at the top and
then i'm going to say routes okay and this is
14:42all for react router dom so we have routes and
then in here we're gonna have individual route
14:47and this is gonna be sorry not path but two or
path not two to the home page and then the element
14:52we want to display i'm gonna put this in curly
brackets we just wanna display the home so i'm
14:58close that out like so there we go so routes is
not defined or route so let's just go ahead and
15:04like i said before control space bar just
like that lets us auto import it we'll do
15:09this one as well perfect that's looking good
right there so what we're going to build now
15:16is our actual uh main component right there
at the top so let's go ahead and get started
15:22with that thing so inside our components
folder create a new sorry not a folder
15:28inside the components folder we're going to
create a new component i'm going to call it main
15:33dot jsx okay and r-a-f-c-e and we're going to
be doing a lot of things inside this component
15:38here we're going to be using axios you stay
and use effect all those hooks inside here
15:44but we'll auto import those here when they come so
let's go ahead i'm going to open up my um terminal
15:51here or sorry our console there so that way all
our developer tools we like to have the console
15:56open so we can use that to our advantage so inside
here let's do a few things so we're going to have
16:04we're going to have some state so i'm going to
say const open this up it's equal to use state
16:10it's gonna be an empty array because that's what
our that's what our our api call is gonna return
16:16so in here let's say movies and set movies
okay and then let's make our api call
16:23so before we make our api call now would be a
good time to get set up with our actual api key
16:29so i'm going to open this up a bit and we're going
to go is the movie database here now i'm already
16:35signed in if not go ahead and create account is
100 free you don't have to supply a credit card
16:42or anything like that just create a free
account and once you're signed in here
16:46just click on this button here go to profile
and settings sorry down here settings
16:53and then over here on the left we're going
to look for the api just right there perfect
16:58and then over here this is our api key now i'm
going to copy my api key don't use my my api key
17:05it's not going to work once i'm done recording
this i'm going to i'm going to close the account
17:09so make sure you get your own account and your
own api key so where are we going to put our
17:14api key so what we're going to have is a file
to keep everything nice and neat a request file
17:21they're going to have all of our endpoints so
inside our source folder we create another file
17:26and this is just going to be called requests.js
okay and in here i'm going to say const key
17:34equal to and this is going to be a string i'm just
going to paste it in there just like so and then
17:39next i'm just going to copy this over because
i already have all the endpoints that i want
17:43to use for this build and i'm going to just kind
of show you what we're doing so basically i put
17:49everything as an object in here and then we're
going to export this so we can use it outside
17:54of the um outside this file so export default
requests and these are the imports or imports
18:02or sorry endpoints right here that we're going
to be using and this is our key and all we did
18:07i put these in backticks that way we could use a
template literal otherwise you would just have to
18:12paste your key in there like that but to keep
things a little bit more organized and secure
18:18you just wrap everything in a template literal
just like that but make sure you have backticks so
18:24you can do use that functionality so if you want
you just grab these these are popular top-rated
18:29trending or upcoming if you want to cruise on over
here to the tmdb here um click on that developers
18:37we're gonna see if you wanna
make if you wanna find other um
18:40other endpoints you can just kind of cruise around
here and find them like try it out so this one's
18:45for a specific id get similar recommended get
latest now playing there's all kinds of things
18:51that you can do with this uh with this api so but
i have the one that i'm going to be using here
18:57so what we're going to do is go back into our
main okay and we need to import this import
19:04request from those from request there we go
perfect now let's go ahead and use axios to
19:13make our api call and what we're going to do
we're going to wrap this axios in a use effect
19:19that way we're only going to make a api call
whenever the component mounts whenever this uh
19:25whenever the page loads so we're going to add in
a dependency dependency right here otherwise your
19:30api will just making non-stop calls and it'll just
wear out your api you'll probably get banned so
19:35make sure you add that dependency array there so
what we're going to say is axios dot get then our
19:41url goes in here right and our url is from this
request so we're going to say requests dot and go
19:51in here we can say dot popular or request popular
or uh top rated whatever you like i'm just going
19:56to use this top one popular so that in here there
we are so request dot request popular let's return
20:05a promise so dot then and this is going to take in
a response here okay the arrow function response
20:14and we're going to set this to set movies so
our state there and we want to set this to
20:21response dot data and let's just leave that
like so and i'm going to console.log movies
20:28so we're making when our when our component
mounts we're going to make an api call
20:32okay and it's going to grab the data and store
it inside set movies and then we're going to
20:37console log it so we should be able to see it down
here so let's have a look oh we need to ah sorry
20:43we need to add our main here so let's go to
home there we go and inside here we'll just say
20:51main so let's go and import that there
we go leave that as a fragment there so
20:57see we got some errors here requests not defined
not fine that's fine so let's go into our main
21:04and so we have that we need to
and import the use state okay
21:11get that imported there we go perfect
now okay just didn't spell that right wes
21:19what what is it i misspelled this line 11
21:25requests
21:28and then requests there it is
21:34just add an extra s in there perfect okay that's
what it is you get hung up on these little things
21:40there okay so back i'm going to go back to our
main so now we're locking the movies here okay
21:47so this is what we're logging we're getting back
some data here so page results total pages now
21:52i actually don't care about any of these except
for the results so for the results what i want to
21:57do we can actually kind of um narrow this down
a little bit more i'm going to say dot results
22:03and if this updates again now you can see we only
see this results right here so we have a list of
22:0820 20 movies so what i only want to display one
movie at a time and we want this to constantly
22:16reload every time we uh refresh the page so this
is how we're going to do that here we're going
22:23to come over here we're going to use some plain
javascript on here it doesn't matter really where
22:26you put it as long as it is above this return kind
of in here somewhere so what i'm going to say is
22:31const movie okay plural right now i'm going to say
movies then open up there right here i'm going to
22:38say dot we're going to use floor okay it's going
to be math dot random times math or sorry movies
22:49dot length there we go and now instead of logging
movies means log movie so what this is doing
22:57is taking the movies and just
picking a random one each time
23:04from start to finish there so as you can see this
is the idea of the movie 69 542 if we refresh this
23:09it should change there we go now we're getting
a different id every time we refresh the page so
23:16that is what we want right there you guys that's
perfect now that we know we're getting data back
23:21and we know we're getting like correct that's what
we want we're getting a different movie every time
23:25now what we want to do is actually go ahead
and display some stuff on the page here
23:29i'm just going to shrink this
down so we can see a little better
23:33i'm going to bring this open there we go and so
let's go ahead and get to coding down here on jsex
23:38here so what i want to say this outer div let me
give this class name i'm going to say width full
23:45h i have my little cheat notes over here i can't
remember all of this styling right off the top my
23:50head so this just keep it going a little bit
faster here so then in here and we only want
23:56the image to be 550 pixels high okay so that's
what we're saying there 550 pixels now this next
24:02one we're going to class name we're going to say
width full h full perfect and then let's do our
24:09image in here okay so image now instead of this
alt tag kind of cool trick here instead of just
24:15putting the slash you know you always want to
have good alt tags not just because react will
24:19start throwing errors but it's also really really
great for seo you never want to have any blank
24:23alt tags so i'm going to replace replace those
quotes there with brackets and what we can say
24:29is um let's say movie okay movie dot uh title
if you look down here we cannot re let's see
24:40here i might have to use some optional chaining
there boom there we go so we're going to use
24:46this optional training that way we can reach
uh nested objects in our in our array here
24:52so this is what we're looking at the title down
here that's where that's coming from you can see
24:56it display right there so perfect now let's grab
our image now if you see our image down here we're
25:03looking for the backdrop path that is our file
path that's the image path but if you see that's
25:08just kind of like um that's not an entire url
path so let's go on over to our developers here
25:17for our api see what's going on the introduction
let's click on images and basically what this
25:24is saying is that you have to have a base url and
then you just add this to the base url so this is
25:30a full example here but this is actually the base
url right here this little part right here is a
25:35sizing right there and then this is the actual
endpoint so i'm just going to select that okay
25:44and i'm going to scroll this back down and now
that we have this i'm just going to put it in
25:49here and so inside the curly brackets we need some
back ticks okay so go ahead and paste it we're
25:54using the back ticks so i'm going to say original
for the sizing and this is actually a part of the
25:59movie database okay and then let's put a slash
and then this is why we use our back text we use
26:04our template literal again so the dollar sign and
then our curly brackets and then we can say movie
26:09or do our optional chaining okay and then
we're just gonna say backdrop that group
26:16backdrop underscore path now we should actually
see our image that's what we want there you guys
26:23that's cool right there so uh let's add
some styling we haven't really added any
26:27styling yet to it so let's go ahead and do that
for this image i'm gonna give it a class name let
26:31me say width full h full and what that's saying
is the full is just it's the same as saying width
26:36a hundred percent if you're say uh w dash screen
that would say with 100 viewport width so that's
26:43what the width full is and with screen whenever
we get to that so that's what we want right there
26:48but i'm going to add in object fit because right
now our aspect ratio gets all messed up so all we
26:54have to do is just say object fit and that fixes
everything man i love telling you guys this is oh
27:01something's not working here we need to add a
couple more things cover is actually what it
27:06is sorry this is how easy tailwind is you guys
no matter what size it is it's going to stay
27:12looking right there that there's going to be no
aspect ratio of distortion so perfect that's what
27:18we want now we actually going to want to add an
overlay over the image okay that's kind of black
27:23on the left and just kind of a gradient over
to the right and the way we're going to do that
27:27we're going to add another another div in here
and let's put it right here and nothing's going
27:33to go inside this div we're going to position
it absolute so we're just going to say absolute
27:40we'll say width full same height of 550 pixels
and again we're using these brackets so we can
27:46put in our own values it could be pixels rim
percentages uh degrees any type of custom input
27:53we can put inside these brackets and tailwind and
so we're going to use a bg gradient and this is
27:58how we add a gradient and tailwind so we'll say to
r for bg gradient to right and all we have to say
28:07is uh from dash black now we should get a nice
overlay look at that that's starting to look clean
28:14that's starting to look clean okay you guys
so let's add in this div right here with
28:18that information next so we've still got
a little bit more to do on this component
28:23so right here let's go down and for this div here
we're gonna have div and what we're going to have
28:30is let's see we're going to have the buttons
and then a couple p tags so for our button i'm
28:35just going to say button this one's going to say
play i'm going to copy that down this one's going
28:40to say we'll say watch watch later so what i'm
going to do i'm going to click right there and
28:45i'm going to press the alt button right and click
in another spot that way i can type in two spots
28:50at the same time so save some time there class
name and for these uh buttons here say border
28:59border or c border bg gray uh we'll say
300 text black border gray 300 py2 and px-5
29:15all right perfect now um on this one here actually
on this watch later i don't want a background so
29:24i'm just going to delete that and actually want
the text to be white on that button so i'm just
29:28going to change this one to white and then
i'm just going to give a little bit margin
29:34margin left 4 for one rim so it kind of slides
over a little bit now the this div in here um
29:42i forgot a div here i'm going to create another
div okay and so the div that contains these
29:47buttons i'm going to press the alt button
i can just slide that up and there okay
29:52let's save it so it's nice and formatted so
the button the div right here i'm going to add
29:58that we just created and this is going to contain
what i do this div right here is going to contain
30:06everything and then the button the container
we just did the div we just did just held
30:11those buttons so it's the outer div right there
i skipped over it so this div what we're going
30:16to say we want it to display absolute width full
top and then we're going to use our brackets again
30:22so we can this time use percentages top 20 percent
and then we'll say p 4 and then we're going to use
30:30a media query md for medium.p 8. and tailwind
is a mobile first design approach meaning all
30:39the styles that you enter in here are going to be
deployed applied on the smallest device going up
30:46and if you want to make any changes all you
can say is md so that means anything above the
30:52medium break point which you can see right there
768 pixels anything above 768 pixels apply this
30:59style specifically so they're small medium
large and it goes up the chain like that so
31:05that's what we want right there and in here we're
gonna have h1 and this h1 is going to be movie
31:12use the question mark for optional chaining and
then we're gonna say title so boom there it is
31:17that's what we want right there perfect all right
you guys i'm loving this smash that like button if
31:22you feel like you're getting some value out of
this i know you're going to get some value when
31:25we get to the firebase part so here we go let's do
text 3xl on all devices right then anything above
31:32the medium break point we want that text to shoot
up to 5 xl so as you can see this is 3xl and once
31:39we get up i believe it's 768 pixels so we see that
top right let's get up to 768 we should our tech
31:48should shoot up and boom there it goes perfect
so that's what we want right there you guys
31:54that's what we want and let's also say font
font bold like that that's nice there so
32:01this div here that is just holding our buttons i'm
gonna give it a class name and i'm just gonna say
32:05my four just to get a little bit of margin there
there we go now underneath the div that holds
32:11the buttons i'm gonna say p tag we're going to say
released and then in here we're going to say movie
32:19optional chaining release underscore date and
that's what we're grabbing right here perfect
32:26that's what we want right there and let's
give this class name we'll say text gray um
32:32400 then text sm and that's going to be for
small right there perfect next we want the
32:38little overview okay that's the overview just
a little quick information about the movie
32:44i'm gonna put that right below
it's gonna say movie dot overview
32:50okay and let's go ahead and style this this class
name we'll say width full and then i'm going to
32:57copy the rest of this over just to save some
time but i'm going to explain it to you guys
33:04so what we're saying with a hundred percent then
like i said anything above medium is going to be
33:09seven percent seventy percent for the max width
and then until we get to the large break point
33:14if we hover we see that's 10 24 pixels then it's
going to be a max width of 50 then up to xl which
33:20is 1280 we're gonna have a max width of 35 and
then just text gray 200 so as you can see we're
33:26on a small break point so it spans 100 of the
screen as we get larger here it kind of goes down
33:32less and less so that's what we want right there
now that's kind of a lot of text on the screen
33:38especially some of these are real long some of
them are a lot shorter but um we're going to use
33:43what's called truncating text and what that means
is kind of cut the the text short and just kind
33:48of add a few dots kind of like when you see like
a read more click here to read more or something
33:52like that so we don't want to show all this
information gets kind of jumbled up and that way
33:57if you get over here you'll just cut it off after
a certain number of characters and we can add in
34:02the the dots right there so the way we're going to
do that we're just using some javascript for that
34:08so we're going to come over here and we don't
actually have we can just uh comment that out
34:13so we don't need to see all this stuff in the
in the developer tools down there so what we're
34:18going to say we're going to const this is going
to be an arrow function so we'll say truncate
34:24truncate string okay this is going to take a few
values and take a string and also i'm going to
34:29say num you can say you can call it whatever you
like then in here what we're going to say is if
34:36string dot length is greater than the
number that we pass in then what we're
34:42going to want to do is return string dot slice
and in here what we're going to say is zero
34:50num and then we'll say replace it with
these dots else we just want to return
34:58the string okay so let's go ahead and save that in
those prettier formats everything so it looks nice
35:04and neat and to use this we're going to scroll
down and i'm just going to copy that i'm just
35:09going to cut it right and i'm leaving the curly
bracket so we can use our javascript in there and
35:14what we're going to say is we're going to run
this truncate string then you pass in our two
35:19values our two values of the string and also the
number so i'm going to paste in our string then
35:26our number for example if i put 20 you can notice
it only shows 20 characters but we're going to use
35:32150 for the character length and i think that is
going to be good right there so there we have it
35:38you guys we have finished that main component you
guys we've made it a good uh that was a good good
35:44accomplishment that we've made so far everything
is looking great smash the like button if you
35:47feel like you're getting value out of this so
let's go ahead and close that main dot js there
35:53the nav bar we're done with that for now for the
home let's leave this home open because next we
36:00can close this app.js close the app index.js
next what we're going to create is our rows
36:08so let's create our row component so command b
open up our our sidebar here in our components
36:16i'm going to create another file row.jsx our afc
is going to generate our functional component
36:25now the way we're going to be reusing the row
component right because right here upcoming
36:31row popular row trending row top rated this
is one component but we're passing through
36:37properties that's how we can reuse the component
so just under main here we're going to say row
36:44go ahead and auto import that perfect just like
that now in this row let's go back here let's
36:52pass through our properties first so we're gonna
have a title okay and this is gonna be a string
36:57this can be whatever we want we can like make
this first one i'm gonna say upcoming so up
37:03we'll say upcoming just like that and then
we're going to have something called fetch url
37:10because we're going to do all the data fetching
inside each row component that we're going to
37:14map through or each through each component they're
going to map through our our movies so what we're
37:21going to say here we need to actually import
our request remember so import requests from
37:29quests there we go and in here what we can say
is requests and let me show you we're saying
37:36request because that's the name of the object
dot and then we can just grab any one of these
37:42and we're gonna end up grabbing all of them so
for home request dot that and i'm just gonna paste
37:48that in and i'm just gonna copy this down a few
times just like that so this next one we can say
37:57popular okay just like that it should be one word
let's change that popular and then let's do uh
38:07trending and again we'll change these it needs
to be popular popular request popular quest
38:17trending and then we're gonna get the top
rated and horror there so this one's gonna be
38:26top rated
38:30top rated and then this last
one is going to be the horror
38:35there we go so let's look and see now uh
so we haven't actually added anything so
38:43in our row component let's go ahead and
accept our properties here so title and fetch
38:49fetch url perfect now inside of our we're
going to be doing a lot of stuff inside our
38:56row component but it's going to be worth it it's
going to look awesome whenever we're done so
39:00inside this row okay let's go ahead and i'm going
to leave this as an empty frag i'm going to add an
39:06h2 to start and inside this h2 is going to be
our title just like that so let's go ahead and
39:12give this some styling because it's over there
we just can't see it because it's black text so
39:17what we're going to say for this h2 and
i'm going to say text x white so we can
39:23start seeing our text and i'm going to
say font bold and then anything above um
39:31medium let's say text xl let's say p four
for a padding of a four rim so you can see
39:39these are all of our rows that we're going
to be using and let's go ahead and add some
39:44more info in here so we can get to our images so
underneath the h2 we're going to have another div
39:51and in here i'm going to give this class name
we're going to have a relative we're going to
39:55flex items center just like that perfect go ahead
and save that save that just like so perfect now
40:06inside here this next div here is going to be
our slider so i'm going to create another div
40:13and i'm going to give this an id of slider but
i'm going to put this inside curly brackets so i'm
40:18just going to put that in a string just like that
and i'm going to show you why i um i'm gonna show
40:23you why i did that here in just a minute here okay
so and let's go ahead and give some styling here
40:30um no let's go let's go in and i want to
show you let's go and move on about here so
40:35what we're going to do we're actually going to
map through all of our all of our movies so we
40:41actually need to make a request because right now
we don't have any data so we actually need to make
40:45a request inside of our row component and we're
going to do that right here just above the return
40:51so we're going to have uh you state right so
equal to the state and this is just going to be um
40:59empty object and basically this is going to be the
same what we did on the main so i'm going to run
41:02through this part so we're going to have movies
and set set movie okay and then we're gonna have
41:09our use effect and inside our use effects we're
gonna have our axios right so use effect and that
41:15use effect takes in an arrow function and again
let's add our dependency array but we're going
41:20to actually add in fetch url that way whenever the
url url changes the component will fire off again
41:29so in here axios go ahead and hit enter to make
sure that imports and what we're going to say
41:36is dot get and then here we put our url but we're
bringing in our url with our uh we can go ahead
41:42and close that with our state so right here
all we have to enter we're passing in fat url
41:48and that's the url grabbing so all we have to say
41:52is fetch u r l and that's actually gonna um be
the correct endpoint that we're looking for so
42:02sorry dot then okay and we're gonna get a
response but this goes inside an arrow function
42:08and person is set sorry set movies is what i want
to use set movies response dot and then remember
42:16we want to narrow it down so we're going to
use results and again if we just console.log
42:20this we'll say movies we should see this down
here you state got to import you state okay
42:28go so now looks like okay boom
there we go okay there we go
42:32that's what we want right there you guys perfect
so we should see we're uh console lugging on each
42:37of our rows here so we got five of these down
here so that's what we want right there perfect
42:43so let's go ahead and map through now we have
some data let's map through this stuff so we're
42:48going to say open up our curly brackets we say
movies dot map okay and it's going to say map each
42:54through one as an item and we're going to give
an id as well and sorry not curly brackets but
42:59princesses right there we just want to render out
a div just like that perfect and what we can do
43:10so inside this div here um let's have our images
i'm going to give this a class name so it kind
43:18of doesn't throw everything off the page and
so what we're going to say for this here i'm
43:22actually going to copy this over because it's
kind of a lot um this isn't necessarily a css
43:28tutorial but i just want to show you i'll explain
what i'm doing here so when we map through the
43:33data this is going to be what we're mapping
through the the this width right here is each
43:39movie so what we're saying is on small devices 160
pixels anything above the small bring point 200
43:46mediums will be 240 and then large 280. we want
this to be inline block cursor pointer whenever we
43:53hover we want to see a cursor then we want to be
relative because we're going to add some overlays
43:59on it relative then uh p 2 for the padding so i
hope that makes sense you guys now in here we're
44:06going to have an image tag and for our image we're
going to be using that same backdrop path right so
44:13let's use that same trip here for our alt tag so
here we can just say item dot title here we go
44:23refresh everything looking good so all right and
here now let's grab that same endpoint on our main
44:34so all i did was when you press ctrl p it
opens up this box and you can search for
44:38uh components or or files rather up in here
so that's what i did to open that up i had
44:44a few people asking me about the shortcuts i
use so i want to make sure i explain those to
44:49you guys so i'm going to grab here is that
right there we can go ahead and close that
44:55now for row let's open up some curly brackets and
remember to put our back ticks we use our template
45:00literal okay and instead of original this time
i'm going to use what it was recommending this w
45:07500 with 500 there so that's what i'm
going to use so we'll just say width 500
45:14and then in here we use the the dollar sign
our brackets for our template literal right
45:20and what we're gonna say is just item dot backdrop
underscore path like that perfect and uh let's go
45:29ahead and add some optional chaining just so we
can avoid uh any errors if we get any errors there
45:34so we'll do the same right there boom that way
we can avoid any problems before they occur
45:43so that's looking good you can see we're
now mapping through all of our images
45:46um we just have tons of images here and they're
not displayed how we want it but we are getting
45:51back data and it looks great so let's go on and
what i want to do is add a little hover effect on
45:57each of these hover and an overlay so we're gonna
put that see just below the image here and say div
46:06here and then let's give this a class name this
is gonna be our overlay so absolute wanna say top
46:12top zero left zero with full h full and then we're
gonna say we give it on hover unhover when i say
46:23vg black and then we're gonna say 80 percent
and i'm just going to open this up so you can
46:29see a little bit better and okay so background 80
opacity and otherwise we want opacity to be zero
46:39and we'll say text white and i think that should
be good right there perfect perfect now we need
46:45to do a few more things here so inside of
that right there um we also want to say here
46:52is our p tag and then here is going to be our
item optional training here dot title okay
46:59see if we can see anything nothing yet
here so let me make sure i get this right
47:04that's e0 on hover black absolute perfect now i
also want to add some styling to this image let's
47:11give that a place name i'm going to say width full
h auto then we want that to be displayed as block
47:18perfect that's what we want right there and now
absolute top 0 left zero with full full no hover e
47:29and also opacity zero and on hover
we gonna want the opacity to be
47:39to be 100 now that should look a little bit better
perfect so we can see our title in there as well
47:46we still don't have anything uh displaying
properly so we have our title in there we have our
47:49overlay so let's work on our p tag here give this
a class name and what we're going to say white
47:56space normal here and then we're going to say text
extra small okay then anything above medium break
48:02point want to say text small fi bold we're saying
flex justify center items center all right full
48:15right full and then text center so
tech center height is going to be 100
48:19which is hype full flex justify center item
center font bold and then some font sizing
48:26in there so let's go ahead and save that so
everything gets nice and formatted perfect
48:31that's what we want right there now let's add a
little heart okay so you can see his little heart
48:36and whenever we click this we
want it to change back and forth
48:41so let's go ahead and add those and
i'm just going to copy these over
48:46so what we're going to be using here
we're going to be using react icons so
48:50what we're going to say import react icons here
so import curly brackets and these are the two
48:55icons we're using fa heart fa regular heart and
you can import this from react icons and then you
49:02can't just stop there you have to add this little
pretext so whenever you're importing an icon you
49:07just add that text afterwards there otherwise
you'll get an error and it won't work properly
49:12so what we're going to use is f a heart
here and let's add some more state const
49:22and we'll say like whoa like
set like equal to use state
49:29say false there we go and in here okay
this is gonna be another p tag in here
49:36inside of our overlay okay and what we're
gonna say is just uh we're gonna be using uh
49:43ternary operator here and with say if like is
true then what we're going to display is this icon
49:52else we're going to say fa sorry the
other icon which is whoa but it's fa
50:00reg part i believe perfect uh-huh so perfect you
see the hearts in there let's get them positioned
50:08correctly so i'm just gonna click i'm gonna
drop that some click hold my alt button down so
50:13i can type on multiple places here and what we're
going to say is i'm going to give it a class name
50:18don't need to do any sizing here yet class name
absolute and we're say top 4 left 4 and then text
50:27gray and we'll say say 300 see how that looks
boom so there we go that's what we want right
50:33there and then we'll come back i know we set
that state but we're not going to use that
50:39until we incorporate firebase so everything
is looking good so far and uh let's go ahead
50:46and see just a quick recap here so we have our
data that we're bringing in we're passing in
50:52our title and our fetch url there so we're making
our api call inside of this use effect using
50:58axios we're grabbing the fetch url there and
then we're putting this into our movies state
51:05and then there we're just mapping through right
here we're just mapping through each uh movie
51:11or each piece of our state but what i want to do
is just kind of simplify things instead of having
51:16all this um all this code here we can refine
this a bit more and we'll map through another
51:21component we'll just call it a movie component
so let's create a new file in the components
51:25folder called movie.jsx go ahead and hit save
rafc to get our functional component there
51:33then all i'm going to do this div here i'm just
going to select that i'm going to cut it okay and
51:40in here i'm just going to say movie just like that
and then in here i can say item equal to item or
51:48whatever you want to call it but i'm just going to
pass in all of our data so in here i'm just going
51:53to replace this i'm just going to paste what we
copied and uh in here we just have to take in item
52:02and that should be all we need to do so movie's
not defined we probably just didn't import it
52:08boom control spacebar let's import it and
we're gonna go ahead and give this a key
52:12because react does like uh keys so
key id that way it has a unique key so
52:20it's not defined that's because we moved
everything over so um that's okay let's just uh
52:27we'll cut that out and put it over here
and we'll have to import or use state
52:36there we go and let's go back here and we'll just
cut these out and just move that over on over here
52:41there we go that should take care of all of
our errors let's see let's refresh perfect
52:47that's looking good don't worry about that
one we'll come back and fix that later on
52:51so looking good we still need to go back to our
row so we can actually uh display this properly so
52:58but i think that's it for the movie component okay
so i'm going to drop that sidebar back down and
53:02we can close that component for now now for our
row component what we do want to do is um add in
53:10our styling for our row so this is our id slider
here this surrounds our roast apparent container
53:15so what we're going to say is just give this
a class name and we're going to say for our id
53:20we're going to say width full height full object
sorry overflow overflow x scroll there it is okay
53:33now white space no wrap we don't often see that
there scroll smooth because we want everything to
53:39scroll nice and smooth and then we're going to
say scroll bar hide just like that and i think
53:46that's all we're going to need to put we are
going to need to make this relative actually
53:52everything will display properly and that boom
there we go look at that guys smash that like
53:56button whoa smash that like button you guys
this is looking good right here look at that
54:01so let's open this up boom look at that netflix
you guys look at that and i'm scrolling on my
54:06trackpad how awesome is that dude look at that
nice hover effect we have the title there we're
54:12gonna be able to save this into our database here
in just a little bit when we connect firebase
54:15that is looking awesome you guys but one thing
you know i'm on a track pad right now so i can
54:19slide through here but if i'm on a desktop using a
mouse i don't have any way to to cycle through the
54:24movies so we're gonna add these react icons and
the ability to slide through our rows so let's
54:32drop this back down okay and what we're gonna
do was leave it like that and drop it down a
54:38little bit further and we're going to use react
icons again to add in our um add in our icons
54:44over here so on our row we saw a row let's add
in some more icons we're going to be using so
54:51we'll see import yeah from react
icons and in here what we're going
54:58to be using i'm going to copy them over so
md chevron left okay then md chevron right
55:06there we go and remember like i said you just
add that pretext after here because right now
55:10we're going to get an error if we just add slash
md that's all we need to do just right there so
55:16for these buttons i'm going to put them outside
of this slider container there that slider diff
55:24so i'm going to paste that just like right there
and this one is going to go on the bottom side
55:31now i'm going to type hold my alt
button so i can type it a couple places
55:35now we actually have access to a size property
and this is with the react icons package
55:40and i'm going to say size 40 just like that now
let's give some class names here so class name
55:47again we're styling both of these here at the same
time and what we're going to say is a bg white
55:52okay we want rounded full this is going to give a
nice full little round button boom just like that
56:00rounded full we'll have absolute the opacity
by default i want to be 50 and then on hover
56:09opacity um let's say 100 i
believe would be good and then um
56:19what we also want to do also when i do over here
when i say sorry uh still need type two places
56:27cursor pointer cursor pointer and
z10 so he's always on top there we go
56:35now so we actually want these to be hidden and
then only show whenever we hover on the row
56:42and where are we at here i'm going to say
just real quick so we can say hidden okay
56:50and then we only want these to show whenever
we hover on the row so the way we do that
56:54to have these show without hovering on
them specifically but we want them to help
56:57to show whenever we hover over the parent
div so we just need to add to this right here
57:02this parent div we're just going to add
group just like that then we can go into our
57:12right here we can say group
57:17then hover and we'll just show uh block i believe
should be good or flex everyone boom so that is
57:26what we want right there let's do the same thing
group hover block i'm gonna put that right there
57:33so now we cannot see any of the icons now we hover
on the row you now see the icon showing up that's
57:41perfect right there so let's go over here for
this bottom icon with full boom there we go bg
57:50so we need this one to show on
the right side so let's just say
57:57right zero and this one needs to be left
58:05left zero let's have a look
58:08boom there we go now up this needs to be
the right button no one's turned around
58:14there we go i thought i fixed that there we go
all right how are we looking look at that you guys
58:20now we can just oh we got to hook them up though
right so how do we actually scroll through these
58:25things whenever whenever we click on the button
so we're going to use some javascript for that
58:29so what we're going to use we're going to put
that right here we're actually just type over
58:33that we don't need to console.log that anymore
and what we're going to say is let's see const
58:39and we'll say slider or let's see let's define
we have two functions a slide left and a slide
58:45right and they're going to be arrow functions so
we're going to say slide left they're not going
58:50to take in any values here and in here we have
to say we're going to be using constri to define
58:55our our slider we're going to grab it by the
id so we're going to say var slider equal to
59:01document.getelement by id and we're grabbing
the slider here okay and then in here we'll say
59:10var um slider yes there we go slider equal to
scroll left sorry slider dot scroll left apologies
59:23dot scroll left equal to slider dot roll left
minus 500 so let's go and save that and we're
59:33going to copy this thing down and we'll just
use the same thing but we'll say slide right
59:39and then even though we're sliding right
we're going to leave all of this the same
59:42except for this minus we're going to change that
to positive right there and then let's go ahead
59:47and hook this up so slide left and slide
right are the two functions we want to run
59:53so on the to slide left we're going to say on
click we want to run the slide left okay then
01:00:00down here on click we want to run slide right or
it's capitalized so let's go ahead and save this
01:00:09let's see if it works look at that you guys boom
everything is looking clean all our rows here
01:00:15and that's gonna that that's gonna be a problem
so i just forgot about this actually this kind
01:00:19of stunt me here and i had to ask a friend to
help me out with this so basically whenever
01:00:23we hit the to slide the row our first row is
the only the only row that slides and that's
01:00:28because we don't have any unique ids to defer for
react to determine which row we're referring to
01:00:34so the way we're going to change that let's go
back into our home right and in here i'm going
01:00:40to add i'm going to click alt here i'm going to
type multiple lines what i'm just going to say
01:00:45you can say whatever you like i'm just going
to say row id we want to give this a unique
01:00:49uh a unique number there unique key so i'm
just going to say one this one's gonna be two
01:00:54three four and five as long as they're unique
that's all we need but this row id we're gonna
01:01:00hold on to that okay then back over to this
row we need to so we're passing that in as a
01:01:05property so we need to bring that in and we're
gonna bring it in right here there we go and
01:01:12then we actually need to add this here so slider
plus row id and this is what it's grabbing okay
01:01:22and then we're to add it in
01:01:25right on our row right here and that is why we
wrap this in curly brackets okay so now give
01:01:35it a save when we scroll through everything is
working properly dude smash that like button
01:01:41look at this we have a full ui netflix completed
in probably about maybe an hour and a half i'm not
01:01:47sure how long it's been right around an hour look
at that we've completed the front end build of
01:01:51netflix using rack.js and tailwind css so are you
ready to connect the back end we're going to start
01:01:56hooking up firebase now is the time so let's move
on to firebase we're going to be using context for
01:02:03our api managing our state see if a user is logged
in or not so everything's looking good smash the
01:02:08like button you guys and subscribe to the channel
if you haven't already i'd appreciate that
01:02:13so what we're gonna add next is uh
firebase right so let's cruise on over
01:02:20we can actually probably just close
out this tmdb stuff let's go to
01:02:23firebase.google.com we don't
need to rest that stuff there
01:02:32we're gonna click on get started okay you do
need a google account for this don't worry
01:02:37about these other projects but it is for you
guys as long as you stand to the limit which
01:02:42we will be so what we're gonna say here is
um here's the name of the project netflix
01:02:47i'm gonna say dash react yt for youtube go
ahead and start now we don't need to use google
01:02:53analytics for this don't worry about that now
what we're gonna need to do is create a firebase
01:02:59a firebase file here so inside the in the source
folder new file firebase firebase.js some people
01:03:09call it firebase.config whatever it's always a
little firebase file on there it's going to do
01:03:15okay so it is ready boom there we go so this is
our project right here i'm gonna open that up a
01:03:20bit and what you see right here this page
right here is just a console for firebase
01:03:24so what we wanna do we're gonna be working with
uh authentication but before we do that we need to
01:03:29connect this project to our application here our
application to this project here in firebase so
01:03:34this is a web project here if you're using
apple ios android like i said we're using
01:03:39the web so let's do that here wants us to name
it again netflix netflix youtube just like that
01:03:46don't worry about the hosting we're gonna
come back and do that here a little bit later
01:03:50so let's go ahead and get started boom that's
all we need look at this so mpmi install firebase
01:03:55we've already installed firebase but if you hadn't
go ahead and run that i'm using yarn so to say
01:04:00yarn add firebase npmi firebase if you're using
npm so next what we can do is just copy this okay
01:04:08we're going to paste that inside of
our firebase folder just like that
01:04:13so now you see again you guys create your own
account with firebase don't use any of my keys
01:04:19i'm going to put this i'm going to put this
project in the description below a link to my
01:04:23github so feel free to clone it if you want to use
everything that's fine but if you just clone it
01:04:28and install the dependencies and hit start it's
not going to work the front end's going to work
01:04:32but firebase will not work because i'm deleting
all of my keys after this so please get your own
01:04:37but and since we're going to deploy this after the
build since we're going to deploy it we don't want
01:04:42any of our private uh keys out in the public so
what we're going to do we're going to hide all
01:04:45these in a env file and um let's go ahead and
do that right now okay so i'm going to create
01:04:51a new file and this is outside the source folder
okay this is just in our main main uh folder here
01:04:57say dot env and what i'm going to do i'm
actually going to just uh copy this over so
01:05:03it kind of saves some time save some time typing
here but don't worry about these keys they're not
01:05:09going to work either just get rid of those but
what do you want to type here what's important
01:05:17at least is react all caps here react underscore
app underscore firebase api key and then we're
01:05:24going to just kind of go down the list so what
i'm going to do i'm just going to grab this here
01:05:30so i'm just going to grab that copy and
we're going to paste it here as the api
01:05:34key does not need to be in quotes
it won't work if it's in quotes it's
01:05:37not a string here in this env file this is going
to be the auth domain next is the project id
01:05:46after that we're looking for storage bucket
01:05:54message sender id
01:06:00and the app id so that's what we want to do
there now to have access to these let's go
01:06:04back to firebase and what we're going to say get
rid of all this here we're going to say process
01:06:11dot env then we're looking for what
it is process.env react underscore app
01:06:21app underscore firebase what i call it
api key in fact i'm going to go ahead and
01:06:35copy that over
01:06:40don't worry i'm just pasting it here so i
can so i can copy it i'm going to delete
01:06:43it here in a minute but what we want to say
here i'm just going to copy this actually
01:06:47this domain though let's
just delete all these here
01:06:55boom there we go this is worth
the wait you guys i promise you
01:06:59you don't want to you definitely don't want to
uh leave these codes out for the world to see so
01:07:06definitely recommend adding in the the env file
here so just hold it all again so we can type
01:07:10on multiple lines here and we'll say process dot
e and v dot okay and now we've already got that
01:07:15top one this one's to be auth domain there
we go comma and we're gonna grab the project
01:07:22id go ahead and do that there the storage
bucket boom there we go this message ascender
01:07:34and this message app right there boom all right
so let's go and get rid of that unsightly perfect
01:07:40so that is what we want right there you guys
um you need to restart your server once you
01:07:45do the emv file so make sure you restart your
server otherwise you're gonna get lots of errors
01:07:50so and nothing's gonna work properly so now
that we have our server restarted perfect okay
01:07:57so we're not actually connecting far we
are connected firebase but we haven't
01:08:00added authentication or anything else and we're
going to do that we're actually going to do
01:08:04that right now so if you're ready to get started
with authentication we're gonna be using context
01:08:11api okay context api with uh with firebase
here to add in uh all of our state to see
01:08:18if a user is logged in or not so what we're
gonna do next is continue to the console okay
01:08:24and let's click on authentication
and now we can just click get started
01:08:30and here there's all different ways you can
be authenticated using firebase i have another
01:08:34video put in the description below if you want to
see i did a video on how to sign in with google
01:08:38you can sign in with pop-up or redirect to google
really really cool stuff i'll put a link in the
01:08:42description but for this uh build we're going
to use email and password just build my drink
01:08:47so enable save there we go and that is all we
need to do for that so as you can see here we
01:08:53have a blank table no users we haven't created any
users yet so what we need to do is actually add in
01:09:01and i'm going to show you how to do this
we're going to cruise over to the docs here
01:09:04and say build and we're looking at authentication
okay you click down here web now get started
01:09:12we want to import the sdk software development
kits here for us so we can do is just actually
01:09:18copy this and we're going to import it actually
says right here add sdks for firebase products
01:09:22you want to use we want to use authentication so
that's the authentication one we're going to use
01:09:28and then we need to add this here at the
bottom perfect but we actually need to export
01:09:36this here because we're going to be using this
outside of this file and that's what we're going
01:09:41to do right now we're going to create a context
folder so let's go over here in a source folder
01:09:46and create another directory here called context
and inside context we're going to create a folder
01:09:53called say auth context dot js perfect that's
what we want to do right there now there's a lot
01:10:03of stuff we're going to use in this file let's
go ahead and get it uh let's go ahead and get
01:10:09it set up for now so we're going to import a few
things from react we're going to grab the create
01:10:14context okay let me grab use context we're going
to grab use effect we're also going to be using
01:10:20the use state okay so first we have to create
our context so we're going to say constoth.com
01:10:31equal to create context yeah boom there
we go perfect and then in here what we're
01:10:36going to say is export function this
is going to be our context right auth
01:10:42context provider it's going
to take in some children
01:10:49okay and down here we're going to return
01:10:53and what we're going to return here the
bottom here see auth context dot provider
01:11:02return children and this is gonna have some values
in it but we're gonna come back later and uh edit
01:11:08that add that in later so what we need to do also
kind of wrap everything in the context provider
01:11:16first we need to export this export another
function and in here we're going to user auth
01:11:27return use context off the contact perfect so the
way context works we actually have to wrap our
01:11:36entire application so i'm gonna go to our app.js
and um i do want to include the navbar in here
01:11:43because we want our navbar our component needs to
have access to the to our contacts because we're
01:11:49going to be able to conditional render our buttons
whether you log in or log out whether or not a uh
01:11:54user is logged in so auth context provider boom
just like that and again we want everything to be
01:12:02in there so all just slide it up there save
it so it gets all formatted nice and pretty
01:12:07perfect so now our context is set up so inside our
context is where all of our logic is going to be
01:12:14for signing in and out of accounts um creating
new accounts an on off state change to see if
01:12:19the user is currently logged in or not all
that is going to be inside of this context
01:12:24and what we're going to need inside of here
we're going to need some stuff from firebase
01:12:29we're going to import so from
firebase we're going to need this uh
01:12:33auth right there so let's grab that auth from
firebase there we go and then from firebase
01:12:41but this isn't from the firebase file but
from the firebase dependency that we sold
01:12:48firebase slash off there we go and in here we're
going to need a few things we're going to need
01:12:55the um we're going to create
a new user with email password
01:13:00so you create new user email and password and be
able to sign in new email with email and password
01:13:06we're going to need the assign out method and
we're going to need on auth state changed so
01:13:15that's all we're going to need for now and we're
actually going to put those in here there we go
01:13:23so first off we're going to need some state okay
so open up our brackets here equal to use state
01:13:30and we're going to set this to an object not a
string and we'll have user set user there we go
01:13:39now first let's do the sign up so what we're
gonna do is sign up whereas we're gonna need
01:13:43a create a user with an email and password
so let's do function i'm going to call this
01:13:53sign up there we go and this is going to take in
email and password right there we go and inside
01:13:59here we want to return the great user with email
and password and we're going to need auth email
01:14:08password that's all we need to do but we actually
need to pass this through remember this is going
01:14:12to take a value we don't have that in there yet so
value and we need to throw all the things we want
01:14:18available to all the other components which is
the sign up we're also going to want access to
01:14:25the user state just like that let's go ahead and
save and gets nice and formatted for us so that's
01:14:31looking pretty good right there now that's a sign
up function let's go ahead and also add a sign out
01:14:37so it's a function and this is going to be log log
out there we go and in here we just want to return
01:14:47sign out and let's do a sign in as well so we have
signed up log out and this is going to be sign in
01:14:56we'll say log in email password we say return sign
in with email and password we need to grab auth
01:15:08from firebase auth and then email password then
also we need to do our on off state change i'm
01:15:15going to keep that at the bottom here so function
and that actually let's wrap this in a use effect
01:15:21so use effect that way it's only going to
run it's going to check once uh whenever
01:15:24the component mounts to see if a user is logged
in or not and we're going to say const on sub
01:15:31scribe okay equals to on auth state changed and
we need the auth and then we're going to have an
01:15:38arrow function here and this is going to take
in the current user okay this is going to set
01:15:46user to current user okay then down here
we're going to return an arrow function
01:15:56to uh unsubscribe it's a method go ahead and save
that i don't see any errors that's a miracle you
01:16:04guys so go ahead and save that now we have to pass
these as values in to our auth context provider
01:16:12so sign up um log in and then we have log out and
i believe that's all we're going to need it's all
01:16:25we need for now so everything is looking good make
sure we don't have any errors come back and fix
01:16:31those that's not a big deal look everything is
looking nice so now we have all of our firebase
01:16:37connected we don't have a sign in page yet so
let's go ahead and uh let's go ahead and create
01:16:43our our sign in page or sign up page so let's do
that first here so for our pages what we want here
01:16:54login.jsx rafc is going to get our functional
component i'm going to go ahead and create our
01:16:59sign up dot jsx and let's do also our
account.jsx boom there we go perfect
01:17:07so for our login page let's go
ahead and get our all of our sorry
01:17:16rafce there now our afce perfect
go ahead and close that down
01:17:25so for our app let's create some routes
too so route path and we want one for login
01:17:33and this is going to be
element i'm going to display
01:17:36the login element close that off
and again we want to do this for
01:17:43sign up this is going to be the sign up component
then also we want to have a route path to account
01:17:58go
01:18:00boom whoa not md account tree
that's not what we want right there
01:18:07okay perfect now we need to import this
does not want to okay that's cool it's
01:18:15not one to import for some reason no big deal
we'll go ahead and import account from pages
01:18:24account there we go all right perfect so go
ahead and close that everything looks good
01:18:28there we have sign in login you know what let's
go ahead and go to our nav bar and kind of create
01:18:34some routes here so on this sign up button go
ahead and add let's do this too our netflix
01:18:40button our netflix logo we want a link to be able
to sign in so we want this to run to our home page
01:18:50shove that up there go and save and for this down
here link is not fine that's right we'll link to
01:19:01link to and this button we want
to have to log in there we go
01:19:11and this one here is going to be linked to
01:19:16sign up perfect
01:19:24all right let's go ahead and import
that link there and everything is
01:19:30looking nice if we hover on this see we
navigate to the sign up to the login page
01:19:35there we go and back to the home page that's what
we want right there so let's close this close the
01:19:41app.js close this emv file don't need firebase
don't need the row don't need that home either
01:19:48so inside of our sign up um inside of our sign
up component let's go ahead and create that there
01:19:57so what do we want to do here let's go ahead
and say class name will say width width full
01:20:05h screen there we go i actually want to wrap this
side fragment just like that like using those
01:20:16so that's going to go up in there perfect now
for our background stretch out over here for my
01:20:21knees sorry for my background i actually want
to use uh the netflix background so let's just
01:20:26cruise on over to netflix and i'm just going to
right click here and just say copy image address
01:20:33i'm gonna leave that open for now in case we
need it so for our image image just give it a
01:20:40little slash there and i'm just gonna paste that
in okay boom there we go looking good now let's
01:20:48give this some styling okay so class name and
actually don't want it to be displayed at all
01:20:52on on on mobile devices so i'm gonna say hidden
then anything above small we want to display block
01:20:58absolute with full right full object cover
okay and that's all we need to do take up the
01:21:06full width and height of the screen and i want an
overlay on this thing okay so div and in this div
01:21:13let's give a class name so we can add in overlay
to be absolute and then for overlay you see bg
01:21:24see if we need that b g black we'll say 60 for 60
cent percent opacity i'm just use fixed instead
01:21:33top top zero left left zero and um with full h
screen and that's saying h screen remember i 100
01:21:46viewport heights that's looking good right there
on smaller devices it should just be black boom
01:21:51there you go looking clean yeah i like that i
like that all right so below that div next what
01:21:57we're gonna have so we're gonna have another
div here and this one's gonna be class name
01:22:03we're say fixed okay with full with full um
e x four so padding on the x axis of four p y
01:22:13twenty four then z fifty z index of
fifty now we want to have an overlay
01:22:20see a little overlay over our form just like
that and then we scroll down it's just going
01:22:25to be a form on a black background so let's do
that right now in here and so i have a div here
01:22:32and this is going to be a class name we'll say
max width and let's open up our brackets we can
01:22:37put some custom values in there i'm going
to say this one's going to be 450 pixels
01:22:42height of 600 600 pixels there and now
we're going to say mx auto bg black
01:22:5175 75 and then everything inside text white
perfect that's what we want right there you guys
01:22:59and then let's have another div in here
let's go ahead and save so it gets all nice
01:23:04then class name and this is going to be a max
max width of 320 pixels what i want mx auto p
01:23:15y 16 there we go now let's have our h1 in here
we assign up save perfect that's what we want
01:23:26right there let's go ahead and style this thing
i'm going to say class name text 3xl font bold
01:23:32smash the like button if you like tailwind if this
is your first time using tailwind let me know what
01:23:36you think of it and in the comments below like i
know you're saving a lot of time using tailwind
01:23:40especially uh especially once you get
used to all the styling it's incredible
01:23:45so under the h1 uh we're actually gonna have our
form itself right and so our form we're gonna
01:23:50have two inputs and a button we're not gonna
be using any labels and we don't need the form
01:23:56action so we're just gonna have an input and this
is gonna be email okay and we don't need any name
01:24:04or id or anything like that and
then input it's gonna be type
01:24:10password there we go don't need that let's
just add a placeholder that says password
01:24:21and placeholder email just like that and we're
getting some errors down here show auto we can
01:24:27do auto complete i guess it wants us to do
that autocomplete and we'll just say email
01:24:35and anything else password grant password so
auto you don't have to do this i'm just trying
01:24:43to minimize some of those alerts down there so
it wants us to say current password there we go
01:24:51all right just some recommendations here should
refresh that looking good okay and then i don't
01:24:58know why i moved that one not the other one that's
cool but let's do a button that says sign up okay
01:25:04and let's go ahead and style the button here and
for the button the styling is gonna be pretty
01:25:08easy last name bg red and we're gonna use 600 p
y 3 and we want a margin y of six uh rounded and
01:25:17font bold let's see how that goes there we go
perfect perfect now um let's see here for our form
01:25:29let's give our form some styling here
so class name we're gonna say with full
01:25:33flex flex column and then py4 and next let's grab
on to perfect and nice okay a styling here so um
01:25:45add the styling at the same time again just
hold alt and then we can type multiple places
01:25:48here class name now for our inputs i'm
just gonna say p dash three padding three
01:25:53my two so we have a margin of 0.5 ram on the
top and bottom there that's looking pretty
01:25:58good already off the bat there so we'll
just say vg gray we'll say 600 pounded
01:26:09round in
01:26:12i might even lighten that up just
a bit i actually had it darker but
01:26:20yeah i'll leave it like that yeah with
that that's looking good right there
01:26:24uh dang look at that looking good okay so what
we want to add just a couple p tags down here
01:26:32we'll be done with the form then we'll hook
everything up so it's working uh working properly
01:26:36so inside of the form just below this button
here what i want to add is a div here and inside
01:26:43this div we're going to have a p tag and we're
going to have an input of check box there we go
01:26:50and again let's just get rid
of this and we'll just say
01:26:55remember remember me like that go and then also
we're going to have another p tag that says um
01:27:06uh need help there we go perfect perfect okay
and then we'll say class name and this is for
01:27:17right below we'll say margin uh sorry flex then
item center is all we need flex go by between
01:27:31okay perfect perfect now on this here let's just
give class name we'll say uh margin right two
01:27:38there we go all right looking good look at that
look at that nice and we can change the color
01:27:45there yeah let's change this text here we can drop
down the text a little bit so i'm center there
01:27:51uh text small and text gray 600 there we go
perfect looks good right there now we can also add
01:28:02just this text down here artery already subscribe
to netflix then click here to sign in okay and
01:28:09we're gonna put that just below here and what
we're gonna say is let's actually give this a span
01:28:15okay already um subscribed to netflix
01:28:26sign in okay and that looks good and
we'll just give this class name um py4
01:28:37last name text gray 600. let's see
how that looks right perfect and
01:28:46i have a sign in what we can
just say just give this a link to
01:28:54log in just right there boom and we'll
just move that up a notch go ahead and save
01:29:00link okay let's import that boom how about
that damn look at that looks nice man
01:29:07nice there we go we can give this a little
more padding if you want that looks good though
01:29:10we always give this a little bit more um a
little more padding so let's see here why
01:29:19you see how that looks boom there we go man
looking nice all right you guys so that is
01:29:24our sign up component let's just go ahead and copy
all of this so just copy that div right there all
01:29:30the way up and let's just paste that in here now
we're going to go through change a few things so
01:29:38let's just first get that imported okay now
let's cruise over the sign in page okay now
01:29:44we're on sign in page let's update this because
really it's going to be most all of the same code
01:29:49just a little bit different so sign in email
password is going to stay the same uh we could
01:29:55probably change this button to sign in remember
me need help already subscribed we'll say hey
01:30:02um new to netflix and we're going
to redirect to the site well
01:30:11if you're new to netflix then you
want to sign up we'll just click here
01:30:19new to netflix sign up should take us
to the signing page boom there we go
01:30:24with that looking clean all right so how do
we actually sign in to netflix well we've
01:30:30already done the hard part which is adding in our
context right so really all we need to do now is
01:30:36start with our sign up here all we need to do and
actually i'm going to console.log something here
01:30:43right and here i'm just going to say
tell you what let's do it in our navbar
01:30:51navbar we'll come back in a minute so first
sign up let's go ahead and log in okay and
01:30:56i'm gonna go over here to our user table we have
no users in there so let's go ahead and do this
01:31:03so here we want to import and this is our sign
up okay we're going to import the user auth from
01:31:14context flash auth context there we go now in
pier what we're gonna have we're gonna have some
01:31:20state we have a lot of state and then also we need
our context as well so let's just i'm sorry here
01:31:26cons user equal to user auth okay just like that
perfect and we're also going to want the sign
01:31:37up that's not what we want we
want there we're looking for
01:31:41yeah sign up from user so go ahead and
make sure that's what we're looking for
01:31:51uh so let's go back here and it
finished adding our state in here
01:31:58that's what we want though perfect right there
so let's add our state we're gonna have cons
01:32:02and then we're gonna have um let me use state
here it's gonna and empty to uh sorry empty
01:32:08uh string not object and let's go ahead and copy
that down so for this one it's going to be email
01:32:13and set email okay because we want to take
the values that the user enters and password
01:32:20and set password okay so now and we're gonna
have a handle submit so const handle submit
01:32:27or whatever you'd like to call it doesn't
really matter that's what i'm calling it here
01:32:31and in here this is actually gonna be a
asynchronous function here and we don't want the
01:32:35form to be submitted so we're gonna prevent the
default so make sure you pass in that event there
01:32:39event dot prevent default we don't want
the page to be submitted every time we
01:32:46submit our form let's import the use date there
we go sign up here and what we want to do this is
01:32:54actually going to be an asynchronous function okay
so we'll say async here and then here we're going
01:32:59to say try catch block right so in here catch
error and we'll just console.log any error then
01:33:08here we want to await and we're already bringing
in the sign up function and that's what we want
01:33:14sign up and what we just need is the email and
password so now let's go down here and connect our
01:33:23state here as well as our bizarre form submitting
so this is our form we'll say on submit and on
01:33:30submit we want to run the handle submit function
here and then for our input this is for our email
01:33:37input we're going to say on change now on change
what we want to grab is there to set an arrow
01:33:43function here to set the email to event dot target
value okay and i'm just gonna copy that right and
01:33:52save a little bit of time paste that in there save
it but instead of email let's say set password
01:34:00that's all we need to do so let's try this
thing out and see if we get any errors all right
01:34:07let's go and try and sign up i'm going
to create test at test.com the password
01:34:14is going to be password and before we do that
let's let's go ahead and let's just try it
01:34:21oh okay so we submitted did anything
happen let's go here let's refresh
01:34:26yes so now we successfully created a new user you
can see it inside our user table yeah smash that
01:34:35like button you guys that's how powerful firebase
is that's how easy it is to set up a back end with
01:34:39firebase now um once a user logged in it doesn't
make any sense to just sit here on the signup page
01:34:45what we want to happen is actually sign in and you
get redirected automatically to the home page so
01:34:51what we're going to do here is import with react
router dom we just want to use navigate there we
01:34:56go oh sorry don't add any any brackets there just
use navigate then here what we can say is cons
01:35:04navigate equal to use navigate there we go
just like that and then here after we sign in
01:35:11what we want to do is navigate to the homepage
so let's try this again we're already signed in
01:35:22i want to do i'm just going to delete i'm going
to delete this guy right boom he's deleted
01:35:30and real quick you guys before we sign
in and test out this navigate i want to
01:35:34do some conditional rendering which means
on this nav bar here if users not signed in
01:35:41i want them to see just like it reads now to sign
in or sign up if the user is logged in i want it
01:35:47to say account right here and then give them the
option to log out so let's go into our nav bar
01:35:53okay and what we want to have in here we first
want to pull in our context right so import
01:36:00user auth right from auth context then we need
to grab our user to find our user so const sorry
01:36:11this goes in curly brackets so user
we're also going to bring in the log out
01:36:18that's equal to the user auth there
we go these are a function okay so
01:36:25what we want to do here we're going to use some
uh let's do this first of all i want a console.log
01:36:35user and it should say null right because we're
not logged in so now let's go ahead and test
01:36:40this out to see if we get redirected to the home
page summon again we don't have any users in our
01:36:46database because i just deleted them so test
at test.com password we should be redirected
01:36:54yes we're now redirected and look if you look
down here in our console our user is now changed
01:37:00and this is our user object okay so you now have
access to all this data in in firebase and you
01:37:06can see that is our email boom right there so
what i can say in here for example if i change
01:37:12this to user.email it should just now display our
email of the logged in user okay so we can go and
01:37:21comment that out and what we want to do down here
for this div right here i'm going to go ahead and
01:37:27select that i'm going to cut it actually so
let's open up our curly brackets we can use
01:37:32some javascript and what i want to say is ternary
operator we're gonna check to see if a user we're
01:37:37using optional training here dot email right
if that is true okay if that's true we're gonna
01:37:44display and i'm just gonna paste this in here
we're gonna change that else we want to display
01:37:50this right so this is what this is correct but
if a user is logged in we actually don't want
01:37:57i don't want this to be uh there could be a
buttons fine but i want this to say account
01:38:04okay and this should be since we're actually
logged in this should reflect properly say account
01:38:10perfect i want this to say log out so otherwise
it should show login so let's just log out we
01:38:20don't have any logout functionality let's go and
add the logout functionality a lot to do here so
01:38:24let's add a log out here we've already pulled
it in here from our context so i'm going to say
01:38:30arrow function i'm going to call it handle handle
log out okay we're not taking anything in here
01:38:36it is going to be an asynchronous function
though async and then what we want to say here is
01:38:43a weight sorry this would be a try catch
here and catch i don't have any errors
01:38:54no and what we can say is a weight log out
just like that and we don't need anything else
01:39:02oh try to catch what's going on there we go
01:39:12go ahead and save that and that
should be all we need to do there
01:39:16and that's all we need and once we
log out we probably want to navigate
01:39:22let's import that as well
01:39:25use navigate once we log out we want uh users
to be automatically redirected to the home page
01:39:36okay just like so we'll just say navigate okay
so now we are logged in now when we log out
01:39:44this should log us out once we
connect it so just this button here
01:39:52so we actually don't even need this to be a
link we don't want it to be a link because
01:39:54it's just going to log us out and we're going
to say on click we're going to run the handle
01:40:02logout function go ahead and save that
prettier takes care of the formatting
01:40:06let's log out now this should say once once we
log out here it should just say sign in and sign
01:40:14up and let's have a look hey there we go is that
right perfect there we go all right so for our
01:40:22account that's perfect okay sign in let's do take
care of the sign in first okay so now everything's
01:40:28working properly let's go into our sign in
okay and let's go ahead and see use navigate
01:40:34we're going to need that one there and we're also
going to need our context so let's import you no
01:40:43oh user auth there we go okay and i'm just going
to copy this over so i'm going to use all of this
01:40:50here let's just copy this whole thing okay copying
this whole thing from the sign up so we're going
01:40:58to use the const this you state email and set
email we're going to use the password state
01:41:03we're going to use this but instead of sign up
we're going to say log in because that's what
01:41:08we passed through here log in that's what
we're grabbing right here just to be clear
01:41:14so log in and then handle submit we can leave
the same but instead of sign in we want log in
01:41:23and that should be all we need to
do use state is not defined okay
01:41:34so let's see here let's sign in
and remember test at test.com
01:41:41and password we should be logged in i'm going to
show you something real quick let's write p-a-s-s
01:41:48and see i'm going to just
comment out that right quick
01:41:55see test at test.com pass and we should be getting
an error oh we got a print e dot prevent default
01:42:06here oh i forgot we need to add our on submit
there uh handle submit there we go and on change
01:42:15this is for our email what we want to add is event
set email whoa yeah well that's right target value
01:42:24and this is going to be arrow function let's let's
fix that and then this for our password on change
01:42:41that target value so go ahead and save that
let's check this out so test at test.com
01:42:48pass boom and so you see we have an error down
here wrong password i did that on purpose and uh
01:42:54that's great but for our user we're not seeing the
not letting our user know that we have any errors
01:42:59that's not very user friendly so what we can
do is actually set in some error state so i'm
01:43:03going to say const error set error and that's
going to be equal to the use state we're just
01:43:09let that be an empty string misspelled that there
perfect so what i want to say here is we'll say um
01:43:20not there we're going to set error to
an empty string and then down here set
01:43:28error to error we say air dot message
okay and then we can come down here
01:43:37and we want to render this out on the
screen i'm going to put it just befo
01:43:40below our h1 here so we can use our itinerary
operator again and what we can say if
01:43:48error is true okay so if error is true
what we want to show is a p tag else
01:43:59and in here what we're going to say is let's see
error just like that let's just give this last
01:44:08name let's go ahead let's go and see what it's
looking like so far so we can style this thing
01:44:12test.com pass boom so there you go we have our air
cool that looks good that looks pretty good right
01:44:18there so we can actually just probably leave it
like that if hey we can just do this we'll say p
01:44:26p three v g red four hundred see how
that looks boom yeah so that way you can
01:44:34big uh warning just like that perfect
i'll say two so that's a good right there
01:44:40now let's get the actual right
password this time log in oh we need to
01:44:47we need to navigate to our homepage sign in boom
there we go and now we have our account page
01:44:55so what we want to do next is actually
make this account page a protected route
01:45:00so we actually have to be logged in in order to
view that that uh page here so the way we're gonna
01:45:05do that we're gonna be adding another component
here it's a protected protected route here
01:45:11so let's go into our component and i'm just
gonna name that protected route dot j s okay
01:45:20let's say changes over react here r a f c is
going to generate our functional component here
01:45:25now we need to import a couple things i'm going
to import we're going to need the navigate okay
01:45:32equal to or sorry from react router dom there
we go and we're also gonna need our context
01:45:41so user auth go and this is
actually going to take in
01:45:45children okay and then what we're going
to say in here we're going to say if
01:45:53user is not true then what we want to
do is return and um to be a navigate
01:46:03okay
01:46:07navigate to the home page there'd be a
self-closing tag else return children and
01:46:19we can just get rid of all that just like that so
go ahead and save and oh we forgot their user off
01:46:26so let's do that right here const user equal
to user auth just like that so we have a method
01:46:34there perfect that is what we want right
there you guys everything's looking good
01:46:38now we're not done yet with a protected route
we have to make one last final thing here in
01:46:43our app.js and basically we just have to wrap our
account or anything that you want to be protected
01:46:50ah protected route we just have to wrap
it inside there so let's just cut that
01:46:58and we're just going to move it inside of
our protector route so go ahead and save
01:47:02that's all we need to do now um we're on our
account page because we're authenticated okay
01:47:08so next let's log out and try to go to our account
page and what it should do is just bounce us right
01:47:14back to the homepage check boom there it works
how about that you guys check that out perfect
01:47:20and if we log back in test.com password we should
be able to just hang out in the account page
01:47:28perfect that's what we want you guys hope you like
what you're getting so far smash that like button
01:47:33we have now finished authentication with
firebase.js and this netflix project but what
01:47:38we do have left is uh we want to use firestore in
firebase and what firestore is is cloud storage
01:47:44for firebase so to get started with that you
can close app.js uh we can close the the sign
01:47:52up here close the protected route this login we
don't need that anymore we can close the nav bar
01:47:58we're going to leave open the auth context
okay we're not going to need that anymore
01:48:02or so we're gonna we are gonna need that
but let's cruise on over to firebase okay
01:48:07we can see our user in here now let's open this
up and what we're gonna look for is firestore
01:48:13database okay we're not using the real time
we're using firestore which is cloud storage it's
01:48:18awesome to use you guys super powerful so let's
start here in test mode all this is is the read
01:48:23and write permissions so basically it's saying
within 30 days you don't have to change anything
01:48:27anybody can read write to your database so that's
all we need to do click enable now just make sure
01:48:35that fl sorry the cloud firestore location is the
closest to your location it should be selected by
01:48:42default so this literally only takes a couple
minutes here maybe less so there it's already done
01:48:51and that's all we need to do we don't
do not need to do any more configuration
01:48:55past the provisioning of the of the database
so cruising back over here to our docs we're
01:49:02in authentication let's go into the cloud
firestore and in here introduction let's
01:49:08do get started now we just need to add the
firestore sdk okay so we can come down here
01:49:15and we're gonna use that get firestore right there
so again we're using version nine the modular
01:49:20version nine um this came out probably within
the last 12 months for sure probably less than
01:49:25that actually so if you see it done different ways
it's kind of like the older way of doing things so
01:49:30like i said we're using version nine here so what
we need is just that cloud firestore right there
01:49:35so we do need to go back into our firebase here we
go and we should add it right there with our other
01:49:42sdks and then we just need to export const db
equals to get firestore there we go and just our
01:49:52app just like that just make sure that's correct
here yeah db get firestore app and again we need
01:49:59to export that because we're not gonna we're gonna
be putting all the logic in our context here so
01:50:05here is what we need to do and this is actually
really easy you guys we just need to go in here
01:50:09and import a couple things from uh
firebase we can actually at now add
01:50:13db okay from fireboy firebase we also need
just like we imported these from firebase auth
01:50:21we need to import some things from firebase slash
firestore firestore directory there and what we're
01:50:28going to need is set dock and also dock okay now
basically whenever we create a new user and i'm
01:50:36just going to go ahead and real quick go into
authentication i'm just going to delete this
01:50:42delete account boom so now we have zero users in
our authentication account right zero users so the
01:50:49way we're going to do this whenever we have a new
user sign up okay we'll get some errors down here
01:50:55whenever we have a new user sign up
we automatically want to store this
01:51:00user inside our cloud firestore and also
initialize an array just an empty array
01:51:06of uh saved movies but it's going to be empty by
default then whenever we add a movie it just goes
01:51:11into that array so what we're going to do we're
going to do that here in our auth context okay
01:51:15so we have our doc and set doc imported
and right here in our sign up function okay
01:51:22what we're going to want to do
is remove that return because
01:51:25basically if we return that nothing else after
the return would be processed so what we're
01:51:31going to say here is set doc okay and then
here we say doc db and they're looking for
01:51:39users email okay and then what we're gonna want
to have is saved shows is what i'm going to
01:51:49call it save movies save shows whatever and
we're going to set that to an empty array
01:51:54okay so now whenever we run this function which
is ran every time we sign in sign up a new user
01:52:01we're going to automatically create in our
database a user's file here and then an email
01:52:08okay so let's see if this works let's cruise
on over here getting some errors that's okay
01:52:16just refresh that thing there boom there we go
so let's sign up a new user i'm gonna say test
01:52:23and test.com remember i just deleted
this guy so there's nobody in here
01:52:27password hit enter so let's check and see we
should have let's refresh let's see if it worked
01:52:34any errors we have a user boom there we go and
we have an empty array look at that that's how
01:52:40how easy it is to create a backend in firebase and
just to show you we can close that again just to
01:52:45show you i'm going to log out and just sign up a
new user i'm going to say joe at say joe gmail.com
01:52:53password sign him up and now we should actually
refresh this and now we can see another user here
01:52:59now we have joe in there boom and save shows so
now what we want to do now that we can actually
01:53:05log in and and save user specific data what we
want to do is be able to actually store this so
01:53:11whenever we click on this heart we want to store
this specific movie inside our save shows array
01:53:17so we're actually done with the auth context
and where we want to go next is the uh
01:53:24the movie here our movie component okay and
inside our movie components we're going to
01:53:30import a few things we're going to need
our user auth right so our user user auth
01:53:39yeah these are auth
01:53:43context there we go so we're gonna need
that as well uh we're gonna need import
01:53:52oh whoa db it's going to go in curly bracket sorry
i'm so i still have not i've yet to get a mic
01:53:58arm for my my new mic here so let's go into fire
firebase okay and then also we need we need a few
01:54:06things from the firebase flash fire store there
we go in here we're going to need uh up array
01:54:17union okay doc and update doc there we
go so that's what we need right there
01:54:24so let's go ahead and grab access to our context
01:54:28source say const and this is going to be uh user
here okay equal to user auth there we go unsave
01:54:38now we're going to want a few more things of state
in here we're going to want a saved and set saved
01:54:44and i'm going to show you why we're going to
use that here so let's say saved set saved equal
01:54:51that saved pull to use state and it's going
to be false and there we go okay so let's next
01:54:59what we want to do here is i'm going to create
a movie id reference here so i'm just gonna say
01:55:05const movie id okay equal to doc and this is gonna
be db user users okay then we're going to use back
01:55:18ticks we're going to use a template literal and
what we're going to want to grab here is user
01:55:23optional training here dot email so what we're
saying we're the referencing we're referencing
01:55:30the database of users and then we're grabbing the
specific user email that's what we're referencing
01:55:37right here okay so uh even number segments users
have one that's fine don't worry about that
01:55:45right now we'll come back and fix this so that's
looking good right there pretty sure that's good
01:55:52all right so what we want to do next okay what
we want to do is have a save show a save show
01:56:01function it's going to be an arrow function so i'm
just going to say save i'll say save movie save
01:56:07show honestly it doesn't matter here so save show
and this is going to be an asynchronous function
01:56:13okay and now every time we say we should what we
want to do is check to see if a user is logged in
01:56:17but we only want to run this if a user is logged
in else we're not running anything at all so if
01:56:24we'll say user optional training email right
so basically we're saying if user.email is true
01:56:32otherwise it's null right if nobody's
logged in so if a user is logged in it will
01:56:37be true what we're going to say is set we're gonna
say set like to opposite of light okay set saved
01:56:49to true and then we're gonna want to await update
doc okay and then we're gonna grab the movie id
01:57:00okay movie id and then we want to say
saved shows and this is how we update okay
01:57:07this update doc save shows and the way we update
documents and firebase is we use array union i'm
01:57:14going to say array union just like that then we
can throw everything in here we can say id since
01:57:21each movie has an id was we have to in order
to save something or delete something in
01:57:26firebase it has to have an associated id
and luckily for us in here all of our uh
01:57:32our movies have their own id so what we can
say is id here and we'll just say item dot id
01:57:39and then here we're gonna have a title
and that's gonna be equal to item
01:57:42dot title then here we're gonna have the image and
that is gonna be the item dot backdrop path just
01:57:51like that now go ahead and save and but that's
if we're logged in else we want to send an alert
01:58:00okay it says please log into save a movie okay now
go ahead and hit save let's just refresh this here
01:58:14good now we're not logged in let's click oh let me
01:58:17hook this thing up first so um movie
id so let's hit save to set saved
01:58:24so where are our hearts so for this p tag right
this both our hearts are inside of a p tag
01:58:31and on click what we want to do is run the save
show let's see if it works so when we click this
01:58:41right now it's fa heart whenever we click this
01:58:45we want it to change heart so it's now a filled
heart so change the icons and save this movie
01:58:50into our database but we're not logged in
right now so it should give us an alert
01:58:56please log in to save a movie there we go
you guys that's looking good okay so let's
01:59:00try and log in now and we'll log in to one of
our users let's just do uh we'll do joe there
01:59:07so we'll log in we'll let joe log in at gmail.com
and then let's sign in with his unsecured password
01:59:16of password there we go now joe likes this
movie uncharted so he's going to save it
01:59:22boom there we go we did not get the alert and now
you can see our show has the heart button so let's
01:59:27just see another one he like sonic hedgehog and
maybe batman now let's go and see in our database
01:59:34look at that we have the id the image and now
we have access in our database now we can go
01:59:40into our database grab this information
and display it on our account page so and
01:59:46this is user specific data so if we look at test
nothing is in there and again now we can log out
01:59:53let's log in with our other user test at test.com
his password of password and you know he can still
02:00:01log in he doesn't have any shows not listing
any shows so let's go ahead and log him out
02:00:09let's log back in with joe here so
we can see joe shows so joe gmail.com
02:00:17password and now what we want to do is we're
going to want to go to the account page okay
02:00:21so we're going to go to the account page and that
is where we're going to show out our listed movies
02:00:27or shows however you want to say it there so
let's have an account now let's go ahead and close
02:00:34that movie there we can close firebase and what
we're going to be working in is the account okay
02:00:41and for our account we're
going to create a new component
02:00:45called uh saved shows let's just go and create
that saved shows.jsx rfc get our functional
02:00:54component now inside of our account what we're
going to want to do is display we'll display
02:01:03i can't log in here that's cool
we're going to have an account page
02:01:06and let's go ahead and style that right now so
inside of our account page make this just an
02:01:12empty fragment so let's have a div and in here
let's give it a class name of width full text
02:01:19white there we go perfect perfect that's what we
want now this image is going to be our background
02:01:26and i want this to be let's go into our
login and i'm just going to grab this
02:01:32right i'm going to grab that whole
image element element altogether
02:01:39paste it in here perfect now
i don't want this to be hidden
02:01:43or blocked so we can actually just delete all
of that there and what i want to say with full
02:01:50h volt that's fine an object cover that's what i
want but for the height i want it to only be 400
02:02:01pixels so 400 pixels see boom there we go and
if we resize we're maintaining our aspect ratio
02:02:10perfect that is what we want you guys there we
go we don't need that little space i do want
02:02:16to add an overlay on here so we get a nice
little overlay so let's create another div
02:02:20and let's give that a class
name it will say bg black
02:02:2460 for a 60 opacity fixed top is going to be 0
left 0 and width is going to be full and height of
02:02:34height of 550 pixels there we go perfect
and that's what we want right there nice
02:02:42little overlay in here and in this div we're
going to have um we're going to just save
02:02:48this div class name this is we're going to have
it's going to say account or my shows rather
02:02:52just say absolute top we want this to be 20
from the top there and then we'll just say p
02:02:59for md of a padding with eight so anything above
the medium break point we have eight i'm padding
02:03:05and in here we're gonna have h1 and this is
gonna say actually yeah it's gonna say my shows
02:03:15perfect that's what we want
let's give this class name
02:03:20text 3xl anything above medium when
i say text 5xl and font bold okay
02:03:29that is what we want right there you guys that's
perfect now we want to render through our shows
02:03:34down here okay you guys we want to render through
all our shows but we only want to grab the shows
02:03:39that are in our database okay so we're going to do
that in a component called the save shows that we
02:03:45just created let's go over to our save shows
and this is going to be pretty easy because
02:03:51it's real similar to what we've already done
so far with the rows and the movie component
02:03:55so what i'm going to do here is i'm actually
just going to go ahead and find our row here
02:04:00and we can just kind of select our row that's what
we're going to need there um for our save shows so
02:04:09for our row what we're going to do is just grab
all of this here everything inside the brackets
02:04:16and i'm going to put this in here
make sure we got that h2 perfect
02:04:24so i'm just going to make sure we get
everything correct here so inside our save shows
02:04:30let's just paste that in there go
ahead and save we can get rid of that
02:04:36and instead of this title here we're going to say
say my shows let's say my shows just like that
02:04:42and we don't need any of this row id stuff so we
can ditch that don't need that in fact we get some
02:04:47errors if you leave it so get rid of all that and
this is my shows here we go perfect and so we want
02:04:54to render everything out down here we're going to
need a few more things okay from uh from the row
02:04:59and if we haven't done so already you're going to
want to import these so boom auto import that one
02:05:05and that one there we go and we don't need
this movie so instead of that movie we're
02:05:10actually going to just let's grab our movie
component and just grab this entire thing
02:05:17we're going to copy that and close that instead
of this movie component here this is what we want
02:05:23to map through but this p tag here for the
hearts we don't need any of that right there
02:05:29and this is actually going to be img okay and the
reason it's not background path we go to our image
02:05:35because we're grabbing this from our database
now we're not grabbing this from the api
02:05:39no longer are we doing that we describe it
from our database and we saved it as img
02:05:43and just the file path there so that's what we
want to do there and we're keeping this base url
02:05:50so that's looking good and we are
going to need inside the row here
02:05:54we're going to need that slide left
and slide right so let's just put that
02:05:59inside of our um we're going to put that inside of
our account here or sorry inside of our save shows
02:06:06so let's throw that in here we're going to need a
few thing few other things inside here as well so
02:06:13we're going to need the you state and use hook
so let's go ahead and stay and also the use hook
02:06:18or sorry use use state and use effect apologies
we're going to need our context so user auth okay
02:06:29context
02:06:32go and let's have this here so we're
gonna need the cons user equal to
02:06:40user auth oh not that auth method there okay
and then we also since we're not while i see
02:06:48this let's get rid of that we don't need
the row id so we're not going to do any
02:06:53of that crazy stuff in here now we need to
get a few more things here so we need to get
02:06:59import db from our firestore or sorry firebase and
then actually from from firestore so this is going
02:07:08to be from firebase firestore what we're going
to need it from here is we're going to need the
02:07:14update update dock i think we're going to need
dock itself and then also on snapshots we're
02:07:21taking a snapshot of the database and what that
is basically is just taking a picture if you will
02:07:26of the database at that current time and we're
going to wrap that in use effect so every time
02:07:30our component mounts it'll take a snapshot
and it'll relay what's uh in our database
02:07:34so we're going to put all this um down here and
we are going to need our use date here and it's
02:07:42going to be just like the ones before it is the
empty array there we go and we say just movies
02:07:50set set movies just like that okay so perfect
let's go down here and do our snapshot okay
02:07:58so for our snapshot we're gonna say uh we're
gonna wrap this in ease effect so use effect
02:08:04there we go and instead of in our dependency
array we're going to send a set instead of an
02:08:09empty array we can just say user optional chaining
the email so every time there's an email change
02:08:14the the use effect fire off so what we can say
is on snapshot okay then on this snapchat what
02:08:21we want to do doc db okay we're looking for users
and then backticks we're gonna do our template
02:08:30literal and what we're looking for is user with
our optional training dot email okay then just
02:08:36outside of that we're gonna have an arrow function
with doc there like that they're just going to set
02:08:42our movies to doc dot data optional chang dot
saved shows go ahead and save that now we need to
02:08:54import this so put our saved shows just
like that go ahead and auto import that
02:09:03make sure we're imported here save shows
that's what we want right there perfect perfect
02:09:07all right so let's go see if we have any
errors now looks like we do cannot read
02:09:15properties of undefined reading map
okay so this is in our saved shows
02:09:23so we're mapping let's look at
what we're doing here so we're
02:09:27see we are we have our state we're having a
use effect okay we're looking at on snapshot
02:09:33we're not having any syntax errors we're going to
our users user email doc set movies doc dot data
02:09:46look at that so save shows okay let's see that
should fix let's see if we get any more errors
02:09:54boom there we go must use all right there we go uh
it was a unique key prop but let's do that so id
02:10:00and we can just say key equal id there we go
so again let's refresh and boom look at that
02:10:08now we can't delete anything yet but hey
let's go ahead and let's delete one of
02:10:12these so we're deleting that uh delete batman
get rid of you need it and let's have a look
02:10:20look at that on this that and that's the snapshot
you guys so every time the snapshot changes okay
02:10:26right we run this use effect okay and then it
takes a snapshot and it updates just like so
02:10:32so let's we want to add a little uh icon here a
little close here so we can delete that thing so
02:10:37what we're going to do we're going to do that in
um don't need that we're going to do that here
02:10:41inside the safe show and where we're going
to put that didn't really matter where we
02:10:45put it here we'll put it um here when i put it
over here we're going to put it right in here
02:10:52we can say inside of this
p tag i guess we want here
02:10:56let's pat it right here so let's give it a p
tag and we're going to use a i outline close
02:11:05yeah close just like that and this is another
react icon so let's go up here and just import
02:11:14ai outline close from react icons do you
remember what we're supposed to add right here
02:11:21ai it's correct here we go ai directory perfect so
02:11:26of course it's going to throw some more errors
oh we're good so there's a little x you can
02:11:29kind of see it down there so let's style
this thing um basically we want this to be
02:11:37class name right we want this to be absolute okay
text ray 300 and then we're also going to say
02:11:46top four and right four so we should see our x
up there boom there we go perfect that's what
02:11:52we want you guys now almost done dude we're
about to wrap this up so let's give this
02:11:56some a delete functionality here so on this p
tag we're going to have an on click okay and in
02:12:03here we're actually going to have um i'm going to
pass something through here an arrow function okay
02:12:08so we're going to say go and in here
we want to delete show with the past
02:12:17id like that that's what we want right there so
i will say item id we are going to use a pass
02:12:21id but item dot d like that then up here let's
actually create our function the delete show
02:12:28function and we're going to put that right here
just in there and what we're going to have we
02:12:32want to have a movie reference right so movie
const movie ref okay and in here it's going to be
02:12:41doc there we go doc and this
is going to be uh db okay then
02:12:50we're gonna have users and then our backticks
here so we'll use our optional training
02:12:54and this is say user.email
02:13:00not now be sure we add our optional chaining in
there and and uh that looks good there okay and
02:13:06next we're gonna have a use of or sorry our our
delete show function so we're gonna say const
02:13:12delete show okay and this is going
to be an asynchronous function async
02:13:19and this is going to take in the past id
02:13:24now now inside our function what we're going to
do we're going to have our try catch block okay
02:13:30so try catch error there we go on console.log
error go now inside here what we want so
02:13:42firebase is a little difficult right when
we delete objects in here out of an array
02:13:47so basically what we have to do we have to
do this on the client side so we have to
02:13:51basically remove it from our state on the
client side and then push it back to firebase
02:13:56the updated array without the id so that's why
we did that past id down here in our um on our
02:14:03delete whenever we click the delete button so
what we want to say and we're going to put this
02:14:08in a result right so const you can call this
whatever you want here const result is equal
02:14:14to movies dot filter okay and we want the item
the arrow function and we're gonna say item id
02:14:28past id then what we're going to say is a wait
02:14:36wait if we can spell it right now we're doing
update doc okay and what we're saying is update
02:14:42doc movie ref okay movie ref and then
we're gonna say saved shows to the result
02:14:52so let's see hopefully we get this correctly
let's refresh make sure we don't have any errors
02:14:59cannot read properties of map
save shows what's going on here
02:15:04okay yeah i know what that was everything's
working we click this it should delete our show
02:15:08yes and let's just have a look at our database
here and we have one last show we're logged in as
02:15:13joe here so sonic the hedgehog and that's what we
see here let's delete that and as you can see boom
02:15:18it is gone so let's wrap this thing up and let
me just explain that one more time for you guys
02:15:23so like i was saying firebase won't let us just
delete an item out of the array on on the server
02:15:28side so what it wants us to do is just handle it
on the client side so just to reiterate what we
02:15:33did there down here on our function the delete
show function we're passing it in an id okay so
02:15:39that's what we're passing in on our function now
on our actual function right here the delete show
02:15:44what we're saying is we're taking the past id and
what this constant is this result we're saying
02:15:49movies.filter and what filter does is basically
it takes your array it creates a new one minus
02:15:56uh what you don't want in there what you set
the rules for and what we don't want in there
02:16:01is this past id right there so and that's what
we're showing as the result in here so we're
02:16:06just removing that id out of our result and then
just pushing it back to firebase so that's how
02:16:13that is working right there and uh i apologize my
my my video cut out my phone cut out is recording
02:16:18with my phone so i apologies so we're gonna have
to finish the build with just the mic here without
02:16:22a video but that's all right cause we're about
done with this thing we have actually finished
02:16:26you did awesome smash that like button if you like
what you did today if you got some value out of it
02:16:30i'd appreciate it also consider subscribing to
my channel i'm going to be putting out some more
02:16:34content just like this but let's go ahead and get
this thing deployed um and we'll get this thing
02:16:40finished up so we're going to do this in the
cli here so i'm going to be using firebase cli
02:16:45so what you need to do if you haven't already
we're going to install the firebase cli tools
02:16:50so the way we do that i'm not sure if you can just
use yarn for that i'm going to use npm i this is
02:16:54actually i'm installing it globally i'm on a mac
here globally and we're going to say firebase dash
02:17:02tools there we go perfect and that's
what we need to do right there
02:17:08all right so next um after that is done installing
we're going gonna want to run the firebase init
02:17:16and this is probably taking a minute since
we're recording here it should be pretty
02:17:20quick it's probably gonna be a lot quicker
on your side so and we're like i said we're
02:17:26not gonna be using anything in here we're just
using the console in order to host this thing so
02:17:33all right now that that is finished what
we want to do next is run the firebase
02:17:39login okay and let's see here already logged in
perfect now what we can do now is firebase init
02:17:51initialize firebase and what we want to
do we want to come down here to hosting
02:17:56that's what we want to do hosting configure files
for firebase hosting i'm going to make this just
02:18:00a little bit bigger there and what we want to
do i selected the spacebar to select that what
02:18:04we're going to do is use an existing project okay
and then we're going to use this netflix react
02:18:09youtube that's our project we're working out
of and real quick here we want this to be the
02:18:13build folder so pay special attention to that make
sure you type build here for our public directory
02:18:20figure yes and we'll just say no for
now okay so next what we want to do
02:18:26is type we're going to use a yarn run build
and go ahead and press enter and what this
02:18:33is going to do is build out our project
it's going to create this build folder
02:18:36and basically it compiles our react application
and puts it into this build folder a bunch of code
02:18:42that you're not going to be able to read so that's
what that's doing right now and once that finishes
02:18:47what we're going to do is just deploy this to
firebase and i'll show you how quick that is
02:18:54looks like it's almost done here everything
goes down a little bit slower whenever
02:18:59you're recording at the same time so boom there
we go awesome so now we have now we just need to
02:19:04deploy it and we're going to say firebase deploy
just like that and it is going uploading there
02:19:13it goes boom that is it you guys check this
out we're going to have a look what this is
02:19:19hey there you go check it out our live hosted
very own netflix right there smash that like
02:19:25button you guys i hope you liked it let's go ahead
and sign up here create a new user i'm gonna say
02:19:30what's this guy's name tim gmail.com and his
password is going to be password and just
02:19:37again here let's check this out there's no tim in
here refresh make sure and we want to log in just
02:19:42in case you think we didn't do it here so sign in
boom there we go and let's go ahead and save some
02:19:47save some shows for tim here boom north man
batman there we go let's see it let's see
02:19:55it boom there it is and inside tim there
we go you have his save save shows there
02:20:01all right you guys smash that like button
thanks for following along i hope you enjoyed it
02:20:05um if you if you into reacts into programming
consider subscribing to my channel i'm going to be
02:20:10pumping out some more react videos so thanks a lot
for watching you guys i'll see you on the next one
🎥 Related Videos
What vaccinating vampire bats can teach us about pandemics | Daniel Streicker
a16z Podcast | Things Come Together -- Truths about Tech in Africa
2024 TSCRS Applications of anterior segments diagnostic instruments in cataract surgery
a16z Podcast | The Infrastructure of Total Health
The Robot Lawyer Resistance with Joshua Browder of DoNotPay
NES Controllers Explained
🔥 Recently Summarized Examples
4 Steps to Master Any Complex Skill (quickly)
40 Years of Fitness Experience in Less Than 11 Minutes.
Gun Controlling Media Makes FATAL Mistake... They Have Tied Their Fate To Biden's & Gun Rights Win
GET READY! Palantir Is Officially The Next Nvidia.
Abundant Thinking: The Hidden Key to Get Everything You Want (Audiobook)