Final Project

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 using JSON Server. For those who are interested, you are welcome to build a real 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. See this example.
- Active links should have unique styling
At least one AJAX request for each of the following request types: GET, POST, PUT, and DELETE.
At least 1 modal using React Portals
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. 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:

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).
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.
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 and should not be similar to the demos we did in class.

Code Quality Requirements

At least 10 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 repos (public or private) in your main account for your React application and your API. If you make them private, be sure to give access to @davidtangusc, @YingzheLiu, and @dnssh.

Deploy your React project to Surge and the API to Heroku.

Submission

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

Links to your 2 repos
The URL of your deployed app
A YouTube or Zoom 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! 👏