Assignment Five

Published

November 20, 2025

Due
December 05, 2025 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).

  5. Get some practice with our new workflow and start by making a feature branch in your repository.

  6. Make sure that you have completed the Getting Started steps and have Docker Desktop installed.

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
      }
    ]
  }

:::{.callout-note}

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. The basic requirements are:

  • The front page should display a collection of Pokémon including image name and type(s)
  • Clicking on a Pokémon should go to a full page that displays the image and all of the stats.
  • If a Pokémon has alternate forms, they should be identified as such and also displayed on the page.
  • There should be some form of pager that limits the number of visible Pokémon on the main page (we don’t want to load them all)
  • There should be some interface that allows the user to filter by type

You are welcome to add additional requirements provided they don’t conflict with these core requirements.

In addition, to these functional requirements, the site should be written using the tools we used this semester (Next.js with React and TypeScript) and demonstrate all of the good development practices that we have talked about in class (including tests!).

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.

While I didn’t spell it out on 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