Skip to content

HW Assignment 4 - Interactive Frontend Development

Possible Points Due Date
50 pts November 22nd - Midnight

Overview

In this homework, you will implement a simple interactive web app using React.

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 a React Front-End. You may reuse your code from HW2 or HW3 if you would like to use a backend for this assignment, however, this is not required.

Step 2: Choose an Idea for an Interactive App

In this assignment, you are free to choose any idea for an app you'd like as long as it involves user interactivity, where the application is taking input from the user (e.g., clicking on buttons, entering text), updating the state of the application, and rendering new visual content from the new state. You might create a simple game, such as a number guessing game or checkers. You might create a data management app to, for example, create and browse recipes or track expenses. You should pick something that is interesting and exciting to you.

Step 3: Implement your Interactive App

You'll implement your app as a front-end React app. Your app should satisfy the following requirements:

Requirements

  • React
    • Create at least 5 separate React components.
    • Use conditional rendering to conditionally render visual content
    • Include handlers in your React components for at least 5 events
    • Create at least two controlled components, where input from an HTML control is bidirectionally synchronized with state in a React component
    • Create a list of child elements or components with unique keys
  • CSS
    • Create at least one cascading selector which overrides another selector
    • Use at least two pseudo-classes
    • Center at least one element inside its container
    • Use the z-index and absolute or fixed positioning to display an element stacked on top of another element
    • Create an least one animation using transition
    • Specify at least one fixed size and one relative size
    • Use display grid to create a layout with multiple rows and columns

Note

It is optional to use any styling libraries like Bootstrap or Material-UI, however, you must manipulate CSS as required above (for example, customizing the library with your own CSS files, or inline by setting style within your React components).

I will be offering Extra Credit on this assignment. This extra credit will be applied either toward your midterm exam grade, with a maximum of 10 potential points to be earned (out of 200), or with a maximum of 5 points towards this assignment (whichever helps your grade more). We will apply the credit to whatever category helps your grade more. This is essentially amounts to half a letter grade.

  • Bonus (Extra Credit)
    • Create at least 5 jest tests to test the functionality of your app
    • You should use at least 3 tests that use the jest-dom package and at least 2 "normal" Jest tests

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, and 5 React Components
  • Please indicate whether you completed the Extra Credit

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 midnight on Tuesday, November 22nd. 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:

React Grading Criteria

  • App has at least 5 React Components - 1 point each (5 points total)
  • Conditional Rendering is used - 4 points
  • At least 5 event handlers are used - 1 point each (5 points total)
  • 2 Controlled Components are used - 2 points each (4 points total)
  • List containing child elements with unique keys is used - 4 points
  • Total: 22 points

CSS Grading Criteria

  • One Cascading selector overrides another - 2 points
  • Two pseudo-classes are used - 2 points each (4 points total)
  • One element is centered inside a container - 2 point
  • Z index is used to display a component stacked on top of another - 2 point
  • One animation using a transition - 4 points
  • Use at least one fixed-size component and one relative-size component - 1 point each (2 points total)
  • Display Grid with multiple rows and columns is used- 2 points
  • Total: 18 points

Coding Style Grading Criteria

  • Coding Style - 10 total 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.