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.

Part 1: Application Requirements

1. Client-side routing with React Router. You should have at least 4 routes, with 2 of the routes having URL parameters (dynamic segments). You should make use of nested routes for your application's skeleton. Active links should have unique styling.
2. At least one AJAX request for each of the following request types: GET, POST, PUT or PATCH, and DELETE.
3. Your mock API (or real API if you're building one) should have at least 5 API resources. This includes the API resources needed for Part 2. Also, there should be at least 3 relationships between your API resources.
4. You should have at least 1 input, 1 textarea, 1 select menu, 1 group of radio buttons, and 1 checkbox.
5. 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.
6. 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.
7. 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.
8. 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.

Code Quality Requirements

1. At least 10 tests
2. Cleanly formatted code using Prettier.
3. Don't just make the code work. Make it also easy to read. Write readable variable and function names.
4. Sensitive data like API keys should be stored as environment variables. Attach this file in your submission email.
5. You should only use concepts, techniques, and patterns covered in this class. If you aren't sure, please reach out to the instructor over email and CC the TA.

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.

Complexity

When grading your project, I will take into account your application's complexity. You will not get full credit by doing the bare minimum. Your project should be different from the applications that we built in class, the assignments, and the practical exam.

Video Walkthrough

Create a video with Zoom where you demo all parts of your project and explain where you fulfilled each requirement. This video should have audio. Please keep this video under 10 minutes.

Submission

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

1. A link to your GitHub repo. This will be a personal repo.
2. The URL to your video walkthrough

You are done! 👏