Choose Your Project

Your Task

Review the project ideas from the lecture. Pick one that solves a real problem you care about, or propose your own idea. The key is to choose something you are genuinely motivated to build.

Step 1: Write Your Pitch

Write a one-sentence pitch that clearly explains what you are building:

"I'm building [name], a [type] app that helps [who] to [what]."

Examples:

• "I'm building MealPlanner, a web app that helps busy students to plan their weekly meals and generate shopping lists."
• "I'm building PetSitter, a marketplace app that helps pet owners to find trusted pet sitters in their neighborhood."

Step 2: Peer Feedback

Share your pitch with your neighbor. Can they understand it in 30 seconds? If not, simplify. Ask them:

• "Would you use this?"
• "Is it clear what the app does?"
• "Does the scope sound reasonable?"

Write Specifications

Your Task

1. Create a new GitHub repository with a descriptive name
2. Write a comprehensive README using the template below
3. Commit the README to your repository

README Template

Use this structure for your project README. Replace the placeholder text with your own content:

# [Project Name]
[One-sentence description from your pitch]

## Target User
[Who will use this app? Be specific about their needs and pain points.]

## Features

### Must Have
- Feature 1: [description]
- Feature 2: [description]
- Feature 3: [description]

### Should Have
- Feature 4: [description]
- Feature 5: [description]

### Could Have
- Feature 6: [description]

## Data Model
[What data does the app store? List the main entities and their key fields.]

Example:
- **Recipe**: title, ingredients (list), steps (list), prep time, category
- **User**: name, email, saved recipes (list)

## Tech Stack
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- Deployed on Vercel

## Design
[Figma link will go here]

## Live Demo
[Vercel URL will go here]

Create GitHub Issues

Your Task

1. Create one issue per feature from your README
2. Each issue needs: title, description, acceptance criteria
3. Add labels: "must-have" and "nice-to-have"
4. Order issues by priority (most important first)

Example Issue

Here is what a well-written GitHub issue looks like:

Title: Add recipe creation form

**Description:**
As a user, I want to add a new recipe so I can save my favorite meals.

**Acceptance Criteria:**
- [ ] Form has fields: title, ingredients, steps, prep time
- [ ] Clicking "Save" stores the recipe and redirects to the recipe list
- [ ] Form validates that title is not empty
- [ ] Ingredients can be added/removed dynamically
- [ ] Success message appears after saving

**Labels:** must-have

Tips for Good Issues

• Write from the user's perspective: "As a user, I want to..."
• Keep acceptance criteria specific and testable
• Each issue should represent a single feature or task
• Reference related issues if features depend on each other

Design in Figma

Your Task

1. Create a new Figma file named "[Your App] - Design"
2. Use the Stitch AI plugin for initial layout generation
3. Design at least 3 key screens
4. Focus on must-have features first

Required Screens

Your design must include at least these three views:

• Screen 1: Home / List view — shows all items in your app (e.g., list of recipes, list of tasks, marketplace listings)
• Screen 2: Create / Edit view — form to add or edit an item (e.g., new recipe form, new task form)
• Screen 3: Detail view — shows one item in full detail (e.g., a single recipe with all ingredients and steps)

Using Stitch AI

1. Open Figma and create a new design file
2. Go to Plugins > Stitch AI
3. Describe the screen you want: "A recipe list page with cards showing recipe name, image, and prep time"
4. Customize the generated layout to match your vision
5. Repeat for each screen

Share Your Design

1. Click the Share button in Figma (top right)
2. Set sharing to "Anyone with the link can view"
3. Copy the link
4. Paste the link into your GitHub README under the Design section

Get Teacher Approval

Show Your Teacher

Before moving on to development, present the following to your teacher for validation:

• README with full specifications (Must / Should / Could features)
• GitHub issues with descriptions, acceptance criteria, and labels
• Figma designs covering the core user flow (3+ screens)

What the Teacher Checks

The teacher validates your project scope to ensure it is neither too ambitious nor too simple:

• Is the project realistic for ~2 days of development?
• Are the must-have features clearly defined and testable?
• Does the design cover the main user journey?
• Are issues specific enough to guide AI-driven development?

Scaffold & Deploy

Your Task

1. Create a Next.js project with TypeScript and Tailwind CSS
2. Push the initial code to your GitHub repository
3. Connect the repository to Vercel and deploy
4. Add the Vercel URL to your README

Step 1: Create the Project

Run the following command in your terminal:

npx create-next-app@latest my-project --typescript --tailwind --app --src-dir
cd my-project
npm run dev

Replace my-project with your actual project name (use lowercase and hyphens, e.g., meal-planner).

Step 2: Push to GitHub

git init
git add .
git commit -m "Initial project setup with Next.js, TypeScript, and Tailwind"
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
git push -u origin main

Step 3: Deploy to Vercel

1. Go to vercel.com and sign in with GitHub
2. Click "Add New Project"
3. Import your repository
4. Click "Deploy" — Vercel auto-detects Next.js settings
5. Copy the deployed URL and add it to your README

Start Building

Your Task

1. Pick your first must-have feature and open the corresponding GitHub issue
2. Use spec-oriented prompts to guide Antigravity
3. Test in browser after each change
4. Commit after each working feature and close GitHub issues as completed

Prompting Template

Use this template when asking Antigravity to implement a feature:

I'm building a [project name] with Next.js, TypeScript, and Tailwind CSS.

Feature: [paste GitHub issue description]

Create the page at src/app/[path]/page.tsx that [description].

Use Tailwind CSS for styling.

Here is my Figma design for reference: [describe what the screen looks like]

Acceptance criteria:
- [paste from GitHub issue]

Prompting Tips

• Always mention the tech stack: Next.js, TypeScript, Tailwind
• Be specific about file paths: src/app/recipes/page.tsx
• Describe visual expectations from your Figma mockup
• Include sample data so Antigravity creates realistic examples
• Reference your GitHub issue description directly in the prompt

Troubleshooting

Situation	What to Do
Stuck on an error	Copy the full error message from the terminal or browser. Paste it to Antigravity and ask: "Fix this error."
Stuck on design	Open your Figma design for the screen. Describe exactly what you see (layout, colors, elements) and ask Antigravity to implement it.
Stuck for 15+ minutes	Ask a neighbor or your teacher for help. A fresh pair of eyes often solves the problem instantly.
Feature too complex	Break it into smaller steps. Implement the simplest version first, then iterate.

Summary

Deliverables

By the end of this session, you should have completed the following:

Evaluation Criteria

Criterion	Weight	Description
Project Selection	10%	Clear pitch, realistic scope, solves a real problem
Specifications	25%	Comprehensive README with Must/Should/Could features
GitHub Issues	15%	Well-structured issues with acceptance criteria and labels
Figma Design	25%	At least 3 screens, covers main user flow, consistent design
Development	15%	Project scaffolded, deployed, first feature started
Organization	10%	Clear structure, labeled issues, professional presentation

Bonus Challenges