CSE 341 | Project

W01 Project: Contacts Part 1

Overview

This project will store Contacts (such as friends or work colleagues). This is a two week project. As described below, you will need to complete the first part of the project in Week 01, then you will finish it in Week 02.

Project Description

This project will provide an API for storing and retrieving information about contacts. These contacts will be stored in a MongoDB database and all interaction will happen through the API that you create. You will not need to create a frontend for this project, instead you are creating the API that could be used by any frontend in the future.

Overall Requirements (Due at the end of Week 02)

The overall requirements for this project (to be completed in Week 02) are:

Be sure to review the rubric in Canvas to see how you will be graded on this assignment.
The database stores the following for each contact: firstName, lastName, email, favoriteColor, and birthday.
Node project successfully connects to MongoDB.
API routes perform GET, POST, PUT, and DELETE requests that are fully functional.
API Documentation using Swagger is professional, comprehensive, relevant, and accurate.
API is published to Render and can be called from external sources.
Create a 5 to 8 minute video that goes through the items in Rubrics. Upload it to YouTube. Videos longer than the alloted time will receive a zero and will be asked to resubmit.
Submit the following links in Canvas: GitHub repo, Render site, and YouTube video.

Contacts and Users

Please note that for this assignment, you will be creating collection of Contacts with the fields mentioned. To help you see how this is done, some tutorial videos are provided that create a collection of Users that have similarly, slightly different fields.

You should use the Users collection in the videos as a guide and a pattern, but for the assignment that you complete, make sure to use Contacts with the fields specified in the assignment instructions.

Part 1 requirements (Due at the end of Week 01)

To help you make progress toward finishing this project, for this week's assignment you need to complete the following:

Set up the project and database.
Import data into the database.
Complete the GET API routes (get and get all).
Deploy the app to Render.

Then, in Week 02 you will finish the app by adding in the POST, PUT, and DELETE endpoints as well as the API Documentation.

Use Course Tools

If you have not already, create a GitHub repository for your work. In this class, you will never submit code of any kind; you will always submit links to your work. You will always use the following tools:

GitHub to store your code
Render to deploy your code
YouTube to demonstrate the functionality of your code

If you use other tools to store, deploy or demo your code, you will not receive a grade.

Set up GitHub and Initialize Node Project

Begin your project by creating a new repository for it at GitHub and initializing a new Node.js project.

The following video may be helpful in completing this step:

Direct link: https://video.byui.edu/media/t/1_u8dzgu7e

Push to GitHub and Start with Express

Complete the following steps:

Set up Express and use it to listen and return "Hello World".
Push the appropriate files to GitHub.

Direct Link: https://video.byui.edu/media/t/1_daxwlcz2

Install MongoDB and Import data

Complete the following steps:

Create a collection in MongoDB called contacts. Insert at least three documents either for people in this class or people that you know. Each document should have the following fields: firstName, lastName, email, favoriteColor, birthday.
Create an .env file to store your MongoDB connection string.

Remember, the examples in the tutorial videos show a Users collection, but you should be creating a Contacts collection for this assignment. It is similar, but slightly different.

Direct Link: https://video.byui.edu/media/t/1_4dj3ierr

Connect your node project to MongoDB

Complete the following steps:

Create a new route file in your node project called contacts.
For the following steps, use the debugger in VS Code to help understand what is going on with the data. And use a REST client of your choosing to make http requests to your web server. This REST Client works well.

Direct Link: https://video.byui.edu/media/t/1_ujfu8vdx

Add the Get and GetAll endpoints

Complete the following steps:

Create a GET request in your contacts route file that will return all of the documents in your contacts collection.
Create another GET request in your contacts route file that will return a single document from your contacts collection where an id matches the id from a query parameter.

Direct Link: https://video.byui.edu/media/t/1_0juwmhcn

Deploy and Test

Once these api routes are working, push to GitHub and test on Render to ensure everything works in that environment as well. (NOTE: The connection string stored in your .env file will not ever be pushed to GitHub, which means it won't be published to Render. You will need to add config vars to Render.)

Direct Link: https://video.byui.edu/media/t/1_r4st3h0l

Other Help with Deployment

Deploying Code to Render

Before attempting to deploy an API, you should first test your API thoroughly on your computer running on localhost. If you can successfully run it without errors, and test the API endpoints without errors, then you are ready to try a deploy to Render.

Render's Node.js Documentation for deployments is very simple and very good. It is recommended that you start here, but you'll use your own GitHub repository, and not their forked hello-world example.

Here are the steps for your first deploy:

Create new Web Service project
Connect to GitHub repo (following instructions in documentation link above)
If you use environment variables in your app, add them to the Environment section within Render
Wait for the build to finish, give it 10-15 minutes, then test your API with a REST client

Here is a video showing this

Environment variables and config vars Setup

To secure an application that needs to connect to a database, we will always use environment variables. Environment Variables are variables that are only stored in the environment to which a code base is running. So if I am running my local Node.js project on localhost, I would have a .env file in my project on my computer. However, I would never push this file to GitHub. Instead, I'll include the name of this file in my .gitignore file. Within it, I will put the MongoDB connection string that my application uses. This article has a great explanation of how to do this.

You may be wondering, "if I only have the db credentials stored on my computer, how will my API work on Render?" That is where config vars come in. Config vars are environment variables for the environment that your API will run in on Render's servers.

Render has excellent documentation on how to create config vars. And you will create the same ones that you did in your local .env file. This will allow your application to function in both environments, while never pushing database crendentials to a git provider like GitHub.

Here is a video showing how to do this

Testing your deployed API

Testing an API is incredibly simple if you have the right tool. The tool to test a RESTful API is called a REST client, and there are many free ones to choose from. One simple, straight-forward one that can be used is a VS code extension called REST Client.

Install the extension
Read the extension documentation (you'll see this documentation on the same page that you install the extension from either in VS Code or in the browser).
Create a .rest file
Add a line to the file like this: GET https://cse341-test.onrender.com/contacts
Click the send request link above this line.
Verify that the API request was successful

As mentioned previously, if you've already tested your API locally, it will be the same process...just with your new url from Render.

Here is a video showing how to test the API

Prepare for Submission

Ensure you include a .rest file for testing (similar to what you see in the example video).
Push to GitHub.
Publish to Render.
Create a brief video demonstrating the functionality of your assignment. Upload it to YouTube (public or unlisted).
Submit GitHub, Render, and YouTube links in Canvas.
Be sure to review the rubric in Canvas to see how you will be graded on this assignment.

Submission

When you have finished the assignment:

Return to Canvas to submit your links.