5 points will be deducted for each day that your project submission 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 and JSON Server for the API. Your JSON Server file (db.json) should live at the root of your React project.

Projects will be graded based on overall complexity and should not be similar to the demos we did in class.

Part 1: Application Requirements

• Client-side routing with React Router
  • At least 4 routes, with 2 of the routes having URL parameters (dynamic segments)
  • Use of nested routes for your application's skeleton
  • Active links should have unique styling
• At least one AJAX request for each of the following request types: GET, POST, PUT or PATCH, and DELETE.
• Custom form validation managed via component state (don't use HTML form validation attributes). If a form is invalid, there should be unique error messages next to or beneath each form element. Bootstrap has validation styling if you'd like to use that. If a form is invalid, the form should not be able to be submitted.
• 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. Check out the blog post "3 ways to set a document title in React" to see how you might go about setting the document title for each page.
• Display notifications using React Toastify when a user has taken an action and it was successful, like deleting, creating, and updating something.

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 (i.e. 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.

Extra Credit

The extra credit is worth 20 points, which equates to 6% of your entire class grade.

Create an administrative page at /admin that lists out one of your API resources. Next, build a bulk deletion experience like in Gmail where each row has a checkbox. At the top of the page there should be a checkbox that allows a user to either select or deselect all items. When at least 1 item is selected, display a button that allows a user to delete all selected items. When all selected items have been deleted, display a notification of some sort. Also, if some of the items are selected but not all, the Select All checkbox should be in the indeterminate state (see example below).

• This example on how to set the indeterminate state of the Select All checkbox with the useRef hook
• Use Promise.all() for sending multiple delete requests. See Callbacks, Promises, and fetch.

Code Quality Requirements

• At least 10 tests
• 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.

Submission

Send an email to me with the subject "ITP 404 - Final Project Submission" and include the following:

• A screenshot of your terminal of all your tests passing
• A YouTube or Zoom link to a video where you demo your project and explain where you fulfilled each requirement. This video should have audio.
• A link to your project's repository. If you're comfortable making this repository public, that makes it easier for me. If you want your repository to be private, be sure to add me (@iamdtang) and Joshua (@joshuajcyoo) as Collaborators so we can view the code.

You are done! 👏