🔌 Connecting Frontend to API

📸 Lesson Snapshot

Build a web frontend that talks to your C# Library API using JavaScript's fetch API! (Ages 8-18)

Session Date: Saturday, April 4, 2026 at 11:00 AM EST

🎯 Age-Tiered Learning Goals

	🧒 Elementary (8-11)	🧑 Middle School (12-14)	🎓 High School (15-18)
🌐 Fetch API	Understand that JavaScript can talk to servers	Use fetch() to GET and POST data	Handle all CRUD operations with proper error handling
⏳ Async/Await	See that some code "waits" for servers	Use async/await pattern correctly	Manage loading states and race conditions
🛡️ CORS	Know servers control who can talk to them	Enable CORS on their API	Understand security implications
🏁 By End	See data from API appear on webpage	Build working search and display	Complete CRUD frontend with validation

🎨 Before You Code: Hands-On Activities (15 minutes)

📞 Activity 1: The Telephone Game - Understanding Async (Whole Class)

🎬 Setup: Three students form a chain: "Website", "Internet", "Server"

📖 Scenario: Synchronous vs Asynchronous

    SYNCHRONOUS (Blocking) - THE BORING WAY 😴
    ─────────────────────────────────────────────

    Website: "I need book data..."     🧍 [freezes completely]
    Internet: [carrying message...]     ⏳
    Server: "Here's the data!"         📦
    Internet: [carrying response...]   ⏳
    Website: "...NOW I can continue!"  🏃

    ❌ Problem: Website is FROZEN while waiting!
    Users see: 🥶 Page won't scroll, buttons don't work

    ASYNCHRONOUS (Non-blocking) - THE SMART WAY 😎
    ─────────────────────────────────────────────

    Website: "I need book data..."     📤 "I'll keep working!"
             [shows loading spinner]   🔄
             [user can scroll]         📜
             [user can click things]   🖱️

    Internet: [carrying message...]    ⏳
    Server: "Here's the data!"         📦
    Internet: [carrying response...]   ⏳

    Website: "Data arrived! Updating!" ✅

    ✅ Website stayed responsive the whole time!

💬 Discussion:

"Async is like ordering pizza. You don't stand at the door waiting - you do other things and answer when it arrives!"

🚧 Activity 2: The Security Guard Game - Understanding CORS (Groups)

🎬 Setup: One student is the "API Server", others are different "Websites"

    CORS = Cross-Origin Resource Sharing 🔐

    It's like a VIP list at a party! 🎉

    ┌─────────────────────────────────────────────────────────┐
    │                                                         │
    │   🖥️ API SERVER (The Party)                             │
    │                                                         │
    │   VIP LIST (AllowedOrigins):                            │
    │   ✅ localhost:5500  "You're on the list, come in!"     │
    │   ✅ mywebsite.com   "You're on the list, come in!"     │
    │   ❌ hacker.com      "You're NOT on the list! 🚫"       │
    │                                                         │
    └─────────────────────────────────────────────────────────┘

    Student 1 (localhost): "I'm localhost:5500!"
    Server: "✅ Welcome! Here's your data!"

    Student 2 (hacker.com): "I'm hacker.com!"
    Server: "❌ CORS Error! You're not allowed!"

💬 Discussion:

"CORS protects APIs from being called by random websites. Your API decides who's allowed to talk to it!"

🎭 Activity 3: Promise Me! - The async/await Dance (Whole Class)

🔄 Learn the pattern with body movements:

    THE ASYNC/AWAIT DANCE 💃🕺

    Step 1: async 🎬
    ────────────────────────────
    [Raise hand] "I'm an async function!"
    "I might do things that take time..."

    Step 2: await ⏳
    ────────────────────────────
    [Freeze in place] "I'm waiting for a Promise..."
    [Other dancers keep moving] "Others can still work!"

    Step 3: Data arrives! 📦
    ────────────────────────────
    [Unfreeze] "I got my data!"
    [Continue dancing] "Now I can continue!"

    Step 4: try/catch 🛡️
    ────────────────────────────
    [Shield motion] "If something breaks..."
    [Catch motion] "...I'll catch the error!"

💡 Key Insight:

"async/await makes code that READS like normal code but WORKS like magic waiting code!"

🗺️ Visual: The Fetch Flow

    HOW FETCH() WORKS 🌊

    YOUR WEBPAGE                    YOUR C# API
    (JavaScript)                    (localhost:5000)

    ┌──────────────┐               ┌──────────────┐
    │              │               │              │
    │  🖥️ Browser  │               │  🖥️ Server   │
    │              │               │              │
    │  ┌────────┐  │               │  ┌────────┐  │
    │  │  HTML  │  │               │  │ Books  │  │
    │  │  CSS   │  │   FETCH() 📤  │  │ Data   │  │
    │  │   JS   │──┼──────────────▶│  │        │  │
    │  └────────┘  │               │  └────────┘  │
    │              │               │              │
    │  ┌────────┐  │   JSON 📥     │              │
    │  │ Books  │◀─┼───────────────┼──────────────│
    │  │ List   │  │               │              │
    │  └────────┘  │               │              │
    │              │               │              │
    └──────────────┘               └──────────────┘


    THE JOURNEY OF A FETCH REQUEST 🚀
    ═══════════════════════════════════════════════════════

    1️⃣ JavaScript calls fetch()
       │
       ▼
    2️⃣ Browser creates HTTP request
       │  GET http://localhost:5000/api/books
       ▼
    3️⃣ Request travels to your C# API
       │
       ▼
    4️⃣ C# Controller handles request
       │  BooksController.GetAllBooks()
       ▼
    5️⃣ Server sends JSON response
       │  [{"id": 1, "title": "Harry Potter"...}]
       ▼
    6️⃣ JavaScript receives the data
       │  response.json()
       ▼
    7️⃣ You update the webpage! 🎉
           displayBooks(books)

🗺️ Visual: Async/Await Flow

    ASYNC/AWAIT TIMELINE ⏱️


    WITHOUT async/await (callback hell 😱):
    ═══════════════════════════════════════

    fetch(url)
      .then(response => response.json())
        .then(data => {
          processData(data)
            .then(result => {
              saveResult(result)
                .then(saved => {
                  // 😵 So many levels deep!
                })
            })
        })


    WITH async/await (clean and clear 😊):
    ═══════════════════════════════════════

    async function doEverything() {
        const response = await fetch(url);      // ⏳ Wait
        const data = await response.json();      // ⏳ Wait
        const result = await processData(data);  // ⏳ Wait
        const saved = await saveResult(result);  // ⏳ Wait
        // 😊 So clean and readable!
    }


    WHAT HAPPENS DURING await:
    ═══════════════════════════════════════

    Timeline ─────────────────────────────────────────────▶

    Main Code:    [RUN]──[await]─────────────────[CONTINUE]
                           │                          ▲
    fetch():               └──[REQUEST]──[WAIT]──[DONE]┘
                                  │         │
    Server:                       └─[PROCESS]┘

    Browser:      [RESPONSIVE]──[RESPONSIVE]──[RESPONSIVE]
                  User can      User can       Page
                  scroll! 📜    click! 🖱️      updates! ✨

🗺️ Visual: CRUD Operations

    FULL CRUD WITH FETCH 📚


    📖 READ (GET) - Get all books
    ═══════════════════════════════════════════════════════

    fetch('http://localhost:5000/api/books')

    JavaScript ──GET──▶ C# API ──▶ Returns: [{...}, {...}]


    ➕ CREATE (POST) - Add a new book
    ═══════════════════════════════════════════════════════

    fetch('http://localhost:5000/api/books', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: 'New Book', author: 'Me' })
    })

    JavaScript ──POST + {data}──▶ C# API ──▶ Returns: {id: 4, ...}


    ✏️ UPDATE (PUT) - Change a book
    ═══════════════════════════════════════════════════════

    fetch('http://localhost:5000/api/books/1', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: 'Updated Title' })
    })

    JavaScript ──PUT + {data}──▶ C# API ──▶ Returns: {updated book}


    🗑️ DELETE - Remove a book
    ═══════════════════════════════════════════════════════

    fetch('http://localhost:5000/api/books/1', {
        method: 'DELETE'
    })

    JavaScript ──DELETE──▶ C# API ──▶ Returns: 204 No Content

📁 Folder & File Map

Session18-Frontend/
├── 📄 index.html          ← 🏠 Main HTML page
├── 📄 styles.css          ← 🎨 Styling with loading states
├── 📄 app.js              ← 🧠 JavaScript with fetch calls
└── 📁 LibraryApi/         ← 🖥️ Your C# API (from previous sessions)
    ├── Controllers/
    │   └── BooksController.cs
    ├── Models/
    └── Program.cs          ← ⚙️ CORS configuration here!

✅ Prerequisites

✅ Completed Session 15 (Testing APIs)
✅ Sessions 16-17 (HTML/CSS/JavaScript basics)
✅ Working Library API from previous sessions
✅ VS Code with Live Server extension (or similar)

🛠️ Step-by-Step Build Guide

1️⃣ Fork and Clone

Go to https://github.com/PhillyCoderDojo/Session18-Frontend → Fork → Clone
git clone https://github.com/YOUR-USERNAME/Session18-Frontend.git

2️⃣ Enable CORS in Your C# API

🔓 CORS lets your frontend talk to your API!

✏️ Update Program.cs in your LibraryApi project:

var builder = WebApplication.CreateBuilder(args);

// Add services
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

// 🆕 ADD CORS POLICY
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend", policy =>
    {
        policy.WithOrigins(
            "http://localhost:5500",   // Live Server default
            "http://127.0.0.1:5500",   // Also Live Server
            "http://localhost:3000"     // Common dev server
        )
        .AllowAnyHeader()
        .AllowAnyMethod();
    });
});

var app = builder.Build();

// Configure the HTTP request pipeline
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

// 🆕 USE CORS - This must come before UseAuthorization!
app.UseCors("AllowFrontend");

app.UseAuthorization();
app.MapControllers();

app.Run();

📊 Visual: What this does:

    BEFORE CORS: ❌
    ─────────────────────────────────────────────

    Your Frontend                Your API
    (localhost:5500)            (localhost:5000)

         📤 ────────────────────────▶ 🚫
         "I want data!"              "Who are you?! BLOCKED!"


    AFTER CORS: ✅
    ─────────────────────────────────────────────

    Your Frontend                Your API
    (localhost:5500)            (localhost:5000)

         📤 ────────────────────────▶ ✅
         "I want data!"              "You're on the list!"

         📥 ◀────────────────────────
         Here's your data!            📦

3️⃣ Create the HTML Structure

📄 Create file: index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📚 Library Manager</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 🏠 Header -->
        <header>
            <h1>📚 Library Manager</h1>
            <p>Connected to C# API</p>
        </header>

        <!-- ➕ Add Book Form -->
        <section class="add-book-form">
            <h2>➕ Add New Book</h2>
            <form id="addBookForm">
                <div class="form-group">
                    <label for="title">📖 Title:</label>
                    <input type="text" id="title" required minlength="1" maxlength="200">
                </div>
                <div class="form-group">
                    <label for="author">✍️ Author:</label>
                    <input type="text" id="author" required minlength="1" maxlength="100">
                </div>
                <div class="form-group">
                    <label for="pageCount">📄 Pages:</label>
                    <input type="number" id="pageCount" required min="1" max="10000">
                </div>
                <button type="submit" id="addButton">
                    <span class="button-text">Add Book</span>
                    <span class="spinner hidden">⏳</span>
                </button>
            </form>
        </section>

        <!-- 🔍 Search Section -->
        <section class="search-section">
            <h2>🔍 Search Books</h2>
            <input type="text" id="searchInput" placeholder="Search by title or author...">
        </section>

        <!-- 📚 Books Display -->
        <section class="books-section">
            <h2>📚 All Books</h2>

            <!-- Loading State -->
            <div id="loading" class="loading">
                <div class="spinner-large">🔄</div>
                <p>Loading books...</p>
            </div>

            <!-- Error State -->
            <div id="error" class="error hidden">
                <p>❌ <span id="errorMessage"></span></p>
                <button onclick="loadBooks()">🔄 Try Again</button>
            </div>

            <!-- Books List -->
            <div id="booksList" class="books-grid hidden"></div>

            <!-- Empty State -->
            <div id="emptyState" class="empty-state hidden">
                <p>📭 No books found. Add one above!</p>
            </div>
        </section>
    </div>

    <!-- 📝 Edit Modal -->
    <div id="editModal" class="modal hidden">
        <div class="modal-content">
            <h2>✏️ Edit Book</h2>
            <form id="editBookForm">
                <input type="hidden" id="editBookId">
                <div class="form-group">
                    <label for="editTitle">📖 Title:</label>
                    <input type="text" id="editTitle" required>
                </div>
                <div class="form-group">
                    <label for="editAuthor">✍️ Author:</label>
                    <input type="text" id="editAuthor" required>
                </div>
                <div class="form-group">
                    <label for="editPageCount">📄 Pages:</label>
                    <input type="number" id="editPageCount" required min="1">
                </div>
                <div class="modal-buttons">
                    <button type="submit">💾 Save</button>
                    <button type="button" onclick="closeModal()">❌ Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

4️⃣ Create the CSS Styles

📄 Create file: styles.css

See the styles.css file in this folder for the complete styling with loading states!

5️⃣ Create the JavaScript

📄 Create file: app.js

See the app.js file in this folder for the complete JavaScript with fetch calls!

6️⃣ Understand the API Configuration

⚙️ In app.js, set your API URL:

// 🔧 CONFIGURATION
// Change this to match where your C# API is running!
const API_BASE_URL = 'http://localhost:5000/api';

🔍 How to find your API URL:

    When you run your C# API, look for:

    ┌─────────────────────────────────────────────────────────┐
    │  info: Microsoft.Hosting.Lifetime[14]                   │
    │        Now listening on: http://localhost:5000          │
    │        Now listening on: https://localhost:5001         │
    └─────────────────────────────────────────────────────────┘
                                  ▲
                                  │
                    Use this URL! (with http, not https)

7️⃣ Commit CORS Changes

cd LibraryApi
git add .
git commit -m "Add CORS configuration for frontend"

8️⃣ Write Your First Fetch - GET All Books

// 📚 GET all books from the API
async function loadBooks() {
    showLoading();  // Show spinner 🔄

    try {
        // 📤 Send GET request to API
        const response = await fetch(`${API_BASE_URL}/books`);

        // ✅ Check if request was successful
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }

        // 📥 Parse JSON response
        const books = await response.json();

        // 🎨 Display the books
        displayBooks(books);

    } catch (error) {
        // ❌ Handle errors
        showError(error.message);
    }
}

🔍 Understanding the code:

    async function loadBooks() {     ← 🎬 Mark as async
                    ▼
    await fetch(url)                 ← ⏳ Wait for response
                    ▼
    await response.json()            ← ⏳ Wait for JSON parsing
                    ▼
    displayBooks(books)              ← 🎨 Update the page


    THE TRY/CATCH SAFETY NET:

    try {                            ← 🛡️ "Try this code..."
        // risky code here
    } catch (error) {                ← 🥅 "If it fails, catch here!"
        // handle the error
    }

9️⃣ Write POST - Create a Book

// ➕ CREATE a new book
async function createBook(bookData) {
    try {
        const response = await fetch(`${API_BASE_URL}/books`, {
            method: 'POST',                              // 📤 POST method
            headers: {
                'Content-Type': 'application/json'       // 📋 Tell API we're sending JSON
            },
            body: JSON.stringify(bookData)               // 📦 Convert object to JSON string
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.title || 'Failed to create book');
        }

        const newBook = await response.json();
        return newBook;

    } catch (error) {
        console.error('Create failed:', error);
        throw error;
    }
}

📊 Visual: POST Request Structure

    fetch(url, {
        method: 'POST',              ← 🏷️ What action (POST = create)
        headers: {
            'Content-Type':          ← 📋 Metadata about the request
            'application/json'          "I'm sending JSON data"
        },
        body: JSON.stringify({       ← 📦 The actual data
            title: 'My Book',
            author: 'Me',
            pageCount: 100
        })
    })

🔟 Handle Loading States

// 🔄 Show loading spinner
function showLoading() {
    document.getElementById('loading').classList.remove('hidden');
    document.getElementById('booksList').classList.add('hidden');
    document.getElementById('error').classList.add('hidden');
    document.getElementById('emptyState').classList.add('hidden');
}

// ✅ Show books (hide loading)
function showBooks() {
    document.getElementById('loading').classList.add('hidden');
    document.getElementById('booksList').classList.remove('hidden');
}

// ❌ Show error
function showError(message) {
    document.getElementById('loading').classList.add('hidden');
    document.getElementById('error').classList.remove('hidden');
    document.getElementById('errorMessage').textContent = message;
}

📊 Visual: UI States

    THE FOUR UI STATES 🎭

    ┌─────────────────────────────────────────────────────────┐
    │                                                         │
    │  1️⃣ LOADING               2️⃣ SUCCESS                  │
    │  ┌─────────────────┐      ┌─────────────────┐          │
    │  │   🔄            │      │ 📚 Harry Potter │          │
    │  │   Loading...    │      │ 📚 Hunger Games │          │
    │  └─────────────────┘      │ 📚 Percy Jackson│          │
    │                           └─────────────────┘          │
    │                                                         │
    │  3️⃣ ERROR                 4️⃣ EMPTY                    │
    │  ┌─────────────────┐      ┌─────────────────┐          │
    │  │ ❌ Failed to    │      │                 │          │
    │  │    connect!     │      │ 📭 No books yet │          │
    │  │ [Try Again]     │      │    Add one!     │          │
    │  └─────────────────┘      └─────────────────┘          │
    │                                                         │
    └─────────────────────────────────────────────────────────┘

1️⃣1️⃣ Display Books on the Page

// 🎨 Display books in the grid
function displayBooks(books) {
    const booksList = document.getElementById('booksList');

    if (books.length === 0) {
        showEmptyState();
        return;
    }

    // 🧹 Clear existing books
    booksList.innerHTML = '';

    // 📚 Create a card for each book
    books.forEach(book => {
        const bookCard = createBookCard(book);
        booksList.appendChild(bookCard);
    });

    showBooks();
}

// 📇 Create a single book card
function createBookCard(book) {
    const card = document.createElement('div');
    card.className = `book-card ${book.isAvailable ? 'available' : 'checked-out'}`;

    card.innerHTML = `
        <h3>${book.title}</h3>
        <p class="author">✍️ ${book.author}</p>
        <p class="pages">📄 ${book.pageCount} pages</p>
        <p class="status">${book.isAvailable ? '✅ Available' : '📤 Checked Out'}</p>
        <div class="book-actions">
            <button onclick="editBook(${book.id})">✏️ Edit</button>
            <button onclick="deleteBook(${book.id})" class="delete-btn">🗑️ Delete</button>
            ${book.isAvailable
                ? `<button onclick="checkoutBook(${book.id})">📤 Checkout</button>`
                : `<button onclick="returnBook(${book.id})">📥 Return</button>`
            }
        </div>
    `;

    return card;
}

1️⃣2️⃣ Implement Delete

// 🗑️ DELETE a book
async function deleteBook(id) {
    if (!confirm('Are you sure you want to delete this book?')) {
        return;  // User cancelled
    }

    try {
        const response = await fetch(`${API_BASE_URL}/books/${id}`, {
            method: 'DELETE'
        });

        if (!response.ok) {
            throw new Error('Failed to delete book');
        }

        // 🔄 Refresh the books list
        loadBooks();

    } catch (error) {
        alert('❌ ' + error.message);
    }
}

1️⃣3️⃣ Implement Update (PUT)

// ✏️ UPDATE a book
async function updateBook(id, bookData) {
    try {
        const response = await fetch(`${API_BASE_URL}/books/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(bookData)
        });

        if (!response.ok) {
            throw new Error('Failed to update book');
        }

        closeModal();
        loadBooks();  // Refresh the list

    } catch (error) {
        alert('❌ ' + error.message);
    }
}

1️⃣4️⃣ Implement Checkout and Return

// 📤 Checkout a book
async function checkoutBook(id) {
    try {
        const response = await fetch(`${API_BASE_URL}/books/${id}/checkout`, {
            method: 'POST'
        });

        if (!response.ok) {
            throw new Error('Failed to checkout book');
        }

        loadBooks();  // Refresh to show new status

    } catch (error) {
        alert('❌ ' + error.message);
    }
}

// 📥 Return a book
async function returnBook(id) {
    try {
        const response = await fetch(`${API_BASE_URL}/books/${id}/return`, {
            method: 'POST'
        });

        if (!response.ok) {
            throw new Error('Failed to return book');
        }

        loadBooks();

    } catch (error) {
        alert('❌ ' + error.message);
    }
}

1️⃣5️⃣ Add Search Functionality

// 🔍 Search books (client-side filtering)
function setupSearch() {
    const searchInput = document.getElementById('searchInput');

    searchInput.addEventListener('input', (e) => {
        const searchTerm = e.target.value.toLowerCase();
        const bookCards = document.querySelectorAll('.book-card');

        bookCards.forEach(card => {
            const title = card.querySelector('h3').textContent.toLowerCase();
            const author = card.querySelector('.author').textContent.toLowerCase();

            if (title.includes(searchTerm) || author.includes(searchTerm)) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    });
}

1️⃣6️⃣ Start Your API and Frontend

Terminal 1 - Run the C# API:

cd LibraryApi
dotnet run

Terminal 2 - Run the Frontend (using Live Server in VS Code):

Right-click index.html → "Open with Live Server"

👀 What you'll see:

    ┌─────────────────────────────────────────────────────────┐
    │  📚 Library Manager                                      │
    │  Connected to C# API ✅                                  │
    ├─────────────────────────────────────────────────────────┤
    │                                                          │
    │  ➕ Add New Book                                         │
    │  ┌──────────────────────────────────────────────────┐   │
    │  │ Title:  [________________________]               │   │
    │  │ Author: [________________________]               │   │
    │  │ Pages:  [____]                                   │   │
    │  │                         [Add Book]               │   │
    │  └──────────────────────────────────────────────────┘   │
    │                                                          │
    │  🔍 Search: [________________________]                   │
    │                                                          │
    │  📚 All Books                                            │
    │  ┌────────────┐ ┌────────────┐ ┌────────────┐          │
    │  │Harry Potter│ │The Hobbit  │ │ 1984       │          │
    │  │ JK Rowling │ │  Tolkien   │ │   Orwell   │          │
    │  │ 309 pages  │ │ 310 pages  │ │ 328 pages  │          │
    │  │ ✅Available │ │ 📤Checked  │ │ ✅Available │          │
    │  │[Edit][Del] │ │[Edit][Del] │ │[Edit][Del] │          │
    │  │[Checkout]  │ │[Return]    │ │[Checkout]  │          │
    │  └────────────┘ └────────────┘ └────────────┘          │
    │                                                          │
    └─────────────────────────────────────────────────────────┘

1️⃣7️⃣ Commit Your Frontend

git add .
git commit -m "Complete frontend with CRUD operations"
git push origin main

📊 Visual: Complete Architecture

    THE FULL PICTURE 🖼️


    ┌─────────────────────────────────────────────────────────────────┐
    │                         YOUR BROWSER                            │
    ├─────────────────────────────────────────────────────────────────┤
    │                                                                 │
    │   ┌──────────────────────────────────────────────────────┐     │
    │   │                   index.html                          │     │
    │   │   (The structure - what things ARE)                   │     │
    │   └──────────────────────────────────────────────────────┘     │
    │                            │                                    │
    │   ┌──────────────────────────────────────────────────────┐     │
    │   │                   styles.css                          │     │
    │   │   (The looks - how things APPEAR)                     │     │
    │   └──────────────────────────────────────────────────────┘     │
    │                            │                                    │
    │   ┌──────────────────────────────────────────────────────┐     │
    │   │                    app.js                             │     │
    │   │   (The brain - how things WORK)                       │     │
    │   │                                                       │     │
    │   │   fetch() ─────────────────────────────────────────┐ │     │
    │   └─────────────────────────────────────────────────────┼─┘     │
    │                                                         │       │
    └─────────────────────────────────────────────────────────┼───────┘
                                                              │
                            🌐 INTERNET                       │
                                                              │
    ┌─────────────────────────────────────────────────────────┼───────┐
    │                      YOUR C# API                        │       │
    ├─────────────────────────────────────────────────────────┼───────┤
    │                                                         ▼       │
    │   ┌──────────────────────────────────────────────────────┐     │
    │   │                 Program.cs                           │     │
    │   │   (CORS configuration)                               │     │
    │   └──────────────────────────────────────────────────────┘     │
    │                            │                                    │
    │   ┌──────────────────────────────────────────────────────┐     │
    │   │              BooksController.cs                       │     │
    │   │   (Handles GET, POST, PUT, DELETE)                    │     │
    │   └──────────────────────────────────────────────────────┘     │
    │                            │                                    │
    │   ┌──────────────────────────────────────────────────────┐     │
    │   │                   Models/                             │     │
    │   │   Book, DTOs, Mapper                                  │     │
    │   └──────────────────────────────────────────────────────┘     │
    │                            │                                    │
    │   ┌──────────────────────────────────────────────────────┐     │
    │   │                   Data (memory)                       │     │
    │   │   List<Book> _books                                   │     │
    │   └──────────────────────────────────────────────────────┘     │
    │                                                                 │
    └─────────────────────────────────────────────────────────────────┘

💬 Group Reflection (5 minutes)

🔄 Circle Share - Answer one:

"fetch() is different from regular function calls because..."
"async/await helps us by..."
"CORS exists because..."
"The loading state is important because..."
"Connecting frontend to backend feels like..."

✅ Run & Test Checklist

🚀 Bonus Challenges

⭐ Challenge 1: Better Loading (All Levels)

Add a loading spinner to each button when it's clicked (not just the page).

⭐⭐ Challenge 2: Form Validation (Middle+)

Show validation errors inline in the form (like "Title is required") before sending to API.

⭐⭐⭐ Challenge 3: Optimistic Updates (High School)

Update the UI immediately when deleting, then revert if the API call fails.

⭐⭐⭐ Challenge 4: Real-time Updates (High School)

Use polling or WebSockets to show changes made by other users.

📖 Vocabulary Wall

Term	📝 Kid-Friendly Definition	💻 Example
🌊 fetch()	JavaScript function that talks to servers	`fetch('http://api.com/books')`
⏳ async	Marks a function that might wait for things	`async function getBooks()`
⏸️ await	Pauses until a promise resolves	`await fetch(url)`
🤝 Promise	An "IOU" for future data	fetch() returns a Promise
🔐 CORS	Security rule about who can talk to an API	Cross-Origin Resource Sharing
📦 JSON.stringify()	Converts JavaScript object to JSON text	`JSON.stringify({name: 'Book'})`
📥 response.json()	Parses JSON response into JavaScript object	`await response.json()`
🔄 Loading State	What users see while waiting	Spinner, skeleton, message

🏠 Take-Home Connection

👨‍👩‍👧 Talk to a family member:

"Today I connected a website to my own server! The website uses JavaScript to send requests to my C# API, and the API sends back data as JSON. It's like my website is making phone calls to my server!"

🌍 Real-world examples:

🛒 Amazon's website fetching product data
📱 Instagram loading your feed
🎮 Fortnite checking your inventory
🎵 Spotify loading your playlists

🤔 Questions to explore:

What happens when you open a website with no internet?
Why do some pages load faster than others?
What would happen if websites didn't show loading spinners?

🔮 What's Next

In Session 19, we'll learn Python basics and compare it to C#! 🐍

    YOUR JOURNEY SO FAR 🗺️

    ┌─────────────────────────────────────────────────────────┐
    │                                                         │
    │  📚 Sessions 1-10:  C# Fundamentals & OOP              │
    │  🌐 Sessions 11-15: Building Web APIs                   │
    │  🎨 Sessions 16-18: Frontend & Connecting Things  ◀── YOU ARE HERE!
    │  🐍 Sessions 19-20: Python & Flask (coming up!)        │
    │  🎭 Session 21:     Final Showcase!                    │
    │                                                         │
    └─────────────────────────────────────────────────────────┘

You're building real full-stack applications! 🎉

Name		Name	Last commit message	Last commit date
.gitignore		.gitignore
README.md		README.md
app.js		app.js
index.html		index.html
styles.css		styles.css

Latest commit

History

Folders and files

Repository files navigation