Final Project

The final project is due on 11/15 at 11:59pm. Points will be deducted if you turn it in late. Turning it in 1 day late is -10 points, and each subsequent day will be -5 points.

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.

Application Requirements

  • Client-side routing with React Router

    • At least 4 routes.
    • 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/PATCH, and DELETE.
  • At least 1 modal
  • Custom form validation (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.
  • Each page should have a unique document title (the title in a browser tab).
  • 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).

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. Travis CI integration with all tests passing and a status badge on your project’s README.md
  • 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, Foundation, etc.

Deployment and Submission

It turns out that Heroku can’t see your repo created by GitHub Classroom, even after I grant you permission. Thus for the final project, create a public repo in your main account.

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

Include the following links as Markdown links in a Markdown list at the top of the README file:

  • The URL of your public repo
  • 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.

Send an email to me with the subject “ITP 404 Fall 2020 Final Project Submission” and a link to your repo in the body.

You are done! 👏