← Back to Lecture
Practical Work 4

AI Development Sprint

Complete your project and prepare for Demo Day

Duration 6 hours
Difficulty Intermediate
Session Day 4

Objectives

By the end of this practical work, you will be able to:

  • Complete all must-have features using CRAFT prompting
  • Apply debugging strategies when things go wrong
  • Polish the app with realistic data and consistent styling
  • Prepare a demo script for the Day 5 presentation

Prerequisites

  • Completed Practical Work 3 (project chosen, specs written, design done, scaffold deployed)
  • At least 1 feature started from Day 3

Your Day Timeline

Stick to this schedule for maximum output:

Time Activity Duration
9:00 Status Review 15 min
9:15 – 12:00 Feature Sprint AM 2 h 45 min
12:00 – 13:00 Lunch 1 h
13:00 – 15:00 Feature Sprint PM 2 h
15:00 Feature Freeze — no new features!
15:00 – 16:00 Polish & Demo Prep 1 h
Exercise 1 ~15 min

Morning Status Review

Take Stock of Where You Are

Before writing any code, assess your current progress and plan your day.

Step 1: Review GitHub Issues

Open your GitHub repository and check the Issues tab:

  • How many issues are closed (done)?
  • How many issues are still open (remaining)?
  • Which issues are must-have vs should-have vs could-have?

Step 2: Plan Your Day

Order your remaining features by priority:

  1. List all remaining must-have features first
  2. Estimate time for each remaining feature (be honest!)
  3. If behind schedule: move items from must-have to could-have
  4. Write down your top 3 goals for the morning sprint

Be realistic — better to finish 3 features well than 6 features poorly. Cut scope now, not at 4 PM.

Checkpoint: You have a clear plan with your top 3 goals for the morning sprint written down.

Exercise 2 ~2.5 hours (9:15 – 12:00)

Feature Sprint — Morning

The Feature Cycle

For each feature, follow this cycle:

  1. Read the GitHub issue — understand the acceptance criteria
  2. Write a CRAFT prompt — be specific about what you need
  3. Let Antigravity implement — review the generated code
  4. Test in browser — does it work as expected?
  5. Fix issues — iterate with Antigravity if something is off
  6. Commit — push your changes to GitHub
  7. Close the issue — mark it as done

CRAFT Prompt Template

Copy, customize, and paste this template for each feature:

Context: I'm building [app name] with Next.js + TypeScript + Tailwind.
The project is at [describe current state].

Requirement: [paste GitHub issue description]

Create [file path] that:
- [specific requirement 1]
- [specific requirement 2]
- [specific requirement 3]

Use Tailwind CSS for styling. Match the existing app style.

On success: [what should happen]
On error: [how to handle errors]

Tip: Always reference existing files in your project. Antigravity works best when it can see what you have already built and match the style.

Common Prompt Patterns

  • Create a Page: Specify the route path, what data it displays, and the layout (list, grid, detail view). Reference your Figma design.
  • Add a Form: List all fields and their types, validation rules (required, min/max), and the submit action (save to file, call API).
  • Fix a Bug: Paste the full error message, describe the expected behavior, and mention what you were doing when it broke.
  • Improve Styling: Describe the desired look, reference your Figma screenshot, and mention specific elements (spacing, colors, fonts).

Mid-Morning Checkpoint (11:00 AM)

By 11:00 AM you should have at least 1 more feature complete. If you started the day with features from Day 3, you should now have at least 2–3 working features total.

Quick self-check:

  • New feature tested in browser and working correctly
  • Code committed to GitHub with a clear commit message
  • Corresponding GitHub issue closed

Ask your teacher for help if stuck longer than 15 minutes. Do not waste time spinning your wheels — a quick hint can save you an hour.

Checkpoint: At least 1 new feature implemented, tested, committed, and GitHub issue closed.

Exercise 3 ~2 hours (13:00 – 15:00)

Feature Sprint — Afternoon

Prioritize Based on Progress

Decide your afternoon strategy based on where you stand after lunch:

  • Must-haves not done? Focus exclusively on must-have features. Do not start any nice-to-haves. Ask yourself: "What is the minimum for my demo to work?"
  • Must-haves done? Start should-have features. Pick the ones with the biggest visual impact for your demo: better styling, animations, extra pages.

Quality over quantity — make what you have work perfectly. A polished app with 3 features beats a broken app with 6 features.

Debugging Quick Reference

Problem Solution
Page won't load Check terminal for errors. Stop the server (Ctrl+C) then run npm run dev again.
Data not saving Check your API route file. Open DevTools (F12) → Network tab. Verify the request is sent and the response is correct.
Styling broken Clear browser cache (Ctrl+Shift+R). Check that Tailwind classes are spelled correctly. Inspect the element in DevTools.
Deploy fails Check Vercel build logs for the error. Fix the error locally first, confirm npm run build succeeds, then push again.

2 PM Checkpoint

At 2:00 PM, do a quick review with your teacher:

  • Show your working features in the browser (live demo)
  • Discuss remaining work and your plan for the last hour
  • Get approval to move to the polish phase

Feature freeze in 1 hour! After 3 PM, no new features. Only bug fixes and polish.

Checkpoint: Teacher has reviewed your progress. You have a clear plan for the final hour.

Exercise 4 ~1 hour (starting at 3 PM)

Feature Freeze & Polish

STOP Adding New Features at 3 PM Sharp

From 3 PM onward, your only job is to make what you have look and work as well as possible. No new pages, no new functionality.

Step 1: Fix Remaining Bugs

Go through your entire app systematically:

  • Click every button — does it do what it should?
  • Fill every form — does it validate correctly?
  • Navigate between all pages — are there broken links?
  • Fix anything that is broken before moving on

Step 2: Improve the UI

  • Consistent spacing between elements
  • Readable font sizes (not too small, not too large)
  • Aligned elements (no off-center text or images)
  • Small tweaks make a big difference in the demo

Step 3: Add Realistic Data

Replace all placeholder content with real-looking data:

  • Replace "test", "asdf", and "Lorem ipsum" entries
  • Add 5–10 realistic entries that make sense for your app
  • Use real names, dates, and descriptions

Step 4: Test Full User Flow

Walk through your app end-to-end as a real user would. Then test on mobile by resizing your browser window.

Step 5: Polish Checklist

Step 6: Final Push

Commit and deploy your polished app:

git add .
git commit -m "Final polish: fix bugs, add realistic data, improve UI"
git push

Pro tip: Open your Vercel URL on your phone. Does it look good? If not, ask Antigravity to fix the responsive layout before you move on.

Checkpoint: Your app is polished, bug-free, and deployed to Vercel with a working live URL.

Exercise 5 ~30 min

Prepare Your Demo

Write and Practice Your Demo Script

Tomorrow is Demo Day. Prepare a clear, practiced presentation.

Step 1: Write Your Demo Script

Your demo should follow this structure:

  1. Problem (30 seconds): "Have you ever [problem]? My app solves this by..."
  2. Live Demo (3 minutes): Show feature 1, then feature 2, then feature 3. Click through real data. Do not just describe — show it working.
  3. Learnings (1 minute): "This week I learned [key lesson]. The biggest challenge was [X] and I solved it by [Y]."

Step 2: Demo Script Template

Use this template to write your script:

PROBLEM (30s):
"Have you ever [describe the problem]?
My app, [app name], solves this by [one-sentence solution]."

DEMO (3 min):
1. Open the app at [Vercel URL]
2. Show [Feature 1]: click [button], fill in [form], show [result]
3. Show [Feature 2]: navigate to [page], demonstrate [action]
4. Show [Feature 3]: [describe what to click and show]

LEARNINGS (1 min):
"This week I learned [key lesson].
The biggest challenge was [X] and I solved it by [Y].
If I had more time, I would add [future feature]."

Step 3: Practice and Prepare Backups

  • Practice your demo once with a partner — ask for honest feedback
  • Take backup screenshots of every key screen (save locally in case the internet fails)
  • Prepare 2–3 talking points about what you learned this week

Practice your demo tonight. Tomorrow you present to the class!

Checkpoint: Your demo script is written and you have practiced at least once with a partner.

Summary

Summary

Deliverables

Do not leave until all items are complete:

Evaluation Criteria

Criterion Weight Description
Functionality 40% All must-have features working correctly
Design Quality 20% Consistent UI, realistic data, responsive layout
Specifications 20% Clear specs, issues tracked and closed properly
Presentation 20% Clear demo script, practiced delivery

Bonus Challenges

Video Walkthrough: Record a 2-minute video walkthrough of your app as a backup for demo day.

Error Handling: Add error handling and loading states throughout the app (spinners, error messages, empty states).

Wow Factor: Implement one "wow factor" feature — an animation, a chart, or a creative interaction that makes your app stand out.

Step Overview