HW Assignment 3 - Persistence and Frontend Development

Possible Points	Due Date
50 pts	October 26th - Before Class

Overview

In this homework, you will implement a simple node backend that uses persistence to store data and a frontend that fetches and displays data from your backend.

Assignment Instructions

Step 1: Sign up on GitHub Classroom to Clone the Starter Project

Please follow the instructions for setting up this homework assignment in GitHub Classroom and deployment of your project via Heroku. The starter project includes code for both a React Front-End and an Express back-end. You may reuse your code from HW2 for your backend to satisfy requirements for this assignment.

Click Here to View HW 3 Tutorial

Step 2: Use Persistence to Store Data Gathered through Fetch

In your node backend, you will again gather data from an external API through fetch. In this HW, rather than store data as a local variable in memory, you will instead use Firebase to persist data. You should take data generated by interacting with your 3rd party API, store the data in Firebase, and then retrieve this data later in order to handle requests made to your microservice.

Step 3: Using React as a Template Engine to Display Data

In this step, you will build a simple frontend to display data from your microservice. Your frontend will be organized into several React components.

For example, for a cities web app, you might have an index.html page that displays a list of all cities and their names. Clicking on a single city loads a second view displaying data for that city. Clicking a link for weather on that page loads a third view displaying current weather data for that city.

Requirements:

• Use fetch to retrieve a dataset from a remote web service.
  • Data should be persisted (see Persistence below) so that the same data is only retrieved from the remote web service once during the lifetime of your microservice.
  • You should handle at least one potential error generated by the third-party API.
• Endpoints
  • Include at least 2 GET endpoints.
• Persistence
  • Within your node backend, ensure that all state which is reused across different HTTP requests is persisted into a Firebase datastore.
  • Within your node backend, retrieve data from your Firebase datastore to handle client requests.
• HTML
  • Create at least 3 separate React components corresponding to different views. These may be structured as a single page or as 3 separate pages.
  • Use at least 3 different semantic markup elements, for example:

    <nav><article><aside><section><figcaption><address><cite><strong><abbr>)
    

• React
  • On each of 3 views, after the page loads, use fetch to retrieve appropriate data from your backend and then use React to generate HTML for this data.

Using Resources

You are welcome and encouraged to consult any publicly available resource you wish (e.g., Mozilla Developer Network documentation, tutorials, blog posts, StackOverflow). However, in this assignment, all of the code you submit should be your own.

Submission instructions

In order for your assignment to be considered for grading, you must be sure that you fill out the following information at the top of your README file and ensure that this is up to date in your GitHub repo.

• Student Name
• Student G-number
• Heroku Deployment URL
• Description of your Web App, 2 API endpoints and 3 React Components

Warning

Failure to include this information in your submission is likely to result in a zero for the assignment!

There is no formal submission process for this assignment. We will simply grade the last commit to the main branch of your repository before the deadline of 4:30pm on Tuesday, October 26th. If you make a commit after the deadline, we will grade the latest commit and your assignment will be considered late. Per our course policy, assignments submitted over 48 late will not be accepted.

Grading Rubric

The grading for this project will be broken down as follows:

• Using fetch to retrieve dataset - 3 points
• Persist data to firebase - 4 points
• Implement 2 GET endpoints - 3 points each (6 points total)
• Ensure database state is persisted across client requests - 3 points
• Implementing 3 React Components - 4 points each (12 points total)
• Using 3 different HTML semantic markups - 2 points each (6 points total)
• Use fetch to retrieve data from your express endpoints - 2 points per React Component (6 points total)
• Coding Style - 10 points broken into the three categories below:
  • Documentation & Comments - 4 points
  • Modularity/Maintainability - 3 points
  • Identifier Intelligibility - 3 points

It is important to note that coding style will be an important component of this project's overall grading. Below, I provide some tips on earning these points:

• Documentation & Comments - In order to earn these points, you should document all non-obvious functionality in your code. For example, if there is some complex computation that is not easily understood via identifiers, then this should be clearly documented in a comment. However, you should try to avoid documenting obvious information. For example, adding a comment to a variable named citiesList that states "This is the list that holds the cities" is not likely to be a valuable comment in the future. Part of this grade will also stem from your description of your endpoints in your README file.
• Modularity - Throughout the course of this semester, one topic that has come up repeatedly is the idea of code maintainability. One of the best ways to help make your code more maintainable in the long run is to make it modular, that is try your best to achieve low coupling and high cohesion. We expect that you will break your project down into logical modules, and where appropriate, files.
• Identifier Intelligibility - The final code style related item we will look at is the intelligibility of your identifiers. This should be pretty straightforward, use identifier names that correspond well with the concepts you are trying to represent. Try to avoid unnecessarily short (e.g., i) and unnecessarily long identifiers.