Web Development 5

An API (Application Programming Interface) is how two pieces of software talk to each other. When your JavaScript fetches weather data, it's using a weather API. When NiteFlirt shows your listing stats, it's using an internal API. When you post to Instagram, the app is hitting Instagram's API.

Understanding APIs turns you from someone who builds pages into someone who builds applications.

REST: The Standard

REST (Representational State Transfer) is the most common API pattern. It uses HTTP methods to perform actions on resources:

• GET — Read data. "Show me all products." No side effects.
• POST — Create data. "Add a new product." Changes the server.
• PUT — Update data. "Replace this product with new data."
• PATCH — Partial update. "Change just the price of this product."
• DELETE — Remove data. "Delete this product."

A REST API organizes resources as URLs (called endpoints):

GET    /api/products        → List all products
GET    /api/products/42     → Get product #42
POST   /api/products        → Create a new product
PUT    /api/products/42     → Update product #42
DELETE /api/products/42     → Delete product #42

JSON: The Language of APIs

Almost every modern API speaks JSON (JavaScript Object Notation). It looks like JavaScript objects, because it is JavaScript objects:

{
  "id": 42,
  "title": "Premium Audio Pack",
  "price": 14.99,
  "tags": ["audio", "bundle", "premium"],
  "creator": {
    "name": "Luna",
    "verified": true
  }
}

When you fetch() an API, the response is text. You call response.json() to parse it into a JavaScript object you can work with.

Authentication: Proving Who You Are

Most useful APIs require authentication. Common methods:

• API Keys — A secret string you include in your request. Simplest method. Usually passed as a query parameter or header: ?api_key=abc123
• Bearer Tokens — A token (usually from OAuth) sent in the Authorization header: Authorization: Bearer eyJ...
• OAuth 2.0 — The full flow where users log in and grant your app permission. Used by Google, Twitter, YouTube, etc.

Security rule: Never put API keys in client-side JavaScript that gets shipped to browsers. Anyone can view your source code and steal the key. API keys belong in server-side code or environment variables.

Rate Limiting & Error Handling

APIs limit how many requests you can make. Hit the limit and you'll get a 429 Too Many Requests response. Good API practice:

• Cache responses when possible — don't re-fetch data you already have
• Handle errors gracefully — show the user a message, don't let the app crash
• Check the API docs for rate limits before building your integration
• Use response.status to handle different HTTP status codes appropriately

React is a JavaScript library for building user interfaces. Created by Facebook (Meta), it's the most popular front-end framework in the world. It powers Instagram, Airbnb, Netflix, Discord, and thousands of other apps.

Why learn React as a creator? Because it lets you build interactive, dynamic applications — not just static pages. Dashboards, storefronts, portfolio sites that update in real time, content management tools. Things that feel like apps, not websites.

The Core Idea: Components

React breaks your UI into components — reusable, self-contained pieces. A page isn't one giant HTML file; it's a tree of components:

<App>
  <Header />
  <ProductGrid>
    <ProductCard />
    <ProductCard />
    <ProductCard />
  </ProductGrid>
  <Footer />
</App>

Each component manages its own logic and rendering. You build small components and compose them into bigger ones. This makes code reusable and maintainable.

JSX: HTML in Your JavaScript

React uses JSX — a syntax extension that lets you write HTML-like code inside JavaScript:

function Welcome() {
  const name = "Creator";
  return (
    <div className="welcome">
      <h1>Hello, {name}!</h1>
      <p>Welcome to your dashboard.</p>
    </div>
  );
}

The curly braces {} let you embed JavaScript expressions inside JSX. Notice className instead of class — that's a JSX thing (because class is a reserved word in JavaScript).

Props: Passing Data Down

Props (properties) are how you pass data from a parent component to a child component:

function ProductCard({ title, price, image }) {
  return (
    <div className="card">
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>${price}</p>
    </div>
  );
}

// Usage:
<ProductCard title="Audio Pack" price={14.99} image="/pack.jpg" />

Props flow one direction: parent to child. This makes data flow predictable and easy to debug.

State: Data That Changes

State is data that can change over time — a counter, form input, whether a menu is open, a list of items from an API. React's useState hook manages state:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Add One
      </button>
    </div>
  );
}

When state changes, React automatically re-renders the component. You never manually update the DOM. You change the data, and React updates the UI to match. This is declarative programming — you describe what the UI should look like for a given state, and React figures out how to make it happen.

Setting Up a React Project

The fastest way to start a React project in 2026:

npx create-vite my-app --template react
cd my-app
npm install
npm run dev

This gives you a development server with hot reloading — change your code and the browser updates instantly. Vite is the modern build tool of choice (faster than the older Create React App).

This is where everything comes together. You're going to build a real, functional web application — not a toy project, not a tutorial clone. A tool that serves your creator business: a dynamic portfolio site, a storefront for your digital products, or a content dashboard that aggregates your metrics.

Choosing Your Project

Pick the one that's most useful to you right now:

• Dynamic Portfolio — A React-powered portfolio that pulls your content from an API (YouTube videos, GitHub repos, blog posts). Updates automatically when you publish new work. Includes an about section, project gallery, and contact form.
• Digital Storefront — A product catalog for your digital goods (audio packs, scripts, templates). Product cards with images, descriptions, and prices. Filter/sort by category. Shopping cart functionality. Connects to a payment system concept.
• Creator Dashboard — A personal dashboard that displays your key metrics. Fetch data from APIs (social stats, analytics, revenue). Display charts or data cards. Refresh on demand. Useful as a personal tool you'll actually use.

Project Architecture

Whatever you build, structure it properly:

src/
├── components/
│   ├── Header.jsx
│   ├── Footer.jsx
│   ├── Card.jsx
│   └── ...
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   └── Projects.jsx
├── hooks/
│   └── useFetch.js     ← custom hook for API calls
├── data/
│   └── projects.json   ← fallback data if API is down
├── App.jsx
├── App.css
└── main.jsx

Building a Custom Hook

Hooks are reusable pieces of stateful logic. A custom useFetch hook saves you from writing the same fetch logic in every component:

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

Now any component can fetch data in one line: const { data, loading, error } = useFetch(apiUrl);

Responsive Design in React

Your project needs to work on mobile. Use CSS media queries (you already know these from earlier courses) or a utility framework like Tailwind CSS. Test on multiple screen sizes. Creator audiences browse on phones — if your portfolio or storefront breaks on mobile, you lose them.

Deployment

Your project should be live on the internet. Free hosting options:

• Vercel — Best for React apps. Connect your GitHub repo and it deploys automatically on every push. Free tier is generous.
• Netlify — Similar to Vercel. Drag-and-drop deployment or GitHub integration.
• GitHub Pages — Free static hosting. Works for React apps with a build step.

A project that isn't deployed doesn't exist. Get it online.