Midterm Practice Questions: The Task App

These practice questions cover the last section of Material for Midterm: the architecture of the task app we built in Classes 10–12. They ask about the pieces of the app, what each one is responsible for, where it runs, and how the pieces talk to each other. They don’t ask about the specific commands, menus or settings of the setup steps. Use them to test yourself before the exam.

There are 40 questions here, grouped by difficulty — Easy, Medium and Hard, plus two Challenge questions at the end. Inside each difficulty level, the questions are grouped by subject, in the same order as the subjects in the midterm summary:

Every question has a suggested answer in a box that starts collapsed. Try to answer each question yourself before you open its answer — that is what makes the practice work.

The other midterm practice pages: Midterm Practice Questions (the rest of the material on this website) and Midterm Practice Questions: How Modern Software Is Built in 2026.

Practice Questions

Easy

Subject: What the App Does, and the Tech Stack

Question 1 · Multiple choice

In Classes 10–12, what was your job with the task app?

  1. Write the app’s code from scratch with Claude Code
  2. Set up the services the app depends on, run it on your own computer, and put it online
  3. Design the app’s database and then have Claude build the app around it
  4. Translate the app from Python into JavaScript

b. The code was already written (it comes from a tutorial video). The work was setting up the services the app depends on (Supabase, Google, OpenAI, Stripe, Vercel), running the app on your own computer, and deploying it. Option a describes the third project of the course (build your own app), c describes the second (change the app’s database), and d never happened.

Question 2 · Matching

Match each service with what the task app uses it for.

Service What the app uses it for
1. Supabase A. Hosts the website online once it works on your computer
2. Google Cloud B. Subscription payments (in test mode)
3. OpenAI API C. Stores your copy of the code
4. Stripe D. Database, user logins, image storage and Edge Functions
5. Vercel E. “Sign in with Google”
6. GitHub F. Suggests a label for each new task

1 → D, 2 → E, 3 → F, 4 → B, 5 → A, 6 → C.

Question 3 · Fill in the blank

A ______ is the set of technologies an app is built from, together with where each part runs. The task app’s includes Next.js, Supabase, Vercel, and three third-party services: Google, ______ and ______.

Tech stack; OpenAI; Stripe.

Question 4 · Multiple choice

Which of these is not a feature of the task app?

  1. Attaching an image to a task
  2. An AI-suggested label on each new task
  3. Sharing a task with another user
  4. A paid monthly Premium plan

c. Each user sees only their own tasks; there is no sharing. The app’s features are sign-up and sign-in (email and password, or Google), creating and editing tasks, the AI label, image attachments, a profile page with the plan and the month’s task count, and the Premium subscription through Stripe.

Question 5 · Fill in the blank

A new user starts on the ______ plan, which allows ______ tasks a month. The Premium plan costs ______ a month and allows ______ tasks.

Free; 100; $10; 10,000. The profile page shows the plan and how many tasks the user created this month out of their limit.

Question 6 · True or false

A user can attach any kind of file, of any size, to a task.

False. Only image files (JPEG, PNG, GIF or WebP) of up to 1 MB are accepted; anything else gets an error. The images go into Supabase’s storage bucket, and the app displays them on the task.

Question 7 · Short answer

What are the two ways to sign in to the task app, and what happens if a signed-out user types the dashboard’s address into the browser?

With an email and password, or with Sign in with Google. The dashboard and the other pages that show a user’s data are protected: a signed-out visitor is sent back to the login page.

Subject: Front End and Back End

Question 8 · Multiple choice

Which of these runs in the user’s browser?

  1. The PostgreSQL database
  2. The Edge Function that asks OpenAI for a label
  3. The app’s pages, buttons and forms, and the Supabase client library they use
  4. Stripe’s checkout page’s payment processing

c. The front end is what runs in the browser: the HTML, CSS and JavaScript that Next.js produces, plus the client library the pages use to talk to Supabase. The database (a) and the Edge Functions (b) run on Supabase’s servers; Stripe (d) processes payments on its own servers.

Question 9 · Short answer

While you were building the app, you opened it at the address localhost:3000. What do localhost and 3000 mean, and who else could open that address?

localhost means “this computer”, and 3000 is a port: a number that says which program on the computer should answer, because many programs can listen for connections at once. So the address means “the program on my own computer that is listening on port 3000”: the development server that hands the app’s pages to your browser. Nobody else can open it; it’s only reachable from your own computer.

Subject: The Database, the Data API, and Row Level Security

Question 10 · True or false

The images that users attach to their tasks are stored inside the PostgreSQL database.

False. Image files go into Supabase’s storage (a storage bucket, similar to Amazon S3). The database holds the app’s data in tables, such as the users’ profiles and their tasks.

Question 11 · Short answer

What is Row Level Security (RLS), in one or two sentences? Give the example from the task app.

RLS is a set of rules, stored in the database, about which rows of a table each user may see or change. In the task app the rule is “a user sees only their own tasks”: all users’ tasks are in one table, and RLS keeps each user out of the others’ rows.

Subject: Logging In: Authentication and OAuth

Question 12 · Fill in the blank

______ means checking who a user is. “Sign in with Google” works through ______, a standard way for one website to let you sign in with your account at another website without ever seeing your ______.

Authentication; OAuth; password.

Subject: Edge Functions and Secrets

Question 13 · Multiple choice

What is an Edge Function, in this project?

  1. A JavaScript function inside the app’s web pages that runs when the user clicks a button
  2. A small program of your own that runs on Supabase’s servers when something calls its web address
  3. A rule in the database that decides which rows a user may see
  4. A setting on Vercel that makes the website load faster

b. An Edge Function runs on Supabase’s servers, not in the browser. It waits until something calls it, does one job, sends back an answer, and stops; you upload the code and Supabase runs it. Option a is front-end code, c describes Row Level Security, and d is made up.

Question 14 · Matching

Match each of the app’s three Edge Functions with its job.

Edge Function Job
1. create-task-with-ai A. Receives Stripe’s message that a payment went through, and upgrades the user
2. create-stripe-session B. Saves a new task and asks OpenAI to pick a label for it
3. stripe-webhook C. Asks Stripe for a checkout page, or the customer portal, for this user

1 → B, 2 → C, 3 → A.

Subject: Keys: Publishable vs. Secret

Question 15 · True or false

A publishable key may appear in the app’s web pages, where anyone can read it.

True. That is what “publishable” means: the key is made to be seen. It only allows what the service’s rules allow; for Supabase, only what the Row Level Security rules allow. A secret key is the opposite: it can do anything in the account, so it must never leave the server side.

Subject: Payments with Stripe

Question 16 · Short answer

Everything we did in Stripe was in “test mode” (a sandbox). What does that mean?

A sandbox is a practice copy of a Stripe account with pretend money: you pay with test card numbers, and no real money ever moves. The real account, for real customers and real money, is the live account, which this project never used.

Subject: The AI Label (OpenAI)

Question 17 · Multiple choice

How does the task app get the AI label for a new task?

  1. The browser sends the task to OpenAI directly, using a key stored in the page
  2. An Edge Function sends the task’s title and description (and the labels already in use) to the OpenAI API and gets back a label
  3. Supabase’s database has a built-in AI that labels each row
  4. The user picks a label from a list that ChatGPT wrote in advance

b. The Edge Function create-task-with-ai does it, on Supabase’s servers, because the request needs the OpenAI API key, which must stay secret. Option a would put the secret key in the browser; c and d are made up.

Subject: From the Code on GitHub to the App Online

Question 18 · Short answer

What is a fork, and what is a clone?

A fork is your own copy of someone else’s GitHub repository, stored in your GitHub account; you can change it freely, and the original stays untouched. A clone is a copy of a repository downloaded to your computer, with its whole history; it remembers where it came from, so your later changes can be pushed back up. In class you forked the course’s repository and then cloned your fork.

Medium

Subject: What the App Does, and the Tech Stack

Question 19 · Short answer

Why is the app’s back end spread across several companies (Vercel, Supabase, Google, OpenAI, Stripe) instead of running on one computer? Name one advantage and one cost of that.

Each company specializes in one hard job: logins, payments, AI, hosting, databases. Instead of building and running those yourself, you use their service and connect to it with web addresses and keys. The advantage is that a small team (or one student) gets professional-grade logins, payments and AI without building them. The cost is complexity: many accounts, keys and settings to create and keep track of, which is why the setup was the hard part and why the course gave you a worksheet.

Question 20 · Short answer

Where do the task labels come from? Name the five standard labels and explain what the AI may do beyond them.

A moment after a task is created, the app’s Edge Function sends the task’s title and description to OpenAI, together with the labels in use, and gets one label back. The five standard labels are work, personal, priority, shopping and home. The AI picks one of them, or a label the user already uses, or suggests a new one when none of those fits (the course’s version of the app allows new labels; the original tutorial allowed only the five).

Question 21 · Scenario

Maria is on the free plan. What does the Manage Subscription button on her profile page do, and what does the same button do after she has upgraded to Premium?

For a free user, Manage Subscription opens Stripe’s checkout page, where she subscribes to the Premium plan (in class, with a test card number, so no real money moved). Once she is Premium, the same button opens Stripe’s customer portal, where she can look at or cancel the subscription. Both pages are Stripe’s own; the app asks an Edge Function to create them.

Question 22 · Scenario

Sam, on the free plan, has created 100 tasks this month and tries to create one more. What happens, which part of the app enforces it, and what would change that?

The task is refused with an error that says the monthly task limit was reached. The database enforces it: a rule in the database checks the user’s task count for the month against the limit in their profile before every new task is saved, so neither the app’s pages nor the Edge Function can get around it. Upgrading to Premium raises the limit (to 10,000 a month); so does waiting for the next month, when the count starts again.

Subject: Front End and Back End

Question 23 · Scenario

Maria started the app on her laptop, opened it at localhost:3000, and saw the home page, but she could not log in. The back end wasn’t set up yet. Explain why the home page worked but login didn’t.

The home page is the front end: pages, buttons and forms that the development server on her laptop hands to her browser. That needs nothing but the code on her computer. Login needs the back end: user accounts and the database come from Supabase. With no Supabase project set up yet (and no project URL and key in the app’s settings), the front end had nothing to talk to, so login failed.

Question 24 · Compare

Compare running the app on your own computer with running it on Vercel. What is different, and what stays the same?

Different: on your computer the web server is a development server at localhost:3000, reachable only by you; on Vercel the same app is built and hosted at a public address that anyone can open, and Vercel redeploys it whenever you push to your fork. The same: it’s the same code, and the same back end: the same Supabase project (database, logins, storage, Edge Functions) and the same third-party services. Only the web server moved.

Subject: The Database, the Data API, and Row Level Security

Question 25 · Short answer

What are the database migrations, and why does the project include them instead of having each student create the tables by hand?

Migrations are files in the project that describe the database’s structure: the tables (profiles, tasks, …), their security rules, and the storage bucket for images. Running them on your Supabase project creates all of that. Because they’re part of the code, every student’s database gets exactly the same structure, with no typos and nothing forgotten, and the structure is saved in Git along with the code.

Question 26 · Multiple choice

The app’s pages read and change the database through Supabase’s Data API. Why does the database itself still need Row Level Security rules?

  1. Because the Data API only works for tables that have RLS turned on
  2. Because the Data API is open to anyone who has the publishable key, and that key is inside the app’s web pages
  3. Because PostgreSQL cannot store more than one user’s data without RLS
  4. Because Vercel requires it

b. The browser talks to the Data API with the publishable key, which anyone who opens the page can read. So anyone could send requests to the Data API; what stops them from reading other users’ tasks is the RLS rules in the database. Option a has it backwards (RLS restricts the Data API; the API doesn’t need it to work), and c and d are made up.

Subject: Logging In: Authentication and OAuth

Question 27 · Ordering

Put the stops of “Sign in with Google” in order:

  • Supabase trades the code (plus the app’s client secret) for the user’s name and email, creates or updates the user, and sends the browser back to the app
  • The user clicks Sign in with Google in the app
  • Google sends the browser to Supabase’s callback address with a one-time code
  • The user signs in at Google and agrees to share their name and email
  • The browser goes to Supabase, which sends it on to Google’s sign-in page
  1. The user clicks Sign in with Google in the app.
  2. The browser goes to Supabase, which sends it on to Google’s sign-in page.
  3. The user signs in at Google and agrees to share their name and email.
  4. Google sends the browser to Supabase’s callback address with a one-time code.
  5. Supabase trades the code (plus the app’s client secret) for the user’s name and email, creates or updates the user, and sends the browser back to the app.

The app never sees the user’s Google password: Google does the sign-in, and Supabase does the exchange.

Question 28 · Short answer

The app is registered with Google as an “OAuth client” with a Client ID and a Client secret. What is each one for, and which one is secret?

The Client ID tells Google which app is asking the user to sign in; it is public (it even appears in the address of Google’s sign-in page). The Client secret proves to Google that the request really comes from your app when Supabase exchanges the one-time code for the user’s details; it is secret, and it lives in Supabase’s sign-in settings, never in the app’s pages.

Subject: Edge Functions and Secrets

Question 29 · Short answer

Why does the app need Edge Functions at all? Why can’t the browser ask OpenAI or Stripe directly?

Asking OpenAI or Stripe requires a secret key, and anything that runs in the browser can be read by anyone who opens the page. If the key were in the browser, anyone could copy it and use your OpenAI credit or your Stripe account. So the browser asks an Edge Function, and the function uses the key on Supabase’s server, where nobody can see it.

Question 30 · Short answer

The OpenAI key and the Stripe key are stored as Supabase “secrets”. How does an Edge Function get a secret, and where do the secrets not appear?

A secret is a named value stored on Supabase. The function’s code reads it by its name, and Supabase supplies the value when the function runs. The secrets never appear in the code itself, so they are never in your repository or on GitHub, and they never reach the browser.

Subject: Keys: Publishable vs. Secret

Question 31 · Matching

Match each key with where it lives in the task app.

Key Where it lives
1. Supabase publishable key A. A Supabase secret, read by the Edge Functions
2. OpenAI API key B. Supabase’s Google sign-in settings
3. Google Client secret C. The app’s settings file on your computer, and from there the browser
4. Stripe webhook signing secret D. A Supabase secret, read by the stripe-webhook function

1 → C, 2 → A, 3 → B, 4 → D. Only the publishable key (and the project’s URL) goes to the browser; every secret stays on a server.

Question 32 · Scenario

Sam’s Supabase project URL and publishable key are different from Maria’s, yet they both run the same code from GitHub. How does the app know which project to talk to, and why isn’t that information simply written into the code?

The app reads the URL and the publishable key when it starts from a settings file on each student’s computer (environment variables), and on Vercel from values entered in the website’s settings. They can’t be in the code because the code is shared by everyone, and each student’s values are different. The project’s .gitignore keeps the settings file out of Git, so it is never uploaded to GitHub, which also keeps any keys in it private.

Subject: Payments with Stripe

Question 33 · Short answer

What is a webhook, and what is the task app’s webhook used for?

A webhook is a web address that another service calls to tell your app that something happened. The task app’s webhook is the Edge Function stripe-webhook: Stripe calls it to say “this customer paid” (or “this subscription was cancelled”), and the function upgrades (or downgrades) the user. Without it, the user would pay on Stripe’s page and the app would never find out.

Subject: The AI Label (OpenAI)

Question 34 · Short answer

The course put two “locks” on OpenAI spending. What were they, and why two?

First, prepaid credit with auto-reload off: when the credit runs out, requests stop, and OpenAI never charges the card again on its own. Second, a hard spend limit on the project: once the project reaches it, new requests fail. The second lock is for this project only, so if you ever buy more credit for something else, or turn auto-reload on by mistake, this app still can’t spend more than the limit.

Hard

Subject: What the App Does, and the Tech Stack

Question 35 · Scenario

A Premium user opens the customer portal and cancels. Explain what the user sees in the app afterwards, and how the app finds out about the cancellation, naming the pieces of the architecture that take part.

The user goes back to the free plan: the profile page shows “free” again, and the monthly task limit goes back to 100. The app only finds out because Stripe tells it: the cancellation happens on Stripe’s own page (the customer portal), so Stripe calls the app’s webhook, the Edge Function stripe-webhook, with a signed message that the subscription was cancelled. The function checks the signature and updates the user’s profile in the database to the free plan, and a database rule resets the task limit. The next time the browser reads the profile, it shows the change. Without the webhook, the user would stay Premium in the app after cancelling.

Subject: Front End and Back End

Question 36 · Scenario

Trace what happens when a logged-in user creates a task in the app. Name each program or service that takes part, in order, and say what it does. (Hint: the browser, the Edge Function, OpenAI and the database all take part.)

  1. The browser (the front end) sends the new task’s title and description to the Edge Function create-task-with-ai, together with the user’s login.
  2. The Edge Function, on Supabase’s server, checks who the user is, saves the task in the database, and sends the title and description (plus the labels already in use) to the OpenAI API, using the secret OpenAI key.
  3. OpenAI sends back a label.
  4. The function stores the label with the task in the database.
  5. The browser reads the task, with its label, from the database through the Data API, where Row Level Security lets the user see only their own tasks.

A good answer puts the secret-key work on the server (the Edge Function), not in the browser.

Subject: Payments with Stripe

Question 37 · Scenario

When a user clicks Upgrade, the browser does not talk to Stripe itself. It asks an Edge Function, which asks Stripe for a checkout page. Explain why the request to Stripe must come from a server. Then explain what the webhook adds after the user pays, and why Stripe signs its webhook messages.

Asking Stripe for a checkout page needs the Stripe secret key, which can do anything in the account, so it must never be in the browser. Also, anything in the browser can be changed by its user: if the browser chose the price, a user could pick their own. The Edge Function, on the server, checks who the user is and asks Stripe for a checkout page for that user at your price.

After the user pays on Stripe’s page, the app has no way of knowing. So Stripe calls the app’s webhook, the Edge Function stripe-webhook, to say “this customer paid”, and the function upgrades the user. Stripe signs every message with a signing secret, and the function checks the signature; otherwise anyone could send a fake “payment succeeded” message to the webhook’s address and get Premium for free.

Subject: Logging In: Authentication and OAuth

Question 38 · Scenario

After Sam deployed the app to Vercel, “Sign in with Google” still worked on his laptop but failed on the Vercel address, until he added the Vercel address to the redirect URLs in Supabase (and to his Google client’s settings). Why do Supabase and Google keep lists of allowed addresses, and why did the Vercel address have to be added?

During sign-in, the browser travels from the app to Google, to Supabase, and back to the app, carrying a one-time code and then the user’s login. Google only sends the user on to addresses on the client’s list, and Supabase only sends them back to addresses on its list, so that nobody can trick either one into sending a freshly signed-in user, with their login, to some other website. The lists were made when the app lived only at localhost:3000. The Vercel address is a new, different address, so until it was on the lists, Supabase refused to send users back there, and sign-in failed only on Vercel.

Subject: Keys: Publishable vs. Secret

Question 39 · Long answer

A classmate says: “The Supabase publishable key is in the web pages, where anyone can read it, so anyone can read everybody’s tasks. The app is insecure.” Is that right? Explain what the publishable key allows, what stops it from exposing other users’ data, and which key would expose everything if it leaked.

Not right. The publishable key is made to be seen: it tells Supabase which project a request belongs to, and it only allows what the project’s Row Level Security rules allow. The rules say a user sees only their own tasks, and they are enforced by the database itself, for every request, no matter who sends it. So someone who copies the key from the page can only do what a logged-in user of the app can do: see their own data.

The key that would expose everything is the Supabase secret key, which skips all RLS rules. That’s why it never leaves the server side (Supabase hands it only to the Edge Functions) and never goes into the pages, GitHub, or an AI chat. A good answer separates “readable by anyone” (fine for a publishable key) from “allows anything” (only the secret key), and names RLS as the real protection.

Challenge

Question 40 · Long answer

Draw (or describe) the architecture diagram of the task app from memory: the browser, Vercel, Supabase’s four parts, the three third-party services, and GitHub. For each arrow between two boxes, say what travels along it. Then pick one feature of the app (image attachments, the AI label, or the Premium upgrade) and mark every box that takes part in it.

A good diagram has: the browser (the front end: pages, forms, the Supabase client library); Vercel, the web server that hands the pages to the browser (on your laptop, the development server plays this role); Supabase with its database, authentication, storage and Edge Functions; Google, OpenAI and Stripe as separate boxes; and GitHub, from which Vercel gets the code.

Arrows: browser ↔︎ Vercel (the pages); browser ↔︎ Supabase database (task data through the Data API, limited by RLS), authentication (logins), storage (images) and Edge Functions (requests that need a secret key); authentication ↔︎ Google (OAuth sign-in: Client ID, one-time code, the user’s name and email); Edge Functions → OpenAI (title and description out, a label back) and → Stripe (a checkout page request, with the secret key); Stripe → the webhook function (“this customer paid”, signed); GitHub → Vercel (the code, on every push).

For a feature, for example the Premium upgrade: browser → create-stripe-session Edge Function → Stripe (checkout page) → the user pays on Stripe’s page → Stripe → stripe-webhook Edge Function → database (the user’s profile is upgraded) → browser (shows Premium). For the AI label: browser → create-task-with-ai → database and OpenAI → database → browser. For images: browser → authentication (who is this?) → storage. The point is to show which pieces talk to which, and that every secret key stays on a server.

© 2025-2026 Y. Rosenthal. All rights reserved.