Homework 2 - Frontend

React

Release: Thursday, September 18, 2025 at 2:00:00 PM

Due: Friday, October 3, 2025 at 2:00:00 PM

Quickstart

Create a new private repository under your own GitHub account from this template. Sharing your code for the assignment, intentionally or unintentionally, is a violation of the academic integrity policy in this course.

Note

Watch the kickoff video for help getting started.

Installing required packages

Open the terminal window and type in npm install. This will install all the dependencies listed in the package.json file and will create a folder node_modules where all these dependencies will be installed. npm run dev will run a local development server and open a web browser window for you that’s pointed at your application.

Skeleton code

The skeleton code of the application is designed to give you a better understanding on React and its features along with backend in Hono. The given project is 70% done, requiring some functionalities to be implemented in React application and in the worker/index.ts for server. You just need to add the logic as described in the TODOs. There may be a few TODOs missing, but they’re easily detectable when debugging.

Starting the project and navigating

Before running the project please make sure that you have installed all the dependencies mentioned in the step Installing required packages. Start the project by typing npm run dev in the terminal and open the URL in a browser.

If you just cloned the skeleton, the app won’t work because some crucial code is missing.

To start navigating through the project, start with the index.html page and then follow the path to check how components are used. The main component used in this app is App (you can find the code for this in App.tsx). From here check the other components used, and how they’re supposed to interact with the rest of the application. All the components are in /src/react-app folder.

Note: You should only need to change files in /src folder, specifically the App.tsx and the files in /react-app/pages folder. For the backend, you need to make changes in the src/worker/index.ts for the API to be fully functional and interact with the frontend.

Deliverables

Your code must function identically to the fully functional application.

1. The homepage has Expenses table (Sr No., Description, Date, Cost, Actions) having 20 expenses per page. By default it’s sorted by Date (newest first); users can switch to Cost and toggle sort direction via the chip next to each header.
2. The top navbar lets you navigate between Expenses, Add Expense, and Total.
3. Clicking Add Expense should open a form titled “Add Expense”. Submit a new expense with a description, a valid date, and cost adds the expense and returning to the homepage.
4. Each row supports Edit (inline, with Save/Cancel) and Delete (removes the expense; list updates accordingly).
5. Homepage should have pagination using Prev/Next buttons with an indicator “Page X of Y”. Prev and Next should be enabled/disabled according to the page.
6. The Total page displays the grand total of all non-deleted expenses, formatted as currency.

Testing your code

npm run test will run the test suite locally. Remember, as with any other assignments in class, you should double check that your tests are passing in the gradescope environment in addition to your local environment. “It works on my machine” does not count as a valid excuse for failing tests in the autograder. Furthermore, for this homework the testsuite on Gradescope will be slightly different.

Points

Task	Points
Navigates between Expenses, Add Expense and Total from the navbar	10
Shows expenses by Date (newest first) as default, and toggles Cost ascending/descending	10
Split the expenses 20 per page; enable or disable Prev/Next buttons appropriately	10
Creates a new expense and returns to the list	10
Updates an existing expense, then deletes it	10
Compute and display the correct total on Total Page	10
Adding an expense: rejects invalid input	10
Adding an expense: succeeds and returns the created row	10
Getting expenses: returns only non-deleted items, sorted newest first	10
Updating an expense: updates the record and returns it	10
Updating an expense: returns error 404 if the record doesn’t exist	10
Deleting an expense: soft-deletes the record and returns success	10

Due date

This assignment is due at Friday, October 3, 2025 at 2:00:00 PM.