The final project is due on 12/9 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. You are welcome to use CodeSandbox for the fronted. For the backend, you can build a mock API using JSON Server like we did in class, or you can build out a real API if you have backend experience.

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
  • At least 2 nested routes
  • A 404 page if a user navigates to a route that doesn't exist.
  • 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.
• At least 1 modal-like experience (modal, side drawer, etc) using React Portals
• 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.
• 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
• Promise.all() for the bulk deletion. See Week 3.

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.

Deployment

Heroku is no longer offering their free service, so I won't ask you to pay for it for your final project. The recording will suffice.

• Deploy your JSON Server API to Heroku.
• If you're not using CodeSandbox, deploy your React frontend to Surge.

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
• The URL of your deployed app or your CodeSandbox link
• 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.
• Link(s) to all of your code (CodeSandbox, GitHub, and/or Google Drive)

You are done! 👏