git_username

git_email

heroku_email

heroku_password

Learn to build and deploy a full-stack MERN application. Gain insights into MongoDB basics, Node.js backend, and React frontend. Explore API testing and Heroku deployment.

Beginning Node.js, Express & MongoDB Development.png

MERN.tar.gz

first

second

third

fourth

fifth

temp

app_l

movies_list

react icon

movie_routes

display_m

movie_r

In this course, you’ll learn how to build a full-stack application using the MERN stack and deploy it to the internet. The MERN stack is a popular stack of technologies that build modern Single Page Applications (SPAs).

You’ll begin with the basics of MongoDB and the process of setting it up. Next, you will go over work with the Atlas cloud database. Then, you’ll learn how to set up the backend using Node and express. Also, you’ll be creating a fully functional movie review application. After creating the controller and data access objects, you’ll learn to create routes. Next, you’ll test the created API. Finally, you’ll learn how to create the frontend using the React components and deploy the application on Heroku.

By the end of this course, you’ll learn how to connect both the backend and the frontend to create a full-stack MERN application, as well as how to deploy it.

Beginning Node.js, Express & MongoDB Development

**(Fill in the blank.)** With reference to React, below is an example of a(n) ______________ that displays a simple string `Products`.

```
import React from 'react';
function Products() { return (
<div> <h2>
 Products
 </h2>
</div> );
}
export default Products;
```

(Fill in the blank.) With reference to React, below is an example of a(n) ______________ that displays a simple string <code>Products</code>.
<pre><code>import React from 'react';
function Products() { return (
&lt;div&gt; &lt;h2&gt;
 Products
 &lt;/h2&gt;
&lt;/div&gt; );
}
export default Products;
</code></pre>

**(Fill in the blank.)** A React component contains a(n) ________ that ultimately outputs HTML elements.

(Fill in the blank.) A React component contains a(n) ________ that ultimately outputs HTML elements.

**(Fill in the blank.)** Applications solely built with React usually have a single ________.

(Fill in the blank.) Applications solely built with React usually have a single ________.

**(Fill in the blank.)** The following code is an example of a(n) ____________ in React.
```
{ user ? 
 (
 <a>Logout User</a>
 ):
 (
 <Link to={"/login"}>Login</Link> 
 )
}
```

(Fill in the blank.) The following code is an example of a(n) ____________ in React.
<pre><code>{ user ? 
 (
 &lt;a&gt;Logout User&lt;/a&gt;
 ):
 (
 &lt;Link to={&quot;/login&quot;}&gt;Login&lt;/Link&gt; 
 )
}
</code></pre>

**(Fill in the blank.)** In React, a(n) ________ is used instead of a component to  allow  `props` to be passed into a component rendered by the React router.

(Fill in the blank.) In React, a(n) ________ is used instead of a component to allow <code>props</code> to be passed into a component rendered by the React router.

Introduction and Setting up the Database

Setting up the Backend

Setting up the Frontend : Creating the Server

Setting up the Frontend: Creating the React Components

Deployment

Conclusion

Quiz: Setting up the Frontend and Creating the Server