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

In this lesson, we'll learn how to leave reviews for movies. 




import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

So let’s create the routes to `post`, `put`, and `delete` reviews. The `post` method is for creating a review, `put` is for editing a review, and `delete` is for deleting reviews. In the route file `movies.route.js`, let's add the routes, as shown below:

import express from 'express'
import MoviesController from './movies.controller.js'
import ReviewsController from './reviews.controller.js'

const router = express.Router() 
router.route('/').get((req,res) => res.send(MoviesController.apiGetMovies))
router
  .route("/review") 
  .post(ReviewsController.apiPostReview) 
  .put(ReviewsController.apiUpdateReview) 
  .delete(ReviewsController.apiDeleteReview)   
export default router

**Line 3:** We import the `ReviewsController`, which we'll create later.

**Lines 6–11**: We then add a `/review` route that handles `post`, `put`, and `delete` HTTP requests within this one `route` call. That is to say, if the `/review` route receives a `post` HTTP request to add a review, we call `apiPostReview`. If `/review` receives a `put` HTTP request to edit a review, we call `apiUpdateReview`. Finally, if `/review` receives a `delete` HTTP request to delete a review, we call `apiDeleteReview`.



Next, let’s create `reviews.controller.js` with the following code:

import ReviewsDAO from '../dao/reviewsDAO.js'

 export default class ReviewsController{
     static async apiPostReview(req,res,next){
         try{
             const movieId = req.body.movie_id 
             const review = req.body.review
             const userInfo = {
                 name: req.body.name,
                 _id: req.body.user_id
             }
         
            const date = new Date()

            const ReviewResponse = await ReviewsDAO.addReview( 
                movieId,
                userInfo,
                review,
                date
            )
            res.json({ status: "success "}) 
         }catch(e){
             res.status(500).json({ error: e.message})
         }
     }

     static async apiUpdateReview(req,res,next){
        try{
           const reviewId = req.body.review_id 
           const review = req.body.review                    

           const date = new Date()

           const ReviewResponse = await ReviewsDAO.updateReview( 
               reviewId,
               req.body.user_id, 
               review,
               date
           )

           var { error } = ReviewResponse
           if(error){
               res.status.json({error})
           }

           if(ReviewResponse.modifiedCount === 0){
            throw new Error ("unable to update review. User may not be original poster")
           }
           res.json({ status: "success "}) 
        }catch(e){
            res.status(500).json({ error: e.message})
        }
    }  
    
    static async apiDeleteReview(req,res,next){
        try{
           const reviewId = req.body.review_id 
           const userId = req.body.user_id
           const ReviewResponse = await ReviewsDAO.deleteReview( 
               reviewId,
               userId, 
           )
           
           res.json({ status: "success "}) 
        }catch(e){
            res.status(500).json({ error: e.message})
        }
    }    
    

}


**Line 1:** We first import `ReviewsDAO`, which we'll create later. 

**Lines 4–11:** We get information from the request’s `body` parameter. Previously in the `MoviesController`, we got information from the request’s `query` parameter as we extracted data from the URL, such as `req.query.title`. This time, we retrieve the data from the `body` of the request. In the React frontend of the application (which we'll implement later), we call this endpoint with `axios.post("https://localhost:5000/api/v1/movies/review", data)`.



The `data` object generated in the frontend looks something like this:
```sh
{
review: “great movie”,
name: “john”,
user_id: “123”,
movie_id: “573a1390f29313caabcd6223”
}
```
Data is passed in as the request’s `body`. So, in order to retrieve each of the field values, we use `req.body.movie_id`, `req.body.review`, etc.

**Lines 15–20:** We send the information to `ReviewsDAO.addReview`, which we'll create later.

**Lines 21–24:** Finally, we return success if the `post` works and an error if it doesn't.

### Creating the `put` method to edit a review
**Lines 29–30:** We extract the `reviewId` and `review` text similarly to how we posted a review.


**Lines 34–39:** We then call `ReviewsDAO.updateReview` and pass in `user_id` to ensure that the user who is updating the review is the one who has created it.


**Lines 46–52:** We use `updateReview` to return a document `ReviewResponse`, which contains the property `modifiedCount`. This property contains the number of modified documents. We check `modifiedCount` to ensure that it is not zero.  If it returns $0$, the review update has failed, and the server throws an error.



### Creating the `delete` method to delete a review


**Lines 55–68:** Like `apiPostReview` and `apiUpdateReview`, we extract `reviewId` and `userId`. With `userId`, we ensure that the user deleting the review is the one who created it.

## Creating the review data access object
 Now let’s create `ReviewsDAO`:



Let's learn how to add reviews using the POST, PUT, and DELETE methods.

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

Leaving Movie Reviews