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 add two more routes---a route to get a specific movie (with its reviews) and a route to get the ratings of all the movies in the database.


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

In the `movies.route.js` route file, add the two routes shown below:

router.route('/').get(MoviesController.apiGetMovies) 
router.route("/id/:id").get(MoviesController.apiGetMovieById)//route to get a specific movie
router.route("/ratings").get(MoviesController.apiGetRatings) // route to get all ratings

**Line 2:** This route retrieves a specific movie and all reviews associated with that movie.

**Line 3:** This route returns a list of movie ratings (such as `G`, `PG`, `R`) so that a user can select the ratings from a dropdown menu in the frontend.


Next, let’s implement the `apiGetMovieById` and `apiGetRatings` methods in `MoviesController`. Add the
following two methods to the `movies.controller.js` file:



   
  
    ...
  static async apiGetMovieById(req,res, next){
        try{
            let id = req.params.id || {}
            let movie = await MoviesDAO.getMovieById(id)
            if(!movie){ 
                res.status(404).json({ error: "not found"})
                return
            }
            res.json(movie)
        }
        catch(e){
            console.log(`api, ${e}`)
            res.status(500).json({error: e})
        }
    }

    static async apiGetRatings(req,res,next){
        try{ 
            let propertyTypes = await MoviesDAO.getRatings()
            res.json(propertyTypes)
        }
        catch(e){
            console.log(`api,${e}`)
            res.status(500).json({error: e})
        }
    }
     ...

**Line 6:** We first look for an `id` parameter, which is the value after the `/` in a URL. 


>**Note:** The difference between a request query and a parameter is that in a query, there is a `?` after the URL followed by a key-value---for example, `/api/v1/movies?title=dragon`.

**​​Lines 7–17:** We then call `MoviesDAO.getMovieById`, which we'll create later. This method returns the specific movie in a JSON response. If that particular movie isn't in the database, then we return an error.

**Lines 20–28:** The `apiGetRatings` method is more straightforward. We do not have to feed in any parameters but simply call `MoviesDAO.apiGetRatings`. 



## Implementing the `getMovieById` and `getRatings` methods in `moviesDAO`

We'll first implement the `getRatings` method in `moviesDAO.js` because it's more straightforward. Add the method below
to `moviesDAO`:





Let's learn how to create routes so we can access resources in the database.

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

Adding Routes to Get a Single Movie and its Ratings

Retrieving movies by ID and rating