OIM3690 - AI-Powered Web Development

2026 Spring

Session 25 (4/23)

Today's Agenda

• Announcements
• What We've Learned So Far
• JavaScript Extras
  • Timers, localStorage, Geolocation, try/catch
• Frameworks Preview
• Where to Deploy Your Projects
• Deploy Your Project

Announcements/Updates

• Weekly Learning Logs - wk13.md due this week
• Repo Checkpoints - Make sure all projects are pushed and up to date
• Mini Project #3 - API-Powered App. Due 4/28.
• Final Project - Proposals submitted. Start building!
• Demo Day - Next session (4/28) in Olin 101
• Communication
  • Office Hours: Walk-in or by appointment
  • Email: Specify course # in subject, e.g., "OIM3690: GitHub settings"
  • You are required to meet with me at least once this semester
• Questions?

What We've Learned So Far

• How the Web Works - DNS, HTTP, client-server model
• Tools - Git & GitHub, GitHub Pages, Copilot, DevTools
• HTML - document structure, common tags, semantic HTML, accessibility, forms
• CSS - selectors, box model, layout (Flexbox/Grid), responsive design, frameworks
• JavaScript - DOM, events, variables, types, functions, conditionals
• Arrays & Loops - creating/modifying arrays, for, while, for...of, forEach
• APIs - fetch(), async/await, JSON, GET vs POST, error handling
• API Protection - config.js, .gitignore, server-side proxies

JavaScript Extras

setTimeout / setInterval

// Run once after 2 seconds
setTimeout(() => {
  alert('Time is up!');
}, 2000);

// Run every 1 second (countdown timer)
let count = 10;
const timer = setInterval(() => {
  document.getElementById('display').textContent = count;
  count--;
  if (count < 0) clearInterval(timer);
}, 1000);

setTimeout = run once after delay. setInterval = run repeatedly. Use clearInterval() to stop.

localStorage

Store data that survives page refresh and browser close.

// Save a value
localStorage.setItem('theme', 'dark');

// Load a value
const theme = localStorage.getItem('theme');  // 'dark'

// Save objects (convert to JSON first)
const user = { name: 'Alice', score: 95 };
localStorage.setItem('user', JSON.stringify(user));
const saved = JSON.parse(localStorage.getItem('user'));

See it in DevTools: Application tab > Local Storage. Full slides: localStorage

Geolocation API

Get the user's location (requires permission):

navigator.geolocation.getCurrentPosition(
  (position) => {
    const { latitude, longitude } = position.coords;
    console.log(`You are at ${latitude}, ${longitude}`);
  },
  (error) => {
    console.log('Location access denied');
  }
);

Use it for: nearby results, distance calculations, map markers.

try / catch

Handle errors gracefully instead of crashing:

try {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  displayData(data);
} catch (error) {
  document.getElementById('output').textContent =
    'Something went wrong. Please try again.';
}

Always wrap fetch() calls in try/catch. Show users a helpful message, not a blank page.

Beyond Vanilla JavaScript

What the industry uses (and what AI tools generate):

You've learned the fundamentals all frameworks build on. DOM, events, fetch, and state management carry over directly.

Full slides: Beyond Frontend

Where to Deploy

Choosing a Platform (Free Tiers)

What kind of app are you deploying?

If your app has no server code, use GitHub Pages. If it needs to hide an API key behind a server, use Vercel or Render.

For production/high-traffic apps: AWS, Google Cloud, Azure, DigitalOcean (paid).

Free Hosting Comparison

For this course: GitHub Pages for Mini Projects, Vercel for API projects.

Common Deployment Issues

Blank page?
index.html must be in the repo root (or configure folder in GitHub Pages settings)

Broken images?
Use relative paths: images/photo.jpg, not C:\Users\me\Desktop\photo.jpg

React/TypeScript won't work on GitHub Pages?
GitHub Pages serves static files only. Use Vercel (auto-builds for you).

API key visible in DevTools?
config.js or .env + .gitignore keeps keys off GitHub, but client-side code is always visible. Use a server-side proxy to truly protect keys. Vercel, Render, and others let you set environment variables in their dashboard.

Your Turn: Deploy Your Project

Deploy to Vercel or Render

You've used GitHub Pages for static sites. Now try deploying to Vercel or Render:

1. Pick a project - Mini Project #3, Final Project, or the OpenAI demo
2. Push your code to a GitHub repo
3. Connect the repo on vercel.com or render.com
4. Set environment variables (API keys) in the dashboard
5. Get your public URL and test it

Want a custom domain? If you have the GitHub Student Developer Pack, you can get a free .me or .tech domain. I can help you set it up.

I'm here to help!

Before You Leave

Wrap Up

• [ ] Deploy at least one project with a public URL
• [ ] Update your learning log (wk13.md)
  • Which deployment platform did you choose? Why?
  • Which JS "extra" was most useful?
• [ ] Continue building your Final Project

Demo Day: Next Session (4/28)

Location: Olin 101 (not our usual classroom)

Format: Gallery Walk (two rounds)

• Round 1 (~15 min): Group A presents, Group B walks around
• Round 2 (~15 min): swap
• As an observer, ask: What problem does it solve? Hardest part? Which AI tools did you use?
• Voting at the end

What to Prepare for Demo Day

• [ ] Deploy your Final Project with a working public URL
• [ ] Submit on Canvas: Final Project - Deployed Website URL (before Monday 4/28 6pm)
  • Submit the website URL (not the GitHub repo URL)
  • If deployment isn't working: repo URL + screenshots as fallback
• [ ] Laptop open and ready to demo
• [ ] Be ready to explain your project in ~2 minutes

Final Submission (code, README): 5/1 (Thu)

This is our last in-person session. Make it count!