Install Development Tools

Before building your web app, you need the following tools ready:

• Antigravity — Your AI-powered coding environment (runs in the browser)
• A GitHub account — Created in Day 1

Step 1: Open Antigravity

Open your browser (Chrome recommended) and navigate to the Antigravity URL provided by your teacher. Sign in to your account.

Step 2: Create Your Project

In Antigravity, create a new project called study-planner. Select Next.js as the project template if prompted.

Step 3: Verify Setup

You should see the editor on the left, the live preview on the right, and the AI chat available. The project should already be running — you will see a welcome page in the preview.

Create Next.js Project

Next.js is a React-based framework that makes it easy to build web applications. You will use it to create the StudyPlanner app.

Step 1: Create the Project

In your terminal, run the following command to scaffold a new Next.js project with all the recommended options:

npx create-next-app@latest study-planner \
  --typescript --tailwind --app --src-dir \
  --import-alias "@/*"

This creates a new folder called study-planner with everything set up: TypeScript for type safety, Tailwind CSS for styling, and the App Router for modern routing.

Step 2: Start the Development Server

Enter the project folder and start the server:

cd study-planner
npm run dev

Open your browser and navigate to http://localhost:3000 to see the default Next.js welcome page.

Push to GitHub

Push your project to GitHub so your code is backed up and ready for deployment later.

Step 1: Initialize and Push

If you already created a study-planner repository in Day 1, use that one. Otherwise, create a new repo at github.com/new.

Then run the following commands in your project folder:

git init
git remote add origin https://github.com/YOUR-USERNAME/study-planner.git
git add .
git commit -m "Initial Next.js setup"
git branch -M main
git push -u origin main

Step 2: Verify on GitHub

Open your repository page on GitHub. You should see your package.json and the src/ folder listed in the file tree.

Build Pages with Antigravity

Use Antigravity to generate two pages for your StudyPlanner app: a homepage and a task list page.

Step 4a: Create the Homepage

In the Antigravity AI chat bar, type the following prompt:

This is a student task planner app. Create a homepage
at src/app/page.tsx with a welcome message, a brief
description, and a navigation link to /tasks.
Use Tailwind CSS for modern styling.

Review the generated code, then check your browser. The page updates automatically!

Step 4b: Create the Task List Page

Still in Antigravity, use the following prompt:

Create a task list page at src/app/tasks/page.tsx that
displays a list of sample tasks with title, due date,
and completion status. Use card-based layout with
Tailwind CSS.

What to Verify

• Both pages load in your browser (/ and /tasks)
• The navigation link on the homepage takes you to the task list
• Task cards display correctly with title, due date, and status

Create JSON Database

Instead of hardcoding tasks in the page, you will store them in a JSON file and create API routes to read and write data. This separates your data from your UI.

Step 1: Create the Data File

Create a folder called data at the root of your project, then create a file data/tasks.json with sample tasks:

{
  "tasks": [
    {
      "id": 1,
      "title": "Study for math exam",
      "dueDate": "2026-03-20",
      "subject": "Mathematics",
      "priority": "high",
      "completed": false
    },
    {
      "id": 2,
      "title": "Read chapter 5",
      "dueDate": "2026-03-18",
      "subject": "Literature",
      "priority": "medium",
      "completed": true
    },
    {
      "id": 3,
      "title": "Prepare presentation slides",
      "dueDate": "2026-03-22",
      "subject": "History",
      "priority": "low",
      "completed": false
    }
  ]
}

Step 2: Create the API Route

Use Antigravity to generate the API route that reads and writes to this JSON file:

Create an API route at src/app/api/tasks/route.ts that:
- GET: reads data/tasks.json and returns all tasks
- POST: adds a new task to the JSON file
Use the fs module to read and write the file.

The generated code should look something like this:

import { readFileSync, writeFileSync } from 'fs';
import { NextResponse } from 'next/server';
import path from 'path';

const filePath = path.join(process.cwd(), 'data', 'tasks.json');

export async function GET() {
  const data = JSON.parse(readFileSync(filePath, 'utf-8'));
  return NextResponse.json(data.tasks);
}

export async function POST(request: Request) {
  const data = JSON.parse(readFileSync(filePath, 'utf-8'));
  const newTask = await request.json();
  newTask.id = data.tasks.length + 1;
  data.tasks.push(newTask);
  writeFileSync(filePath, JSON.stringify(data, null, 2));
  return NextResponse.json(newTask, { status: 201 });
}

Step 3: Connect the Frontend

Ask Antigravity to update the task list page to fetch data from the API instead of using hardcoded values:

Update src/app/tasks/page.tsx to fetch tasks from
/api/tasks instead of using hardcoded data. Show a
loading state while fetching.

Test Your API

Verify the connection is working:

1. Open http://localhost:3000/tasks — you should see the tasks from your JSON file
2. Edit data/tasks.json manually (change a task title)
3. Reload the page — you should see the updated title

Task Creation Form

Create a form that lets users add new tasks through the browser. The form will submit data to the API route you created in Exercise 5.

Step 1: Create the Form Page

Use Antigravity to generate the form:

Create a form at src/app/tasks/new/page.tsx with:
- Title (required text input)
- Due date (date picker)
- Subject (text input)
- Priority (select: low/medium/high)
On submit: POST to /api/tasks, then redirect to /tasks.
Use Tailwind CSS for styling.

Step 2: Add Navigation

Ask Antigravity to add navigation links so users can move between pages easily:

Add a shared navigation bar in src/app/layout.tsx with
links to Home (/), Tasks (/tasks), and New Task
(/tasks/new). Also add a "New Task" button on the
task list page that links to the form.

Test the Full Flow

Your app should now have this structure:

• / — Homepage with welcome message
• /tasks — Task list loaded from JSON
• /tasks/new — Form to create new tasks
• Navigation bar on every page

Test the complete flow:

1. Navigate to /tasks/new
2. Fill in the form and submit
3. You should be redirected to /tasks
4. Your new task should appear in the list

Deploy to Vercel

Vercel is the company behind Next.js, and their platform is the easiest way to deploy a Next.js app. Your app will be live on the internet in minutes.

Step 1: Sign Up and Import

1. Go to vercel.com and sign up with your GitHub account
2. Click "Import Project"
3. Select your study-planner repository
4. Click Deploy (the default settings work perfectly for Next.js)
5. Wait for the build to complete (~1-2 minutes)

Step 2: Verify Deployment

Once the build finishes, Vercel gives you a public URL like:

https://study-planner-abc123.vercel.app

Open this URL in your browser and verify that your app works.

Step 3: Auto-Deploy

Every git push now triggers a new deployment automatically. Try it:

git add .
git commit -m "Update homepage styling"
git push

Watch the Vercel dashboard — a new deployment starts within seconds!

Polish & Extra Features

Choose one additional feature from the list below and implement it with Antigravity. Then close your corresponding GitHub issues.

Choose a Feature

Pick one of the following features to implement:

• Mark Complete Toggle — Click a checkbox to toggle a task's completion status (requires a PATCH or PUT API route)
• Delete Task — Add a delete button on each task card with a confirmation dialog (requires a DELETE API route)
• Filter by Subject — Add a dropdown above the task list to show only tasks from a selected subject
• Sort by Date — Add a button to sort tasks by due date, nearest first

Describe your chosen feature clearly to Antigravity. For example:

Add a "Mark Complete" toggle to each task card on the
task list page. When clicked, it should send a PATCH
request to update the task's completed status in the
JSON file. Show completed tasks with a strikethrough
style.

Close GitHub Issues

For each completed feature:

1. Go to your repository on GitHub
2. Open the corresponding issue you created in Day 1
3. Add a comment explaining what was implemented
4. Click "Close issue"

Final Push

Commit and push all your changes:

git add .
git commit -m "Add task completion toggle and polish UI"
git push

Vercel will automatically deploy your latest version.

Summary & Deliverables

Deliverables

Submit the following to your teacher:

Evaluation Criteria

Criterion	Weight	Description
Development Setup	10%	Tools installed, project running locally
Application Pages	25%	At least 3 functional pages with navigation
Data Management	25%	JSON database with API routes, read and write working
Deployment	20%	Successfully deployed to Vercel with a live URL
GitHub Workflow	10%	Code pushed, issues closed with comments
Code Quality	10%	Clean code, proper structure, no console errors

Bonus Challenges

Resources

• Next.js Documentation
• Tailwind CSS Documentation
• Vercel Deployment Documentation
• GitHub Issues Guide