homework 1 - crud apps
Release: Tuesday, September 2, 2025 at 8:00:00 AM
Due: Friday, September 12, 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.
Hono + SQLite + Cloudfare Workers
Section titled “”This assignment gets you hands-on with a minimal “cookie-cutter” web application. There is a basic React app on the front end. Your job is to implement the basics of adding and getting high scores from the database.
Preliminaries
Section titled “Preliminaries”After you’ve cloned the repository, all you have is the basic source code of
this app - you don’t have the libraries that are needed to actually run the code
(nor the compiled web application that’s ready to be run on the server and on
the client. To get all of the dependencies ready to go, you’ll need to run npm install within the directory. The install script will probably prompt you to do
a database migration - this is normal and you just need to hit “y” to
continue. After that, you should be ready to start developing.
Project structure
Section titled “Project structure”db/schema.ts
Section titled “db/schema.ts”This defines the database schema to be used. We’re using
drizzle to interact with the database. This allows us to switch out the
underlying database technology without changing the code much / at all. The
important things you’ll need to be able to do are run the relevant queries
against the database: you can do this however you like, but I’d recommend using
either the Drizzle style
sql-like queries or Drizzle’s sql template string
creator, which is especially useful
if you already know SQL and just want to run queries against the database.
wrangler.jsonc
Section titled “wrangler.jsonc”This is the Cloudflare Workers config file that tells Wrangler how to run the app. In this project it declares the worker entry (main), sets the compatibility_date, and most importantly binds the D1 database via “d1_databases” so that the app is able to used c.env.DB
drizzle/0000_wealthy_katie_power.sql
Section titled “drizzle/0000_wealthy_katie_power.sql”The post installation script uses 0000_wealthy_katie_power.sql to create the
high score database with the schema defined under schema.ts. Once, the table is
created under .wrangler/state folder, then drizzle is used to interact and
update the values in the database. If you were to delete .wrangler folder by
mistake, you can run command npx wrangler d1 migrations apply test-db --local
to have the database created again as described under wrangler.jsonc file
public/
Section titled “public/”The public directory holds all of the static files that your web application needs to serve without any processing. For our app, this includes images and CSS files.
src/worker/index.ts
Section titled “src/worker/index.ts”This file is the main one you need to understand, and for worker/index.ts,
the one that you will be editing to complete this assignment. This would contain
the required functions to interact with the database as the react app on the
frontend. You need to make appropriate changes to the Hono api functions so that
you are able to achieve the following goals:
- Save High Score: It can be used to save the high score for the given session by clicking on it.
- Display High Score: When user comes in for first time , high score of 0 is shown. Once user saves high score and later returns to play around with the counter. Last saved High Score would be displayed under the Save High Score Button. If user scores more than the high score and saves the score, then that particular high score would be stored for the user.
src/react-app/
Section titled “src/react-app/”This directory contains the client side web application. The code here isn’t important to understand for this assignment, however what it does is important. You should experiment with interacting with the client side web app while you’ve got the network tab open in your devtools to see what is happening behind the scenes as a result of the client side JavaScript that’s running in the browser.
Feel free to take a look at the code, but nothing you need to do for this assignment, and nothing about how the code is written will be covered on the exam. However, for the first exam, you will need to understand that code is running on the client side, and how that interacts with the server side.
Our next assignment will go into more detail about client side web programming.
Checking your work
Section titled “Checking your work”Running testcases locally
Section titled “Running testcases locally”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.
Non-adversarial tests
Section titled “Non-adversarial tests”The tests in this assignment were written in a very straightforward way. They are meant to look like the type of test you might write for your own code to ensure that it works correctly, NOT a very high confidence test that you have actually coded everything up such that it works properly. For instance, it would be very easy to write code that passes the tests but does not provide a functional CRUD app showing the high score from the database.
We reserve the right to investigate any submission to ensure that it is actually showing the high score from the database rather than simply passing the tests by injecting nonsense markup that passes the tests.
Deploying your Application.
Section titled “Deploying your Application.”There are no points awarded for deploying your app to a live server, but it is a good exercise to get familiar with the process. Hono can be deployed to Render as a Node.js app - that is basically exactly what you’ve created here and the most straightforward way to do so. However if you’d like some experience deploying to a serverless provider, you can reconfigure Hono to work on a serverless app platform and Drizzle ORM to use a serverless database provider. Cloudflare is the easiest way to do so (because this project is already written with D1 in mind), but you can also easily use a different hosting provider along with Turso, Supabase, or any of the other providers listed in the drizzle docs.
Submitting your work
Section titled “Submitting your work”After you are confident that your code works, you can push the code to GitHub, and then submit it via Gradescope. You can find the link to our class gradescope in the sidebar. If you have issues with the autograder, please contact us via Piazza ASAP. Please keep in mind that technical issues while submitting your assignment is not an acceptable excuse for improper or late submissions.
Points
Section titled “Points”| Task | Points |
|---|---|
| Display high score as 0 when table is empty. | 5 |
| Save the high score and display the high score. | 5 |
| API returns JSON with a name | 5 |
| POST API rejects invalid scores | 5 |
| Return the maximum score after multiple entries into database. | 5 |
Due Date
Section titled “Due Date”This assignment is due at Friday, September 12, 2025 at 2:00:00 PM. Extra credit in the course is available for anyone who writes meaningful test cases and submits them to the TA by Thursday, September 4th.