From Problem to Prototype

Let's Talk About AI First

• How often do you use AI tools (ChatGPT, Claude, Copilot)?
• What do you use them for?
• Have you ever tried to build something with AI?
• What do you think AI can and cannot do?

What Can You Build on the Web?

Think about websites and web apps you use every day:

• Websites: portfolios, blogs, landing pages, info sites
• Web Apps: Gmail, Google Docs, Instagram (web version), Netflix, online stores

This semester, you'll learn to build these - all accessible through a browser!

Finding Your Own Pain Points

Think about your daily life and studies:

• What repetitive tasks do you do every day/week?
• What tedious processes frustrate you?
• What information do you wish was easier to access?
• What problems do you keep running into?

Write down 2-3 pain points on paper.

Look Around: Other People's Problems

Sometimes the best ideas come from observing others:

• What do you see your friends or roommates complaining about?
• What inefficiencies have you noticed in clubs or student organizations?
• Is there a startup idea you've been thinking about for a while?
• What tools or services do people around you wish existed?

Write down 2-3 observations or ideas.

Step 1: One Sentence

Imagine you could build any web app to solve one of those problems.

Write ONE sentence describing your app idea:

"A website/web app that ____________ for ____________."

Example: "A website/web app that converts my messy class notes into study guides for exam prep."

Step 2: Add Details

Now flesh out your one-sentence idea:

1. What would it do? (1-2 sentences)
2. Who would use it? (yourself? friends? others?)
3. What's the core feature? (the ONE thing it must do)

Write this on paper.

Step 3: Make It Concrete

Add real content and specific features:

• What sections or pages will it have?
• What actual content will be on the homepage?
• What actions can users take? (buttons, forms, interactions)
• Any style preferences? (colors, mood, examples of sites you like)

Example: "Homepage shows today's total, a log button, and a chart. Coffee log page has a form (amount, price, time)."

Step 4: Iterate with Feedback

Share with a neighbor:

• Explain your idea
• Listen to their questions and suggestions
• Revise and clarify

Try It Yourself: Vibe Coding

• Use any AI tool to turn your idea into code.
  • Recommended: Replit (no local setup needed)
• Round 1: Paste your one-sentence description (Step 1) → See what it generates
• Round 2: Paste your detailed specs (Steps 2-4) → Watch it improve
• Round 3: Ask AI to refine specific parts based on your feedback

From Idea to Reality

This semester, you'll learn to:

1. Describe your idea clearly (for yourself and AI)
2. Generate initial code with AI tools
3. Understand what the code does
4. Modify and improve it
5. Deploy it for the world to see

Keep Your Idea!

• Save your web app idea
• You might use it for your Final Project
• Or build it as a Mini Project along the way

The best web projects come from real problems you want to solve.