homework 1 - crud apps

Due: Friday, September 13, 2024 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.

Hono + SQLite

This assignment gives you experience building a basic router-based server-side web application. There is no JavaScript functionality on the front end. You simply need to implement the absolute basics of listing, adding and removing items from a product database.

Project structure

src/db.js and src/schema.js

These files define the database schema and the database connection. 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.

src/seed.js and src/products.sql

The seed script uses products.sql to populate the database with the known good list of products. You can run this via node src/seed.js whenever you like and it will reset the database to the known good state.

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/app.js and src/template.js

These files are the main ones you need to understand, and for app.js, the one that you will be editing to complete this assignment. template.js exports a single function, generateHTML, which takes in various substrings and returns a well-formatted page populated with all of the relevant information for every view that our application has. The views you need to create are:

• the main page: it should just list all of the products, 10 at a time, with a list of pages along the bottom.
• the search result page: it should list all of the products that match the given search. This can be implemented very similarly to the home page.

Additional routes

In addition to search results and the home page, the two other functionalities that must be added are add and delete items. You should take a look at the functionality in the forms on the main page to determine how those will be invoked - you can even just load the empty main page and look at what requests are being sent using the network tab in your browser’s developer tools.

You are free to implement these routes either directly by passing the result to the browser as a response to the request, or by redirecting the user back to the main page after the route’s functionality has been completed.

Checking your work

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

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 products from the database.

We reserve the right to investigate any submission to ensure that it is actually showing the products from teh database rather than simply passing the tests by injecting nonsense markup that passes the tests.

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.

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

Task	Points
”display products on home page”	5
navigate through pages and display products	5
add a new product and confirm it appears on the page	5
delete a product and confirm it is not visible	5
search for a product and display the results	5

Due Date

This assignment is due atFriday, September 13, 2024 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 Sunday, September 3rd.