Week 5: API and Database Integration

The core loop

• The UI shows data and collects user input.
• The data is the content: products, posts, users, bookmarks, and more.
• The server / database stores the data and sends it when the UI asks.

What data binding means

Data binding connects a piece of data to a piece of the interface so that when the data changes, the screen updates automatically.

• Static: text is typed directly into the design.
• Dynamic / bound: text comes from data.

You design one card. The app repeats it for every item in a data array.

States designers must design

Real data takes time and can fail. Every data-driven screen needs these states:

• Loading - a skeleton or spinner while data is on its way.
• Empty - a friendly message when there is nothing to show yet.
• Error - a clear, recoverable message when the request fails.
• Success - the actual content.

What is an API?

An API (Application Programming Interface) is the menu and the waiter of a restaurant. You (the UI) don't go into the kitchen (the server) to get the food. You ask the waiter for something on the menu, and they bring it back. The API defines what you can ask for and what you get back.

Endpoint: the address you call

An endpoint is the specific URL you send your request to. For example, https://api.open-meteo.com/v1/forecast?latitude=42&longitude=-93 returns weather data for the location (latitude=42, longitude=-93).

An API can provide multiple endpoints: one to read data, one to create a record, one to update it, and so on.

What is JSON?

JSON is the format data travels in. It looks like a labeled list of values. In a web application, data is often exchanged in JSON format.

Example:

{
  "title": "Inception",
  "year": 2010,
  "rating": 8.8,
  "genres": ["Sci-Fi", "Thriller"]
}

When you call a endpoint of a API, you will receive data in JSON format. This is the data your application will use.

Examples of public API endpoints

Following are some examples of public API endpoints. You can explore what kinds of data you can get from them.

Find more public APIs: publicapis.dev

Using a Public API (Read-Only Data)

For public APIs, only GET is allowed — you can read data, but you cannot edit their data.

First, find the API you want to use. You can search online or ask your AI agent. For example:

Then describe how your app will display the data:

Using an Authenticated API

For private APIs (also called authenticated APIs), all four verbs are available — but you need a credential (usually an API key or login token) to prove you are allowed. When you build your own app or connect to a service you have an account with, you are typically working with a private API. That is when POST, PUT/PATCH, and DELETE become useful — saving user data, updating a profile, deleting a record, and so on.

API Keys and Secrets

Most authenticated APIs require a key to identify you. For example, a Canvas API key lets a dashboard confirm the request comes from you, not anyone else — the server recognizes the key, not the person. So anyone who has your key can access your data or spend your money.

Here is the honest picture for the kind of app you are building:

• Your app runs in the browser, so any key it uses is visible to users. Putting a key in an .env file keeps it out of your code and out of a public repo, but it does not hide the key from someone who opens your published site. A true secret cannot be kept secret in a frontend-only app.
• Never put a paid or high-privilege key in frontend code. Those require a small backend to stay safe, which is beyond this week.

Video: API examples

What is a database?

A database is a spreadsheet your app can read from and write to.

• A table / collection is a sheet (e.g. "rooms").
• A row / document is one entry (one room).
• A field / column is one property (room number, image url, created date...).

Video: how data looks in a database

Recommended backend services

Use a Backend-as-a-Service that gives you a database, authentication, and an auto-generated API:

• Supabase — Postgres database, very vibe-coding friendly.
• Firebase — Google's BaaS, real-time database + auth.

Other beginner-friendly tools worth mentioning

• Airtable — REST API that lets you use Airtable as your database.
• NocoDB — REST API that lets you use a NocoDB table as your database.
• Cloudflare R2 — Object storage, 10 GB free.
• Cloudinary — Image and video hosting with transformation APIs.
• ImageKit — Image optimization and delivery CDN.

Static assets (decorative images, illustrations, fonts)

These ship with your app. Small files (icons, logos, a few images) go in your project's public/ or assets/ folder. For class projects, this is fine.

You have two options — no code editing needed:

• Drop files into the folder directly via Cursor's file explorer, then ask your agent to use them.
• Ask your agent to pull placeholder images from Unsplash or use an API endpoint like https://picsum.photos/400/300. For example:
  Please add woodshop images from Unsplash to the hero section.

User-uploaded assets (profile photos, user content)

These must go to a remote storage service. Supabase Storage and Cloudinary both offer generous free tiers and integrate well with AI-generated code. (See Project Demo 1, Video C.)

Icons

Use an icon library instead of image files — they scale perfectly and are easy to change.

Recommended: Lucide — clean, well-maintained, works in any framework. Most AI app builders like FigmaMake and Base44 use it by default.

Alternatives: Heroicons · Phosphor Icons

When initializing your project, ask your agent to include Lucide icons library.

When a specific icon is needed, go to lucide.dev/icons, find the icon and copy its name. Then ask your agent to use it on the place you want.

Videos

Videos are usually large. For background or demo videos, host on Cloudflare Stream (free tier) or simply link to a YouTube embed rather than storing video files in your project folder.

Ask your agent:

App Overview and Basic Prompting

Polishment on Details

Mini Project - Week 5

• Select a new topic from "Mini Project Topics" section.
• Create a small web app (single page or multi-page) that is cool or fun.
• Implement the loading, empty, success and error states.
• Publish the app to Netlify or a similar service.

How to submit:

Submit a PDF file that includes:

• Talk about the API you used: what it does and how you used it.
• Show screenshots of your app in different states (loading, empty, success, error).
• Include the link to your published app.

Submission link: https://canvas.iastate.edu/courses/127779/assignments/2814321

Course Project - Week 5

You don't have to finish the entire project this week, but you should have enough to be reviewed.

• Create a new page in your existing Figma course project and name it Week 5. Implementation.
• Implement your course project following the process and prompts in Project Demos.
• Develop 2 - 3 core features for your course project and polish the details.
• Try to match the layout of sketches you created earlier.
• Schedule a meeting with me for June 22 - 24 at https://calendly.com/aaron-yang-isu/15min. I will review your course project and mini projects if time permits.
• Send 3 - 4 best screens of the generated designs to this week's page in your Figma Design Project.
• Here is how this week should look like in your Figma Design Project: Figma reference