Final Project

The final project requirements are not finalized and subject to change.

The final project is due on 12/5 at 11:59pm. 5 points will be deducted for each day that it is late.

For the final project, you will develop a single page application (SPA) on a topic of your choice with React for the frontend. For the backend, you will build a mock API like we did in class using JSON Server. For those who are interested, you are welcome to build an API as we’ll learn towards the end of the class. This will involve extra work however.

Part 1: Application Requirements

  • Client-side routing with React Router

    • At least 4 routes, with 2 of the routes having URL parameters.
    • A 404 page if a user navigates to a route that doesn’t exist
  • At least one AJAX request for each of the following request types: GET, POST, PUT, and DELETE.
  • At least 1 modal
  • Custom form validation managed via component state (don’t use HTML5 form validation). If a form is invalid, there should be unique error messages next to / beneath each form element.
  • At least one reusable/generic component designed by you used in at least two spots in your application. This should not be any of the components we did together in class. This component should have at least 1 configurable prop.
  • The document title (the title tag) for each page should be unique and contain meaningful, contextual data. This includes pages with different data. For example, on Amazon, the document title of a product page is different for every product listed.
  • Display notifications of some sort when a user has taken an action and it was successful, like deleting, creating, and updating something.
  • Use of 1 third party React library (not counting React Router).

Part 2: Additional Feature

Choose at least one of the following features to implement:

  1. Build a commenting system from scratch for some resource in your application. The comments in your commenting system should at the very least contain the commenter’s name, a comment body, and a time stamp. When comments are displayed, they should be sorted from the most recent to the oldest. Comments don’t need to be commentable (nested comments).
  2. Build a bookmarks / favorites system from scratch for some resource in your application. A user should be able to add and remove a particular resource from their bookmarks / favorites section. When you display the resource in the bookmarks / favorites section, display information about the resource and the date/time of when the item was bookmarked / favorited.
  3. Pitch your idea to me by sending me an email with your idea. I will respond back either approving the feature or giving some suggestions.

Projects will be graded based on overall complexity.

Code Quality Requirements

  • At least 15 tests
  • A screenshot of your terminal of all your tests passing and display the image on the README. Check out this resource on how to create an image in Markdown.
  • Cleanly formatted code using Prettier.
  • Don’t just make the code work. Make it also easy to read. Write readable variable and function names.

User Experience Requirements

Your project should be styled so that it presents a good user experience and looks organized and professional. You are welcome to use libraries like Bootstrap, Tailwind, Material-UI, etc.

Deployment

Create a public or private repo in your main account. If you make it private, be sure to give @davidtangusc access.

Deploy the React frontend to Netlify and the API to Heroku like we did in class.

Submission

Send an email to me with the subject “ITP 404 Fall 2021 Final Project Submission” and include the following:

  • Links to your repos
  • The URL of your deployed app
  • A YouTube link to a screencast where you demo your project and explain where you fulfilled each requirement. This video should have audio. Please keep this video under 10 minutes long.

You are done! 👏