Your Own Project

App Programming - Day 3

The Challenge Begins

From guided project to your own creation

2026 WayUp

Recap: What We Built Together

Day 1: Planning

  • Wrote specifications for our app
  • Designed the UI in Figma with Stitch AI
  • Created a GitHub repository with issues

Day 2: Building

  • Learned web basics (HTML, CSS, JavaScript)
  • Built a Next.js application
  • Used Antigravity to write features
  • Deployed to Vercel
You've built an app together. Now it's YOUR turn.

The Challenge

Build your own web application in 2 days

①

Solve a Real Problem

Your app must address a genuine need or pain point

②

At Least 3 Features

Implement a minimum of three distinct, working features

③

Deployed on Vercel

Your app must be live and accessible via a public URL

④

Demo on Day 5

Prepare a 5-minute demonstration for the class

2 DAYS

to build your own app

Choosing a Good Project

Think about YOUR daily life

Solves a Problem You Understand

Pick something from your own experience. If you understand the problem deeply, you can build a better solution.

Realistic Scope for 2 Days

You have about 12 hours of development time. Keep it focused and achievable.

Demonstrable in 5 Minutes

Can you show someone what it does in a short demo? If yes, the scope is right.

Key question: What annoys you in your daily routine that a simple app could fix?

Project Ideas for Inspiration

💰

Budget Tracker

Track income and expenses, see where your money goes

🍳

Recipe Organizer

Save, categorize, and search your favorite recipes

📚

Study Flashcards

Create and review flashcards for any subject

🎉

Event Planner

Organize events with dates, locations, and guest lists

✅

Habit Tracker

Track daily habits and visualize your streaks

📖

Book Journal

Log books you've read with notes and ratings

💪

Workout Logger

Record exercises, sets, reps, and track progress

📅

Schedule Organizer

Manage your weekly timetable and assignments

Or propose your own idea! The best projects come from personal motivation.

What is Too Big?

Too Ambitious

  • "I want to build something like Instagram"
  • "It needs real-time chat"
  • "I want to add payment processing"
  • "Users need to create accounts and log in"
  • "It should work differently on mobile and desktop"

Just Right

  • Simple CRUD operations (Create, Read, Update, Delete)
  • One clear purpose
  • 3 to 5 screens maximum
  • One type of data to manage
  • Works well on one platform
Remember: A simple, finished app beats an ambitious, half-built one every time.

Analysis of Needs

Answer these four questions before you start building

①

Who Uses This App?

Define your target user. Is it you? Students? A specific group? The clearer, the better.

②

What Problem Does It Solve?

One sentence: "This app helps [who] to [do what] because [why it matters]."

③

What Are the 3 Most Important Features?

List exactly three features. If you can't pick three, your idea may be too vague or too broad.

④

What Data Needs to Be Stored?

What information does the app need to remember? Titles, dates, numbers, text, images?

Writing Your Specifications

Your README.md is your project blueprint

Specification Template

  1. Project title - A clear, descriptive name for your app
  2. One-sentence description - What it does and who it's for
  3. Target user - Who will use this and why they need it
  4. Features with MoSCoW priority:
    • Must have - Core features (your MVP, minimum 3)
    • Should have - Important but not critical
    • Could have - Nice bonus features
  5. Data model - What information does the app store? (e.g., name, date, category, amount)
Tip: Write this directly in your GitHub README.md file. It becomes your project documentation.

Planning with GitHub

Your project management hub

GitHub Setup Checklist

  • Create a new repository with a descriptive name
  • Write your README.md with full specifications
  • Create one issue per feature (title + description + acceptance criteria)
  • Add labels: must-have, nice-to-have, bug

Good Issue Example

Title: Add expense form

Description: User can enter amount, category, and date

Done when: Form saves data and shows confirmation

Why Issues Matter

Issues give you a clear task list to work through. Close them as you go - it feels great and keeps you organized.

Design Your UI

Open Figma and use Stitch AI to accelerate your design

①

Open Figma

Create a new file named after your project. Set up one frame per screen.

②

Use Stitch AI

Describe your screens to Stitch AI and let it generate layouts. Then customize.

③

Design 3+ Screens

Home page, main feature screen, and one detail/edit screen. Cover the core user flow.

④

Focus on Must-Haves

Don't design screens for features you might not build. Design what matters first.

Share your design: Copy the Figma share link and add it to your GitHub README.

Scaffold Your Project

Get your Next.js project up and running

# Create your Next.js project
npx create-next-app@latest my-project \
    --typescript --tailwind --app --src-dir

# Your project structure
my-project/
  src/
    app/
      page.tsx        # Home page
      layout.tsx      # Shared layout
      globals.css     # Global styles
  public/             # Images, icons
  package.json        # Dependencies
Push to GitHub and connect to Vercel immediately. Even the default "Hello World" page should be deployed. You want a live URL from minute one.

Working with Antigravity

Best practices for AI-driven development

1 Start with the Most Important Feature

Build your #1 must-have feature first. If you run out of time, at least you have the core.

2 One Feature at a Time

Don't ask the AI to build everything at once. Focus on one feature, get it working, then move on.

3 Test Before Moving On

Open your browser and verify each feature works before starting the next one.

4 Commit After Each Feature

Save your progress with a git commit. If something breaks later, you can always go back.

Getting Teacher Approval

Before you start coding, show your teacher:

Approval Checklist

  • GitHub repository with README containing your specifications
  • Issues created for each feature with labels
  • Figma design with at least 3 screens covering the main user flow
  • Clear feature priority list (Must / Should / Could)
No coding until approval! The teacher will confirm your scope is appropriate and help you adjust if your project is too big or too small.

End-of-Day Checkpoint

By the end of today, you must have:

1

Project chosen and approved by the teacher

2

GitHub repo ready with specs in README and issues created

3

Figma design done with at least 3 screens

4

Vercel deployed with your Next.js project live

5

1+ feature started using Antigravity

Tips for Success

Start Simple

Get the basic version working first. You can always add complexity later. A working simple app is better than a broken fancy one.

Deploy Early, Deploy Often

Push to GitHub regularly. Vercel deploys automatically. Always have a working version online.

Ask for Help

If you're stuck for more than 15 minutes, ask the teacher or a classmate. Don't waste time being frustrated.

Keep Issues Updated

Close GitHub issues as you complete features. It keeps you organized and shows your progress.

Common Pitfalls

Scope Creep

Trap: "Just one more feature..."

Fix: Stick to your must-have list. Finish those first. Only then consider nice-to-haves.

Perfectionism

Trap: Spending hours on pixel-perfect design

Fix: "Done" beats "perfect." Ship it, then polish if time allows.

Not Testing

Trap: Writing code without checking the browser

Fix: Check your app after every change. Catch bugs early, not the night before demo day.

Not Committing

Trap: Losing work because you didn't save to Git

Fix: Commit early, commit often. Every working feature = one commit.

Tomorrow: AI-Driven Development Day

A full day of building with AI assistance

Your Role: The Builder

  • You decide what to build and when
  • You review and test everything
  • You manage your time and priorities
  • You are the project owner

Teacher's Role: The Coach

  • Available for questions and guidance
  • Helps unblock you when stuck
  • Reviews progress and gives feedback
  • Ensures you stay on track
Goal for tomorrow: Complete all must-have features and start preparing your demo for Day 5.

Time to Practice!

Build your own project from scratch

Practical Work 3

Your Own Project

Open Practical Work →

7 Exercises

Choose, Spec, Design, Build

5-6 Hours

Independent project work

Intermediate

Apply what you learned Days 1-2

Go Build!

The best way to learn is by doing. Your project starts NOW.

Good luck - we can't wait to see what you create!

2026 WayUp

Slide Overview