3. Build Your Pages

Run Tasks 4–6 — API Plumbing

Open .kiro/specs/event-manager/tasks.md. Click Run task above Task 4, wait for it to complete, then Task 5, then Task 6. (Or use Run all tasks above the group if you’d rather batch.)

These three tasks build the API layer — the bridge between your pages and your backend:

• Task 4 — TypeScript types and pure validation utilities you can reuse anywhere
• Task 5 — API proxy routes for events (read/create/update/delete)
• Task 6 — API proxy routes for rsvps and the dashboard aggregate query

Nothing visual yet — this is the wiring behind the walls.

Run Task 7 — Auth

Click Run task above Task 7.

Your AI adds login, logout, session check, and a guard that protects organizer-only pages by redirecting signed-out visitors to /login.

Reach Checkpoint 8

Click Run task above Task 8. Kiro verifies that every API route compiles and the auth middleware redirects correctly. Pause here.

Run Tasks 9–11 — The Public Face of Your App

Click Run task above Task 9, then Task 10, then Task 11.

• Task 9 — /login page with email + password
• Task 10 — /events listing of upcoming, published events
• Task 11 — /events/[id] event detail page with the RSVP form below; the form is disabled when the event is full

Run Tasks 12–13 — Organizer Admin

Click Run task above Task 12, then Task 13.

• Task 12 — /organizer/events table where you create, search, sort, and delete events
• Task 13 — /organizer/events/+ create form and /organizer/events/[id] edit form

These pages use Buildpad’s pre-built UI components (CollectionList, CollectionForm) — they read your collection’s field shapes and render the right inputs automatically.

Start Your App

Now there’s something to look at. Open the Terminal tab at the bottom of Kiro and run:

pnpm install && pnpm dev

Press Enter. After a few seconds you’ll see:

▲ Next.js ready on http://localhost:3000

Open http://localhost:3000/login  and sign in with the same email and password you used to create your Buildpad account.

Add a Test Event

Your /events page will be empty until you have something to display. In DaaS Studio, click events → + Create Item and fill in:

• Title: Company Summer Picnic
• Description: Annual team picnic in the park. Food and games provided.
• Date: Pick a date a few weeks from now
• Location: Central Park, Lawn 3
• Max Attendees: 50

Click Save.

Walk Through Your App

1. Visit http://localhost:3000/events  — you should see your test event as a card.

   

2. Click into the event. Submit an RSVP with a test name and email — you’ll see a confirmation.

   

3. Sign in and visit http://localhost:3000/organizer/events . Your event is in the table; try the New Event button or click a row to edit.

   

If anything looks off, describe it to your AI in plain English and ask for a fix — your spec is still the source of truth.