First Web App

App Programming - Day 2

From Design to Code

Build and deploy your first web application

</>

2026 WayUp

Recap: What We Did Yesterday

✓

Specifications

Defined what our app does, who it serves, and the core features it needs

✓

Figma Design

Created UI mockups with Stitch AI to visualize every screen

✓

GitHub Setup

Created a repository and organized work into issues

✓

User Stories

Wrote clear stories describing each feature from the user's perspective

Today: we bring your design to life! By the end of this day, your app will be live on the internet.

How the Web Works

Every time you open a website, this happens behind the scenes

💻 Your Browser Types a URL e.g. google.com Sends a REQUEST GET /page HTML + CSS + JS 🖥️ Server Receives request Finds the right files Sends a RESPONSE ✨ The Page You See
This happens in milliseconds. Every website, every app, every Google search — it all follows this pattern: request → process → response.

HTTP in 60 Seconds

HTTP = the language browsers and servers speak

🔗 1. Type URL example.com/tasks 📖 2. DNS Lookup Finds IP: 93.184.216.34 🖥️ 3. Server Processes request 📄 4. Response 200 OK + HTML/CSS/JS

GET (Read)

"Give me this page" — loading a website, viewing data

POST (Create)

"Save this data" — submitting a form, creating an account

Status codes: 200 OK (success) • 404 Not Found (wrong URL) • 500 Server Error (something broke)

What is HTML?

The skeleton of every webpage

HTML (HyperText Markup Language) uses tags to define the structure of content on the web.

</>

<h1>

Heading

</>

<p>

Paragraph

</>

<img>

Image

</>

<a>

Link

</>

<div>

Container

<h1>Welcome to my site</h1>
<p>This is a paragraph of text.</p>
<img src="photo.jpg" alt="A nice photo">
<a href="https://example.com">Click here</a>

A Complete HTML Page

This is a fully working webpage — try it yourself!

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <h1>Welcome!</h1>
  <p>This is my first webpage.</p>
  <a href="/about">Learn more</a>
</body>
</html>

<head>

Metadata (title, settings) — not visible on the page

<body>

Everything the user actually sees on screen

What is CSS?

CSS is the styling of HTML — colors, fonts, spacing, layout, and animations. It turns plain structure into beautiful design.

Cascading Style Sheets

Without CSS

My Title

Some plain text with a link

With CSS

My Title

Styled text with a link

CSS Example

CSS uses selectors to target HTML elements and apply styles

body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
}

h1 {
  color: #333;
  text-align: center;
}

.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
CSS makes the difference between ugly and beautiful. Every professional website you use is styled with CSS.

What is JavaScript?

Makes pages interactive: clicks, animations, data

Clicks, form validation, loading data, dynamic updates — all JavaScript.

// When the button is clicked, show a message
document.querySelector('button')
  .addEventListener('click', () => {
    alert('You clicked the button!');
  });
JavaScript is the only programming language browsers understand. HTML and CSS are markup/styling — JS is the real programming language of the web.

The Modern Web Stack

From basics to powerful frameworks

HTML — Structure (skeleton) CSS — Style (skin & clothes) JavaScript — Behavior (brain) Next.js — Framework (superpowers) builds on top

Frameworks = tools that make building faster

Writing everything from scratch is slow and error-prone. Frameworks like Next.js, React, and Vue give you building blocks so you can focus on your features, not plumbing.

What is Next.js?

The framework we will use to build our app

Your Files app/page.tsx app/tasks/page.tsx app/about/page.tsx Next.js Browser URLs yourapp.com/ yourapp.com/tasks yourapp.com/about Create a file = Create a page No configuration needed! Next.js does the wiring.

Server-Side Rendering

Pages load faster because the server prepares the HTML before sending it to the browser

API Routes Built-In

Build your backend inside the same project — no separate server needed

Built by Vercel, based on React — used by Netflix, TikTok, Notion, and thousands of companies worldwide.

What is Node.js?

JavaScript outside the browser

JavaScript in Browser Buttons, animations, forms Runs inside Chrome/Firefox Limited to the browser + Node.js JS on your computer Runs servers, reads files Powers Next.js = Full Stack Power One language for frontend AND backend = less to learn! 
# Check if Node.js is installed
node --version    # Should show v20.x or higher

# Check npm (comes with Node.js)
npm --version     # Should show 10.x or higher

Your Task

What is a Coding Agent?

An AI that writes code based on your instructions in natural language

👤 You (Manager) Describe what you want Review the result Give feedback "Add a task list" "Make it bigger" 🤖 AI (Developer) Writes the code Creates files Fixes bugs ✨ Working App Add Task

What it IS

  • A very fast assistant who types code for you
  • Great at repetitive tasks and boilerplate
  • Knows many programming languages
  • Available 24/7, never gets tired

What it is NOT

  • Not magic — it makes mistakes
  • Needs clear human direction
  • Cannot understand your business context alone
  • Must be reviewed and tested

Introduction to Antigravity

Your AI-powered coding environment in the browser

Antigravity — study-planner Editor <h1>Welcome</h1> <p>My Study Planner</p> <button>Add Task</button> Ask AI: "Add a task list with checkboxes" Live Preview Welcome My Study Planner Add Task

Creates Files

Generates entire components, pages, and configurations

Writes Code

Implements features from plain English descriptions

Fixes Errors

Debugs and resolves issues you encounter

Explains Things

Helps you understand any code or concept

Setting Up Antigravity

Already familiar from yesterday — now we use its full power

Quick Setup (5 min)

What Antigravity Can Do

  • Write and edit code with AI assistance
  • Run your project with live preview
  • Connect to GitHub to save your code
  • Deploy to the cloud

How to Use the AI

  • Type your request in the AI chat bar
  • Be specific about what you want
  • The AI generates code in your project
  • Review the result in the live preview

Demo: Scaffolding with Antigravity

LIVE DEMO — Teacher demonstrates

Example Prompt

"Create a Next.js project called study-planner
with a homepage showing a welcome message
and a navigation bar with links to Home and Tasks."
Watch the AI interaction and the result. Notice how it asks clarifying questions, creates multiple files, and explains what each one does.

Understanding the Project Structure

A Next.js project has a clear, predictable organization

study-planner/
├── src/app/
│   ├── layout.tsx       # Shared layout (nav, footer)
│   ├── page.tsx         # Homepage (/)
│   └── globals.css      # Global styles
├── public/              # Static files (images, icons)
├── package.json         # Dependencies & scripts
└── next.config.js       # Configuration

Key Concept: File = Page

src/app/page.tsx → /
src/app/tasks/page.tsx → /tasks
src/app/about/page.tsx → /about

Layout

layout.tsx wraps every page. Put your navigation bar and footer here — they appear on every page automatically.

Running Your App

From code to browser in two commands

Terminal $ npm install added 320 packages $ npm run dev - ready on localhost:3000 ● Server running... open localhost:3000 StudyPlanner Home | Tasks Welcome! Get Started

Hot Reload — Every save = instant update in the browser!

Change a file, save it, and the browser updates automatically. No need to refresh manually. This makes development fast and fun.

Open http://localhost:3000 in your browser. If you see your welcome message — congratulations, you are running a web app!

Localhost vs. The Cloud

Why you need to deploy your app

localhost:3000 (your laptop) 💻 Only YOU can see it Stops when you close terminal Needs npm run dev running 👤 Audience: just you vs. your-app.vercel.app (cloud) ☁️ ANYONE can access it Always on, 24/7 Runs automatically on Vercel's servers 👩👨👩‍💻📱🌍 Audience: the whole world
As you learned yesterday: "The cloud" = someone else's computer, always on. Instead of running your app on your laptop, a server in a data center runs it for you — day and night.

What is Vercel?

The easiest way to deploy your app to the cloud

📤 Push to GitHub Your code changes are uploaded auto ⚙ Vercel Builds Detects changes, builds your app automatically 🌍 Live in ~60 Seconds! study-planner.vercel.app Updated every time you push

Made by Next.js Creators

Same company that builds Next.js — best hosting for it

Free for Students

No credit card needed. Perfect for projects.

Auto-Redeploys on Push

Push code → Vercel automatically redeploys

Deploying to Vercel

From code on your computer to a live website in 4 steps

🔑 1. Sign Up vercel.com Use GitHub login 📦 2. Import Repo "Add New Project" Select study-planner 🚀 3. Deploy Click "Deploy" Wait ~60 seconds 🌍 4. LIVE! study-planner .vercel.app

Deployment Steps

Your app is live! You get a URL like https://study-planner-abc123.vercel.app — share it with anyone in the world!

What is a Database?

Where your app stores data permanently

Without Database Add "Math exam" task ✓ Refresh the page... Task is GONE! Data lived in memory only. Like writing on a whiteboard that gets erased every hour With Database Add "Math exam" task ✓ Saved to file Refresh, restart, come back tomorrow... Task is STILL THERE! Data saved permanently. Like writing in a permanent notebook
▦

SQL

Tables with rows and columns (like Excel)

▦

NoSQL

Flexible documents (like JSON files)

▦

JSON Files

The simplest option — perfect for learning!

This week: We use JSON files as our database. Simple, readable, and perfect to learn the concept. Real production apps use SQL or NoSQL databases.

JSON as a Simple Database

JSON = JavaScript Object Notation — a text file that stores structured data

The JSON File

{
  "tasks": [
    {
      "id": 1,
      "title": "Study for exam",
      "dueDate": "2026-03-20",
      "completed": false
    },
    {
      "id": 2,
      "title": "Submit project",
      "dueDate": "2026-03-22",
      "completed": true
    }
  ]
}

What You See in the App

Study for exam Due: March 20, 2026 Pending ✓ Submit project Due: March 22, 2026 Completed
JSON is readable by humans AND computers. You can open it in any text editor and understand it instantly. The app reads this file and turns it into the cards you see on screen.

Reading JSON in Next.js

API Routes = server-side code in Next.js

💻 Your Page fetch("/api/tasks") API Route app/api/tasks/route.ts GET() reads the JSON file Returns data as JSON JSON File (Database) data/tasks.json [{title: "Study..."}, ...] Stored on disk permanently 
// src/app/api/tasks/route.ts
import { readFileSync } from 'fs';

export async function GET() {
  const data = readFileSync('data/tasks.json', 'utf-8');
  return Response.json(JSON.parse(data));
}
Create a file = create an API. app/api/tasks/route.ts becomes /api/tasks. Same file-based routing magic as pages!

Building Features with Antigravity

A simple 4-step strategy for every feature

📝 1. Describe Feature Be specific. Reference Figma + GitHub issue 🤖 2. AI Implements Antigravity creates files and writes code 🧪 3. Review & Test Open browser, click around, check it works ✓ 4. Close Issue Mark done on GitHub Move to next feature

Example prompt for a feature

"I'm working on GitHub issue #3: Create Task List Page.
Based on my Figma design, build a page at /tasks that shows
all tasks from data/tasks.json as cards with title, due date,
priority badge, and a completion checkbox."
One issue at a time. Don't try to build everything at once. Complete one feature, test it, close the issue, then move to the next.

Demo: Adding Task Creation

LIVE DEMO — Teacher demonstrates

Add New Task Title Study for math exam Due Date 2026-03-25 Priority High ▼ Create Task

Prompt for Antigravity

Create a form at src/app/tasks/new/page.tsx with fields
for title, due date, and priority (low/medium/high).
On submit, POST to /api/tasks which appends to tasks.json.
Redirect to /tasks after successful creation.

Demo: Adding Task List

LIVE DEMO — Teacher demonstrates

  • Prompt Antigravity to create a task list page
  • Fetch data from /api/tasks
  • Display tasks as styled cards
  • Iterate: improve styling, add filters

Prompt: "Fetch from /api/tasks and display as cards"

Show title, due date, priority badge, and completion checkbox for each task.

Iterative development: build, test, improve. The first version is never perfect. Each prompt refines the result — better styling, more features, fewer bugs. This is how real development works.

Closing GitHub Issues

Track your progress by closing completed work

! Open Issue "Create Task List Page" #3 • feature Build it Add a Comment "Built the task list page with cards, checkboxes, and priority badges. Deployed to Vercel." Close it ✓ Closed! Progress visible to teacher History of what you built

When a Feature is Done

  • Go to your GitHub repository
  • Open the issue you completed
  • Add a comment describing what was done
  • Click "Close issue"

Why It Matters

  • Keeps your project organized
  • Shows progress to your team and teacher
  • Creates a history of what was built and when
  • Professional habit used in every company
Goal for today: Close at least 2 GitHub issues with comments describing the work completed.

Addendum: What is Authentication?

Knowing who is using your app

Authentication

Who are you?
Verify identity via email/password, Google, etc.

Authorization

What can you do?
Control who can read, write, or delete data

Session

Stay logged in
A token stored in the browser remembers you

Multi-User

Shared but personal
Each user sees their own data in a shared space

Why does this matter? Without authentication, every visitor is anonymous. You cannot save personal data or restrict who changes what.

Firebase: Your Backend in Minutes

Google's platform for building apps without managing servers

Firebase Auth

Drop-in authentication: email/password, Google, GitHub, phone number. Handles sign-up, sign-in, password reset, and session management.

Firestore

Real-time NoSQL database. Data syncs across all connected clients instantly. Organized in collections and documents (like folders and files).

Free Tier

Generous free plan: 50K auth users/month, 1GB Firestore storage, 50K reads/day. More than enough for learning and small projects.

Why Firebase? Building your own auth system is complex and error-prone. Firebase handles password hashing, token management, and security — so you focus on your app.

How Firebase Auth Works

The sign-in flow in 4 steps

1. User Signs In Email + password or Google button 2. Firebase Verifies Checks credentials Returns a JWT token 3. Token Stored Browser saves token Auto-refreshed 4. User Identified user.uid available in every request import { signInWithEmailAndPassword } from 'firebase/auth' const result = await signInWithEmailAndPassword (auth, email, password) // result.user.uid → unique identifier for this user

Firestore: Real-Time Data

A database that syncs across all users instantly

schools (collection) my-school (document) other-school ... events (sub-collection) userId:"abc123" title:"Math Lecture" day:"mon", startHour: 9, endHour: 11 type:"class", color: "#a855f7" Real-time with onSnapshot() When Alice adds an event, Bob's browser updates automatically — no page refresh needed. Firestore pushes changes to all connected clients via WebSocket.

Multi-User: How It All Connects

Auth + Firestore = shared but personal

1. Sign In

Each student signs in with their email. Firebase gives them a unique user.uid.

2. Write Events

When a user adds an event, it is saved with their userId attached. This is the ownership tag.

3. Read All Events

Every user sees all events in the school. The calendar shows everyone's schedule.

4. Edit Own Only

Users can only modify or delete events where userId === currentUser.uid. Others are read-only.

Key principle: Authentication answers "who is this user?" — Authorization answers "what can this user do?" You need both for a multi-user app.

Today's Deliverables

By the end of today, you should have all 6 completed

1

App Running Locally
npm run dev works at localhost:3000

2

At Least 3 Pages
Homepage + tasks + planning

3

JSON Database
Read & write data via API routes

4

Deployed to Vercel
A live URL anyone can visit

5

Firebase Auth
Sign in/up + multi-user planning screen

6

2+ Issues Closed
With comments on what was done

Checkpoint: Raise your hand when you have all 5 deliverables. The teacher will review and give feedback.

Time to Practice!

Build your first web application

Practical Work 2

Building Your First Web App

Open Practical Work →

8 Exercises

Install, Build, Deploy, Polish

5-6 Hours

Guided hands-on coding

Beginner

Follow step-by-step instructions

Remember: The goal is not to memorize code — it is to understand the process. Antigravity writes the code; you manage the project.

Bonus: Multi-User Planning

For those who finish early or want an extra challenge

Bonus Exercise

Shared School Planning Screen with Firebase

Open Bonus Exercise →

6 Steps

Firebase setup, Auth, Firestore, real-time sync

2-3 Hours

Can be done in class or as homework

Intermediate

Builds on Practical Work 2

This exercise uses the Firebase concepts covered in the addendum slides. Multiple users sign in, share a weekly calendar, and see real-time updates from classmates.

Day 2 Complete!

What You Learned Today

✓ How the web works (HTTP, client/server)
✓ HTML, CSS, JavaScript fundamentals
✓ Next.js — file-based routing and API routes
✓ Antigravity — AI-driven development
✓ Vercel — one-click deployment
✓ JSON files as a simple database
✓ Firebase Auth & Firestore — multi-user real-time apps
✓ The complete build → test → deploy cycle

Days 3-4: YOUR OWN project! You and your partner will design, build, and deploy your own application from scratch. Day 5: Demo Day — present your creation to the class!

2026 WayUp - way-up.io

Slide Overview