AUTH_TOKEN

Your authentication token that you acquired after a successful login.

GMAIL_EMAIL

Your email on Gmail that will be used to send confirmation emails.

OAUTH_CLIENT_ID

Your client id that we explained in the Secure Emails lesson.

OAUTH_CLIENT_SECRET

Your client's secret that we explained in the Secure Emails lesson.

OAUTH_REFRESH_TOKEN

Your refresh token that we explained in the Secure Emails lesson.

docker.tar.gz

PORT

CONFIRMATION_SECRET_KEY

CRYPTO_ALGORITHM

INITIALIZATION_VECTOR

MONGO_URI

SALT

TOKEN_SECRET_KEY

hello_world

wrong_hello_world

routes_examples

events

async

mongoose

usermodel

signup

confirmation

login

auth

props

router

react

SignupGUI

ConfirmationGUI

LoginGUI

AuthGUI

navbar

SignupPage

SignupPageGUI

ConfirmationPage

LoginPage

ux-page

home-page

UploadGUI

SpellGUI

ImageGUI

GetGUI

UpdateGUI

DeleteGUI

CRUD

Heroku

GetGUI-copy

SpellGUIV2

ImageGUIV2

CRUDV2

Node.js is a popular JavaScript runtime environment used to create server-side applications. It is an ideal tool for building robust, full-stack web applications with React.

This course is an introduction to web development leveraging these two popular technologies. You’ll learn server-side applications with Node.js and learn to add database functionality with MongoDB fitting into the Express application framework. You’ll then build a user authorization system using the JSON Web Token (JWT).

You’ll then focus on a client-side environment built with React. You’ll build a sample application to get familiar with the framework before styling the application and adding necessary user-interaction elements. You’ll wrap up by tying the frontend and backend together and deploying your web application with Heroku.

By the end of this course, you’ll be prepared to build real-world websites using the most popular JavaScript tools.

Building Full-Stack Web Applications With Node.js and React

The `POST` method is defined as a POST in the server, but there’s no reason for that.

The `POST` method is optional and another method, like the `PUT` method, can be used.

The `POST` method is defined as POST in the server, because it’s the proper method for the create operation.

We can use the `PUT` method, but it will be meaningless to the create operation.

(Select all that apply.) Which of the following statements explains why the  `POST`  method is used in the code below?

```
const upload = (data) => {
  return axios.post(`/upload`, data, {
    headers: { ...authHeader(), "Content-Type": "multipart/form-data" },
  });
};
```

We used the `POST` method because:

(Select all that apply.) Which of the following statements explains why the <code>POST</code> method is used in the code below?
<pre><code>const upload = (data) =&gt; {
 return axios.post(`/upload`, data, {
 headers: { ...authHeader(), &quot;Content-Type&quot;: &quot;multipart/form-data&quot; },
 });
};
</code></pre>
We used the <code>POST</code> method because:

Because normal JavaScript objects can’t be used to upload files.

Because `Multer` can only process `multipart/form-data`.

The `FormData` doesn’t have to be used if  the `FormData` API is used. But the `multipart/form-data` encoding does have to be  changed if normal JavaScript objects are used.

Because there is the freedom to decide how to upload data, regardless of the method.

Why did we use the `FormData` API instead of a normal JavaScript object in the code below?


```
const data = new FormData();
data.append("file", file);
data.append("name", file?.name || "filename");
data.append("description", description);
```

Why did we use the <code>FormData</code> API instead of a normal JavaScript object in the code below?
<pre><code>const data = new FormData();
data.append(&quot;file&quot;, file);
data.append(&quot;name&quot;, file?.name || &quot;filename&quot;);
data.append(&quot;description&quot;, description);
</code></pre>

No, a `div` element can be used   instead, and it will be more performant.

No, the specific elements for each type of file can be used. For example, the `img` element for the images and the `video` element for the videos can be used.

Yes, this is the most performant option in this case and the best method to display different elements, regardless of their type.

Yes, because there’s no other option to display a file.

Is the iframe the best option to display the file in the code below? 

```
<iframe
 style={{ height: "20rem" }}
 className="w-full"
 src={file.filePath}
 title={file.name}
></iframe>
```

Is the iframe the best option to display the file in the code below?
<pre><code>&lt;iframe
 style={{ height: &quot;20rem&quot; }}
 className=&quot;w-full&quot;
 src={file.filePath}
 title={file.name}
&gt;&lt;/iframe&gt;
</code></pre>

It’s used to update the file’s data immediately after the file changes to prevent any state caching.

It's used to reflect the changes in the `Card` component immediately.

It’s used to prevent any changes to the file’s data so that the user can only view the `name` and `description` without modifying them.

It has no operation because the `useEffect` hook can’t be used to update the state.

What is the main operation of this hook below?

```
useEffect(() => {
    setName(file?.name || "");
    setDescription(file?.description || "");
}, [file]);
```


What is the main operation of this hook below?
<pre><code>useEffect(() =&gt; {
 setName(file?.name || &quot;&quot;);
 setDescription(file?.description || &quot;&quot;);
}, [file]);
</code></pre>

```
<a
 href={file.filePath}
 download
>
Download
</a>
```

```
function download() {
        const element = document.createElement('a');
        element.setAttribute('href','data:text/plain;charset=utf-8, ' + encodeURIComponent(file.filePath));
        element.setAttribute('download', file.name);
        document.body.appendChild(element);
        element.click();
}
```

```
function download() {
        axios({
            url: file.filePath,
            method: 'GET',
            responseType: 'blob'
        })
            .then((response) => {
                    const url = window.URL
                        .createObjectURL(new Blob([response.data]));
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', file.name);
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
            })
}
```

```
function download() {
	let blob = new Blob(file.filePath);
	let url = window.URL.createObjectURL(blob);
	downloadURI(url, file.name);
	window.URL.revokeObjectURL(url);
}
```

(Select all that apply.) Which of the following options is equivalent to the download functionality considering the method used below to download a file? 

```
<a
 class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-l"
 href={file.filePath}
 download={file.name}
 target="_blank"
 rel="noreferrer"
>
Download
</a>
```

(Select all that apply.) Which of the following options is equivalent to the download functionality considering the method used below to download a file?
<pre><code>&lt;a
 class=&quot;bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-l&quot;
 href={file.filePath}
 download={file.name}
 target=&quot;_blank&quot;
 rel=&quot;noreferrer&quot;
&gt;
Download
&lt;/a&gt;
</code></pre>

Test your understanding of the CRUD operations on the client side.

Before You Begin

The Server-side

User Authentication with a JSON Web Token

Set up the Client-side Environment

Develop the Client-side

Business Logic

Server-side Routes

Client-side Routes

Appendix

Conclusion

Test Yourself: Client-side CRUD Operations