Supabase Dog Adoption App

Use this template for this deliverable.

Learning Objectives

Draw a simple architecture diagram describing the relationship between a user's computer and a single RESTful API.
On load, use fetch and async/await to hit a GET endpoint, get all items, and set state and update the view using the response.
In front end apps with asynchronous behavior, use the network tab to examine (and debug) the request being sent to a server and the response received from a server.

Here is the model for the dogs table

Joining Tables

Note that the dog_breeds for all dogs live in a dog_breeds table, joined using breed_id on the dog.

// here's an example using tabletop games instead of dogs
export async function getGameById(id) {
    const { data, error } = await client
        .from('tabletop_games')
        .select(`
            *,
            designers (name)
          `)
        .eq('id', id)
        .single();

    if (error) console.error(error);

    return data;
}

Live Example:

https://alchemycodelab.github.io/web-01-adopt-a-dog/

Description

For this deliverable you have been given a supabase database and some render functions. Your job is to add the code in fetch-utils.js, render-utils.js, app.js and detail.js to render the list of animals and the details page.

Rubric

The following is required for your assignment to be graded:

PR open from dev to main
PR Passes CI (lint + tests)
PR preview on netlify
At least 4 commits, for each working feature