Assignment Five

Published

April 30, 2026

Due
May 05, 2026 at 11:59 PM

Goals

  • Revisit our experiment with vibe coding now that you have a solid foundation on which to build

Background

For your final assignment, we are going to revisit assignment zero. Like assignment zero, this is only sort of an “assignment” – I just don’t have something better to call it…

Prerequisites

  1. Create the git repository for your practical by accepting the assignment from GitHub Classroom. This will create a new repository for you with the Next/React infrastructure in place.

  2. Clone the repository to you computer with git clone (get the name of the repository from GitHub).

  3. Open up the package.json file and add your name as the author of the package.

  4. Install the module dependencies by typing pnpm install in the shell in the terminal in the root directory of your package (the directory that contains the package.json file).

The site

For this foray into vibe coding, we are going to do something a little different. We are going to make our own version of the Pokédex.

We don’t have quite the same data, so the intent is not to make a duplicate site. Our data comes from Kaggle. The dataset includes statistics about all of the Pokémon as we as images. You will find the data in data/pokedex.json and the images are in public/images.

here is what the data for a single Pokémon looks like:

{
    "Image": "images/3.png",
    "Index": 3,
    "Name": "Venusaur",
    "Type 1": "Grass",
    "Type 2": "Poison",
    "Total": 525,
    "HP": 80,
    "Attack": 82,
    "Defense": 83,
    "SP. Atk.": 100,
    "SP. Def": 100,
    "Speed": 80,
    "AlternateForms": [
      {
        "Image": "images/4.png",
        "Index": 3,
        "Name": "Venusaur Mega Venusaur",
        "Type 1": "Grass",
        "Type 2": "Poison",
        "Total": 625,
        "HP": 80,
        "Attack": 100,
        "Defense": 123,
        "SP. Atk.": 122,
        "SP. Def": 120,
        "Speed": 80
      }
    ]
  }

Not all Pokémon have a `Type 2 field.

Also, the AlternateForms field may or may not be present. If it is present, it will be an array containing potentially several alternate forms with records of the same type as the base Pokémon.

The goal here is a site that someone could use to explore the various Pokémon using the tools we used this semester (RRv7 with React and TypeScript) and demonstrate all of the good development practices that we have talked about in class (including tests!). Start by thinking about what the basic requirements for the site might be. I expect to see a site that makes use of React Router’s features like loaders and routing.

The task

This time I am placing no restrictions on what is written by you and what is written by Copilot (or the AI of your choice).

My advice is to follow our established development process (though you can skip the user stories), ceding control over the actual programming, but not over the design and structure.

As with Assignment 0 failure to produce a working site is a valid result. The important portion here is for you to have gone through the process and reflected on both it and the outcome.

Reflection

The most important part of this process is the reflection. Before you write it, go back and take a look at your work for assignment 0. Look over the structure and then read what you wrote in your reflection at the time.

Finishing Up

  1. Make sure the tests are passing (with pnpm test), there are no linting errors (with pnpm run lint), and no type errors (with pnpm run typecheck)
  2. Add and commit your changes and push those commit(s) to GitHub.
  3. Submit your repository to Gradescope