The Idea
Fantasy Premier League has 11 million players. The official app gives you a wall of numbers and leaves you to interpret them. I wanted something that felt easier to use; squad management, player transfers, a credit economy, and leaderboards, with a clean mobile-first UI on top of AWS infrastructure.
The H0: Hack the zero Stack with Vercel v0 and AWS Database gave me a deadline to actually ship it.
The Two-Tool Workflow
I split the work between two AI tools and it worked better than I expected:
v0 by Vercel handled the frontend. I described pages and components in natural language and v0 generated production-ready Next.js 16 code with Tailwind CSS and shadcn/ui. The squad builder pitch visualization, dashboard layout, transfer history cards, and responsive mobile nav all came from v0. It nailed the App Router file conventions and Tailwind utility classes without hand-holding.
Kiro handled the backend and orchestration. I used Kiro's spec-driven workflow: Requirements → Design → Tasks. Once the spec was locked, Kiro executed all 32 implementation tasks autonomously; API routes, auth middleware, DynamoDB operations, credit logic, transfer validation.
Architecture: Deliberately Simple
Browser → Vercel (Next.js API Routes) → DynamoDB (via AWS SDK)
No API Gateway, No Lambda in the request path. Next.js API routes call DynamoDB directly using @aws-sdk/lib-dynamodb with IAM credentials injected as Vercel environment variables.
Auth is AWS Cognito. The JWT lives in an httpOnly secure cookie called squadiq-token. Middleware validates presence; API routes decode the sub claim for the userId.
Lambda only exists for background work:
- Player Sync - daily cron that pulls data from the FPL API into DynamoDB
- Scoring Engine - EventBridge trigger after match completion
The DynamoDB Single-Table Design
Everything lives in one table (SquadIQ-dev) with composite keys:
| PK | SK | Entity |
|---|---|---|
USER#<id> |
PROFILE |
User profile |
USER#<id> |
SQUAD#<competitionId> |
Squad |
USER#<id> |
TRANSFER#<ts> |
Transfer record |
USER#<id> |
CREDIT#<ts> |
Credit transaction |
LEAGUE#<id> |
META |
League metadata |
PLAYER#<id> |
META |
Player data |
This means every query is a single GetItem or Query on the partition key. No scans, no joins.
What Kiro's Spec Workflow Actually Looks Like
- Write requirements (user stories + acceptance criteria)
- Generate a technical design (data model, API contracts, auth flow)
- Generate implementation tasks from the design
- Run all tasks; Kiro writes the code, runs type checks, iterates on errors
The spec files live in .kiro/specs/squadiq-live-features/ and serve as living documentation. When I needed to add a new endpoint, I updated the spec and Kiro knew exactly what to implement.
What v0 Did Well
v0 is remarkable at generating complete, styled, accessible React components from descriptions. Things that normally take an hour of fiddling with CSS grid took one prompt:
- "Dashboard with a small pitch on the left and stat cards stacked vertically on the right"
- "Squad builder with a football pitch background showing players in formation positions"
- "Transfer history page with a hero banner and card list"
It understood Tailwind responsive modifiers (md:, lg:), shadcn/ui component patterns, and Next.js Image optimization out of the box.
Lessons Learned
Spec-first saves time. 30 minutes on requirements prevented hours of rework. When you define the API response shape before writing code, frontend and backend stay aligned.
You don't need Lambda for everything. Next.js API routes with IAM credentials are fast, cheap, and way simpler to debug than a Lambda + API Gateway stack.
DynamoDB single-table design is worth the upfront cost. Once your access patterns are clear, queries are trivial and fast. The hard part is resisting the urge to add a second table "just in case."
AI tools work best with clear boundaries. v0 for UI, Kiro for backend + orchestration. Letting each tool do what it's best at produced better results than asking one tool to do everything.
The Stack
- Next.js 16, React 19, TypeScript
- Tailwind CSS + shadcn/ui
- AWS Cognito, DynamoDB, IAM, Lambda (background)
- Vercel (hosting + serverless)
- Kiro (spec-driven development)
- v0 (frontend generation)
- GitHub Actions (CI/CD)
Links
- GitHub: github.com/gtogbes/SquadIQ
- API Docs: swagger.yaml
- Architecture: ARCHITECTURE.md