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 define the routes of our Navbar. The code files created previously have been provided below as a starting point:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);


import React from 'react'
import { Switch, Route, Link } from "react-router-dom"
import "bootstrap/dist/css/bootstrap.min.css"

import AddReview from "./components/add-review"
import MoviesList from "./components/movies-list"
import Movie from "./components/movie"
import Login from "./components/login" 

import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'



function App() {
  const [user, setUser] = React.useState(null)

  async function login(user = null){// default user to null
    setUser(user)
  }

  async function logout(){
    setUser(null)
  }

  return (
    <div className="App">
      <Navbar bg="light" expand="lg">
        <Navbar.Brand>Movie Reviews</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">            
            <Nav.Link>
              <Link to={"/movies"}>Movies</Link>
            </Nav.Link>            
            <Nav.Link>
              { user ? (
                <a onClick={logout}>Logout User</a>
              ) : (
                <Link to={"/login"}>Login</Link>
              )}              
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
  );
}

export default App;


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

After the navbar section in the `App.js` file, add the route section by adding the code below:



We use a `Switch` component to switch between different routes. The `Switch` component renders the first route that matches.

**Lines 6–7:** We first have the exact path route. If the path is `/` or `/movies`, show the `MoviesList` component.


**Lines 8–11:** Next, we have the route for `/movies/:id/review`.

>**Note:** We use `render` instead of `component` because `render` allows us to pass `props` into a component rendered by React Router.  In this case, we're passing `user` (the logged-in user information) as `props` to the `AddReview` component. We can pass data into a component by passing in an object called `props`.

**Lines 12–19:** We have the routes for a specific movie (`/movies/:id/`) and `/login` to render the `Movie` and `Login` components. 

>**Note:** The `login` route passes in the `login` function as a `prop`. This allows the `login` function to be called from the `Login` component and populate the user state variable.


## Testing our routes

If we run the React frontend now and click on the different links in the Navbar, it will render the following various components: 



Let's learn how to define routes in a React application.

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

Defining the Routes