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.)** In the following code `useState` is a React ________.

```
const BooksList = props => { 
  
  const [books, setBooks] = useState([])
  const [searchTitle, setSearchTitle] = useState("")
}
```

(Fill in the blank.) In the following code <code>useState</code> is a React ________.
<pre><code>const BooksList = props =&gt; { 
 
 const [books, setBooks] = useState([])
 const [searchTitle, setSearchTitle] = useState(&quot;&quot;)
}
</code></pre>

It makes the review entered by the user a constant so that no one can change it.

The `onChangeReview` keeps track of the user-entered review value in the field.

There is an error in the code because there is no `;` at the end.

It displays the review entered by the user.

What does the following code do?

```
  const onChangeReview = e => {
    const review = e.target.value
    setReview(review);
  } 
```

What does the following code do?
<pre><code> const onChangeReview = e =&gt; {
 const review = e.target.value
 setReview(review);
 } 
</code></pre>

**(Fill in the blank.)** To tell the component to execute some code after rendering, include it in the ________.

(Fill in the blank.) To tell the component to execute some code after rendering, include it in the ________.

**(Fill in the blank.)** For `useEffect()` to be called only once when the component renders, pass ________ in the second argument. Otherwise, it will be called on every render of the component.

(Fill in the blank.) For <code>useEffect()</code> to be called only once when the component renders, pass ________ in the second argument. Otherwise, it will be called on every render of the component.

It’s checking if the user is logged in.

It’s displaying the movie plot and providing a link to add a review.

It’s displaying the movie title and plot, and providing a link to add a review.

It’s displaying the movie title and plot, and if the user is logged in, it’s also providing a link to add a review.

What is happening in the `Card` component given below?

```
<Card>
 <Card.Header as="h5">{movie.title}. 
 </Card.Header>
 <Card.Body> 
 <Card.Text>
 {movie.plot}
 </Card.Text>
 {props.user &&
 <Link to={"/movies/" + props.match.params.id + "/review"}>
 Add Review
 </Link>}
 </Card.Body>
</Card>
```

What is happening in the <code>Card</code> component given below?
<pre><code>&lt;Card&gt;
 &lt;Card.Header as=&quot;h5&quot;&gt;{movie.title}. 
 &lt;/Card.Header&gt;
 &lt;Card.Body&gt; 
 &lt;Card.Text&gt;
 {movie.plot}
 &lt;/Card.Text&gt;
 {props.user &amp;&amp;
 &lt;Link to={&quot;/movies/&quot; + props.match.params.id + &quot;/review&quot;}&gt;
 Add Review
 &lt;/Link&gt;}
 &lt;/Card.Body&gt;
&lt;/Card&gt;
</code></pre>

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 React Components