Original subtitles

Now we know how to send a get request,

because that's what we're doing here.

We're getting data

by sending this fetch request to this URL.

Now, in reality, in a lot of applications

you don't just want to fetch data.

You also want to send data to a server,

for example because a new user was created.

That's why I added a new component

and attached you'll find an updated project snapshot

which contains the new AddMovie.js

and AddMovie.module.css files

and an adjusted App.js file.

Where I basically now also

added this addMovie component here in my JSX code,

and where I added this addMovieHandler function

which just logs the movie.

In addMovie I'm just rendering a form

and I'm gathering the user input

preventing the form default to submission default

and then creating that movie object and passing it

on through my prop here, through onAddMovie.

Therefore we get this form,

and this would allow us to add a movie.

Now, the star Wars API, which we're using here

is really just a dummy API for getting data.

We can't send post requests there

which is what we need to do, to store new data.

But this dummy star Wars API, of course

is just some API, which is there to play around with it.

They don't want data to be submitted by anyone out there.

So we can't send a post request here.

That's while we'll now use as another dummy API,

another service.

And that service is Firebase.

Firebase is a service provided by Google

and it's in the end, a backend

which we can use, without writing any code.

Unlike the name implies, it's not some kind of database

it's a backend that comes together with a database,

but it also gives us a full backend app,

a complete rest API, to which we can send requests.

And the great thing is that we can get started

for free here, alls if you check their pricing pages,

and we can play around with our dummy backend here for free,

without writing any server-side code.

Since this course is a react course

I of course want to focus on react

and here we will then be able to get data

and to store data.

For that you need a Google account

and then you need to go here to the Firebase console,

after logging in with your Google account.

Once you're logged in, you can add a new project

and give it any name of your choice.

Here I'll name it react-

http,

but the name is up to you.

Click continue.

You can disable Google analytics,

we don't need them here.

And this will now create our Firebase project.

Now again, Firebase is a service offered by Google.

It consists of many products

and services that make up the overall service,

and we will only use a fraction of that.

We're not going to build some complex Firebase app here.

I'm just using it because it's a free to use,

no code needed, backend which we can start with.

Now here I'm in the Firebase console,

and for us, the RealTime database is interesting.

Now I did say that Firebase is not just a database

and it isn't, but part of its offerings is a database.

They actually have two databases.

Cloud Firestore is the more powerful one

but Realtime Database is the one

which is easier to get started with,

and since we just want a dummy backend, we'll use that.

It also has the nicer rest API.

Now, once we click here, we can click

on create database and then important, start in Test Mode.

Otherwise you will not be able to send requests.

Now this sets up a very simple database for you

and it gives you a URL

which you can use to talk to that database,

though, that's deceiving.

As I mentioned, our frontend won't directly talk

to the database and it's not doing that here either,

even though it might look like it is.

In the end this here is a URL to some Firebase API,

some Firebase arrest API, which then takes incoming requests

and does talk to some other database behind the scenes.

It just might look like we're directly sending requests

to a database here.

Actually, we aren't.

Now we can use this URL to send data

to our Firebase backend and to our database therefore.

But of course, fetching movies from there

won't really succeed.

If you go to App.js, we can replace this Star Wars URL

with this URL, and then actually add one extra segment here

which is movies.json.

Now this name, movies in my case, is up to you.

This basically will then just create a new node

in that database basically.

It's a dynamic rest API which you can

configure here by using different segments

to store data in different nodes of your database.

So this name is up to you, and I choose movies

because I want to store some movies.

A .json is important here.

That's something Firebase specific, they need this .json

at the end of the URL you are sending requests to,

otherwise your requests will fail.

Now we can get our data from there, but if I use this URL

indeed will fail to get our data.

And we actually get an error because I try to

read some results, which we don't get.

We are not making it into this if block here

because we're not getting an error response code

we do get a 200 response code,

but we won't have our results in there.

We won't get any data at all.

Of course,

because currently we're not storing any data here.

Now I did switch to this Realtime database and to Firebase,

so that we can send post requests

and that we can store data.

Because that's also something you often got to do.

And that's something I want to show you therefore.