Assignment Zero

Published

September 9, 2025

Due
September 11, 2025 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 ‘v22.17.1’, 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 Next.js. 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 1. You will get a message that looks something like this:

   ▲ Next.js 15.4.6
   - Local:        http://localhost:3000
   - Network:      http://192.168.86.244:3000
   - Environments: .env.local

Click on the “Local” link (or just copy it into your web browser). This should open up the web site, which will just say “Blank Site”. 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 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 should be a nice website where people can search for recipes and then read through them. The basic requirements are

  • there should be obvious ways to navigate to any recipe
  • there shouldn’t be more than ten recipes listed on a page at one time
  • we want to be able to share recipes, so recipes should have unique URLs
  • there should be some way to change the serving size for a recipe and have the amounts recalculated

You should think some about additional requirements you want to impose on the site. 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.

Making refinements

Once the site is generated, take some time to poke around wth it. Make sure it works the way would you like. Does all of the navigation work as you expect? Are the serving sizes working correctly (did you compensate for eggs to make sure you don’t have recipes with fractional eggs)? 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.

Saving the project in git

We aren’t going to bother submitting this to Gradescope, but we will store these results on GitHub. I will give you the abbreviated form – we will expand more later

  • Add all changed files by typing git add . in the terminal
  • Commit your changes by typing 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).

Finally submit your assignment by pushing your changes to the GitHub via git push --all origin.

Footnotes

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