🖥️ Adding an image to the Game model

In this guide, we will add an imageUrl field to our Game model. This will allow us to store the URL of an image for each game.

Understanding Database Schema Changes

When building applications, it’s common to need to update your database schema as your application evolves. Prisma makes this process straightforward with its migration system.

1: Update the Prisma Schema

First, we need to modify our Prisma schema to include the new imageUrl field in the Game model.

Open the prisma/schema.prisma file in your code editor, and add the following code:

Take care to place code exactly where shown below.

model Game {
  id          String   @id @default(uuid())
  title       String
  description String
  price       Float
  rating      Float
  releaseDate DateTime
  imageUrl    String?

  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt

2: Create a Migration

After updating the schema, we need to create a migration to apply this change to our database. Run the following command in your terminal:

npx prisma migrate dev --name add_image_url_to_game_model

This command will:

Generate a new migration file
Apply the migration to your development database
Generate an updated Prisma client

The migration file will look something like this:

-- AlterTable
ALTER TABLE "Game" ADD COLUMN "imageUrl" TEXT;

3: Source images from the Internet

Before we can add actual image URLs to our seed data, we need to find some images to use.

Open your seed file at prisma/seed.ts.

Look carefully at the game titles in the seed data.

1
  const games = [
2
    {
3
      title: "The Legend of Zelda: Breath of the Wild",
4
      description: "An open-world adventure game set in the kingdom of Hyrule.",
5
      price: 59.99,
6
      rating: 4.9,
7
      releaseDate: new Date("2017-03-03"),
8
    },
9
    {
10
      title: "The Witcher 3: Wild Hunt",
11
      description:
12
        "An action RPG set in a fantasy world full of monsters and magic.",
13
      price: 39.99,
14
      rating: 4.8,
15
      releaseDate: new Date("2015-05-19"),
16
    },
17
    {
18
      title: "Red Dead Redemption 2",
19
      description: "An open-world western adventure game.",
20
      price: 59.99,
21
      rating: 4.7,
22
      releaseDate: new Date("2018-10-26"),
23
    },
54 collapsed lines
24
    {
25
      title: "God of War",
26
      description: "An action-adventure game based on Norse mythology.",
27
      price: 49.99,
28
      rating: 4.9,
29
      releaseDate: new Date("2018-04-20"),
30
    },
31
    {
32
      title: "Minecraft",
33
      description:
34
        "A sandbox game where players can build and explore their own worlds.",
35
      price: 26.95,
36
      rating: 4.8,
37
      releaseDate: new Date("2011-11-18"),
38
    },
39
    {
40
      title: "Fortnite",
41
      description:
42
        "A battle royale game where players fight to be the last one standing.",
43
      price: 0.0,
44
      rating: 4.5,
45
      releaseDate: new Date("2017-07-25"),
46
    },
47
    {
48
      title: "Cyberpunk 2077",
49
      description: "An open-world RPG set in a dystopian future.",
50
      price: 59.99,
51
      rating: 4.0,
52
      releaseDate: new Date("2020-12-10"),
53
    },
54
    {
55
      title: "Among Us",
56
      description:
57
        "A multiplayer game where players work together to complete tasks on a spaceship.",
58
      price: 4.99,
59
      rating: 4.4,
60
      releaseDate: new Date("2018-06-15"),
61
    },
62
    {
63
      title: "Animal Crossing: New Horizons",
64
      description:
65
        "A life simulation game where players can build and manage their own island.",
66
      price: 59.99,
67
      rating: 4.9,
68
      releaseDate: new Date("2020-03-20"),
69
    },
70
    {
71
      title: "Hades",
72
      description:
73
        "A rogue-like dungeon crawler where players fight their way out of the Underworld.",
74
      price: 24.99,
75
      rating: 4.9,
76
      releaseDate: new Date("2020-09-17"),
77
    },
78
  ];

4: Upload Images to Cloudinary

Next, you will need to create an account with Cloudinary.

Navigate to the Cloudinary sign-up page and sign up for a free account.
Once you have created an account, you will be presented the question below. Select the option shown below:
Navigate to AssetsMedia Library.
Click the Upload button and select the images you want to upload.
Once the images have uploaded, click on each one to view its details.
Copy the URL for each image, as we will need these in the next step:

5: Update the Seed Data

Now that we have the new field in our database, we should update our seed data to include image URLs for our games.

Open the prisma/seed.ts file in your code editor, and add the code shown below.

The URLs shown below are just examples. You will need to replace these with the real URLs you copy from Cloudinary.

async function seed() {
  const games = [
    {
      title: "The Legend of Zelda: Breath of the Wild",
      description: "...",
      price: 59.99,
      rating: 4.9,
      releaseDate: new Date("2017-03-03"),
      imageUrl:
        "https://res.cloudinary.com/abcdefgh/image/upload/v1234567890/gamelog/zelda_osdu8u.webp",
    },
    {
      title: "The Witcher 3: Wild Hunt",
      description: "...",
      price: 39.99,
      rating: 4.8,
      releaseDate: new Date("2015-05-19"),
      imageUrl:
        "https://res.cloudinary.com/abcdefgh/image/upload/v1234567890/gamelog/witcher-3_tueizl.webp",
    },
    // Additional games with image URLs...

6: Apply the Updated Seed Data

Now that we have updated the seed data, we need to apply these changes to our database. Run the following command:

npm run setup

After hitting enter, you will be asked to confirm if you want to delete all data in the database. Click ‘y’ to confirm.

This will delete all data in the database and re-run the seed file.

It will update your database with the new image URLs for each game.

You can check the database to confirm the changes have been applied by running the following command:

npx prisma studio

You should see the new imageUrl field in the Game table, with a URL for each game.

What We’ve Learned

In this tutorial, we’ve:

Updated our Prisma schema to include a new field for storing image URLs
Created and applied a database migration to update our database schema
Updated our seed data to include image URLs for our games
Applied the updated seed data to our database

These changes prepare our application to display images for each game, which will make our UI more visually appealing and informative.

Next Steps

Now that we have image URLs stored in our database, we can update our GameCard component to display these images instead of using placeholder images. This will be covered in the next guide.

Great job! You’ve successfully updated your database schema and seed data to include images for your games.

This is a common task in web development, and Prisma makes it easy with its migration system.

In the next guide, we’ll use these image URLs to display actual game images in our UI.

Click to reveal