Create a movie reviews app with Node.js and Express

Part 1 - Setting up the project

Build web apps with NodeJS & Express

🕑 This lesson will take about 20 minutes

In this practice project, you will apply the existing skills you have learnt in this course and learn how to create a database (using MongoDB) and connect your web app to a database. This practice project involves making a movie reviews app using Node.js, Express and MongoDB. The web app will allow a user to view a home page showing a list of recent movies, view individual movie details and reviews, and add their own movie reviews. This project can be taken further by adding a user registration and login system and adding additional features, but we will first focus on learning how to insert, retrieve and edit records in a database connected to an app.

To create the database, we will use a database platform called MongoDB Atlas and a Node.js package called Mongoose. MongoDB provides a free plan to get started so you can learn how to manage a database and test your app.

Step 1 - Create a new Node.js project

If using Visual Studio Code

To get started, create a new Node.js project. To do this, create a new folder/directory (eg “movie_reviews_app”) and open the folder in Visual Studio Code (click File > Open Folder). Open a new terminal (click Terminal > New Terminal) and run the command npm init -y to create the new project. You should now have a package.json file in the project folder. If you’re not sure how to do all of this, you can go back to the first lesson of this course to learn how to create a new Node.js project.

If using Terminal or Command Prompt

Open your terminal and run the cd (change directory) command to navigate to your project folder first eg. cd Desktop/movie_reviews_app ). Then run the command npm init -y to create the new project. You should now have a package.json file in the project folder. If you’re not sure how to do all of this, you can go back to the first lesson of this course to learn how to create a new Node.js project.

If using replit.com

Alternatively, you can use replit.com to build and test your app. Go to replit.com, sign in and create a new Node.js project.

Step 2 - Install required packages

Once you have set up your new Node.js project, you will need to install some packages that the app relies on. We will need to use the following packages in this project:

  • express

  • mongoose

  • ejs

If using a terminal, run the following commands to install these packages:

  • npm i express

  • npm i mongoose

  • npm i ejs

If using replit.com, you can click on Packages, search for each of these packages and then install them. You can also update the package.json file to reference the packages you need and the next time you run the app, the required packages should automatically install.

Step 3 - Create a directory to store CSS and image files

Next, let's add a public folder that will contain CSS files and images. In your project directory/folder, create a new folder and call it public. In the public folder, add two more folders called images and css.

Step 4 - Add the required CSS code and images

In the public/css folder, create a new file called style.css . Add the following CSS code for the web app’s theme to the style.css file. This is optional and you can add or modify CSS code as you like to customise your theme.

Download and save the following ‘star.png’ image file below into your project’s public/images folder. This image will be used to display a star rating for each movie in the database (if using replit.com, upload the file to your project’s public/images folder). Right-click here and select ‘Save Image As…’ to download the image file.

Create EJS templates for each page

Now we will create three templates for the three views (pages) in our app. In your project directory/folder, create a new folder and name it views . Create the following three files in your views directory:

  • index.ejs - the index view is the homepage which displays all movies

  • movie.ejs - the movie view is for displaying full details about a selected movie

  • add.ejs - the add view is adding new movies to the database using a form

The file structure should look like this:

In the next lesson, we will set up the database and then we will connect the app to the database.

Next lesson: Create a Movie Reviews app (Part 2 - Connect the app to the database)