Assignment Zero

Deliverable	Due Date
Assignment 0	February 12, 2026 at 02:15 PM
Assignment 0 (revision)	March 06, 2026 at 02:15 PM

Goals

• Get your feet wet with our tooling and process
• Start thinking about how AI tools can support web development and what role you and your knowledge play

Objective

Our goal is to create a complete recipe web site. I will provide a collection of recipes and your site will allow users to browse the collection. The twist? You are not allowed to write a single line of actual code. All development will be done by an AI under your direction.

Getting started

Step one Make sure you complete the steps on the Getting Started page. If you are using nvm and you have installed multiple versions of node, before using node, pnpm and associated tools, you need to make sure the correct version is activated if you have several version installed (node -v should return ‘v24.13.0’, though the minor version number may vary slightly).

Step two Click the GitHub classroom link. This will create a new repository for you on GitHub. Navigate to the page for your new repository. Click on the big green Code button. Click on SSH to get the SSH path to your repository. Copy the provided link. In your terminal or shell, navigate to a good place to work on this assignment (I suggest keeping all of your work together in a cs312 folder). You do not want this to be on a cloud based drive. type git clone followed by the link you copied.

Step three Open the new folder in VSCode (for all of our work, you will want to be in the practice of opening enclosing folders so you can see your whole project at a time). Open the Terminal and the Copilot chat panes using the View menu if they are not already open.

Step four Click on package.json to view it. This is a file that hold all of the information about your project. We will get familiar with it later. For right now, I just want you to update your name and email address in there (the question of whether or not it makes sense to list yourself as “author” is one we will table for the moment)

Step five Install the needed packages. I have set you up with a project structure that we will be using a lot as we move through the semester. Specifically, this is set up to create a web application using React and React Router. I have some other tooling in there for tests and linting. You can largely ignore these for now. To install the packages, type pnpm install into the terminal. This should produce a directory called node_modules and populate it with a lot of packages.

Step six Start the development web server. In the panel on the left, under the list of files, there is a panel called ‘NPM Scripts’. If it isn’t visible, click the three dots at the top of the panel and select it from the drop down. One of the options is dev. If you hover over it, you will see a triangular “run” button. Click it. This will open a new tab in the terminal pane and it will start a web server that runs your project ¹. You will get a message that looks something like this:

> react-router dev

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Click on the “Local” link (or just copy it into your web browser). This should open up the web site, which will just say something about there being nothing to see. The development server is fairly cool – it will perform live updates when we make changes to the code. So, once we (or the AI) start making changes, this page will update in real time.

You should now be all set up. Reach out if any of these steps didn’t work.

Building the site

The data is in app/data/recipes.json. Take a look at it, so you know what kind of data you are starting with.

This data was also generated using an AI, so I will not testify to the quality of any of the recipes. This is, however, an example of something that AI really excels at: generating structured data for testing. This was the prompt:

generate a JSON file of recipes. give me forty recipes. Each should have a name, a classification (e.g., entree, dessert, breakfast, etc…), a description, servings, ingredients that have the quantities in a separate field so we can recalculate the servings, and steps.

Your goal is to create a recipe website for the provided data. You can interact directly with Copilot in VSCode (you have access to this through the GitHub Student Developer Pack). Don’t just copy the above as your prompt. The more specific you are about what you want your application to look like and do, the better the results. Once you have crafted a good prompt, enter it into Copilot and let it go to town generating code.

Tip

It can be helpful to tell Copilot that the directory already contains the start of a project using React Router.

Making refinements

Once the site is generated, take some time to poke around wth it. Make sure it works the way would you like. Do any features you specified work as expected? Do you like the styling?

If you find any issues, go back to Copilot and ask for changes to made. Remember that all alterations to your code should be done by Copilot. The one exception is if Copilot corrupts a file and can’t figure out how to get out of it. In that case, you can erase the contents of the file and ask Copilot to regenerate it – that usually gets it past errors it creates when it modifies its own code multiple times.

Reflecting

You will find a file called reflection.md in the folder. There are a couple of questions in there. Take a moment to answer them.

Important

Failure is an option here. You will not be evaluated by the quality of the generated site. I want you to have the experience of trying this process. It is the reflection that matters the most here.

Submitting

All of our submissions will take the same form.

• Commit all changes to the local repository
• Push the changes to GitHub
• Submit the assignment on Gradescope

We will get into the details later, but here are the bare bones instructions:

• Add all of the changed files to git with git add .
• Commit the changes with git commit -m "created recipe site" (you can replace the message in quote with whatever you like – it just wants to be short and informative about what this commit does).
• Push the code back to GitHub with git push --all origin
• Submit your code to Gradescope as described here.

You can repeat these steps as many times as you like.

Footnotes

1. As an alternative, you can type pnpm dev into the terminal.