A Next.js (App Router) implementation of techtankto.com, Toronto's volunteer-run tech community website. The redesign moves away from a flat "link-tree" layout toward a conversion-oriented onboarding hub that funnels visitors into specific roles — attendee, speaker, host, sponsor, or organizer.
Specs live in prd/; application code lives in app/.
The initial UI scaffold was generated from the PRD via v0 —
original prompt and generation.
- Next.js 16 (App Router, Turbopack)
- React 19 + TypeScript
- Tailwind CSS 4
- shadcn/ui component pattern (
components.jsonconfig) - class-variance-authority (CVA) for type-safe component variants
- Radix UI primitives (via
@radix-ui/react-slot) - lucide-react for icons
- Inter + Space Grotesk via
next/font - pnpm 10 for package management
Requirements: Node.js 20+ and pnpm 10.
pnpm install
pnpm devThen open http://localhost:3000.
| Command | What it does |
|---|---|
pnpm dev |
Start the dev server with Turbopack |
pnpm build |
Production build |
pnpm start |
Serve the production build |
pnpm lint |
Run Next.js' linter |
pnpm format |
Format the repo with oxfmt |
pnpm format:check |
Check formatting without writing |
The tree below doubles as a route map — each directory under app/ is a
route, annotated with its purpose.
.
├── app/ # Next.js App Router routes
│ ├── layout.tsx # Root layout (header, footer, fonts, SEO)
│ ├── page.tsx # / Social-proof-driven home
│ ├── about/ # /about Values & community manifesto
│ ├── events/ # /events Upcoming (Luma) + past event timeline
│ ├── get-involved/ # /get-involved Onboarding hub (shared layout)
│ │ ├── speak-or-facilitate/ # /speak-or-facilitate Speaker/facilitator intake
│ │ ├── host/ # /host Host intake
│ │ ├── sponsor/ # /sponsor Sponsor intake
│ │ └── organizer/ # /organizer Organizer intake
│ ├── legal/ # /legal Legal documents (shared layout)
│ │ ├── terms-of-service/ # /terms-of-service
│ │ ├── privacy-policy/ # /privacy-policy
│ │ └── code-of-conduct/ # /code-of-conduct
│ ├── resources/ # /resources
│ │ ├── media-kit/ # /resources/media-kit Brand assets + fast facts
│ │ └── design-system/ # /resources/design-system Brand guidelines — design tokens & component reference
│ └── globals.css
├── components/
│ ├── layout/ # Header, Footer
│ └── ui/ # Reusable UI (buttons, cards, sections, etc.)
├── constants/ # Structured data (events, sponsors, social links)
├── prd/ # Product requirements documents (specs)
├── public/ # Static assets (images, downloads, social media dumps)
├── next.config.ts
├── vercel.json # Vercel deployment config (noindex header)
└── tsconfig.json
See prd/PRD.md for the full route map, shared-layout
conventions, and per-page content requirements.
The site deploys to Vercel. Search engine indexing is
enabled site-wide via the robots metadata in
app/layout.tsx.
See CONTRIBUTING.md for contribution guidelines.
- Read
prd/PRD.mdbefore making structural changes — it defines the Info Architecture, brand, and content conventions.- AI agents only: also read
AGENTS.mdfor agent-specific working conventions and constraints. (CLAUDE.mdis a stub that includes it.)
- AI agents only: also read
- When adding or renaming a route, update both the route table in
prd/PRD.md§2.1 and the corresponding spec inprd/pages/. - Keep one dominant CTA per page. Role pages under
/get-involved/*must end in an intake action (email us).
This redesign was built by TechTank TO volunteers who gave their time to a community they believe in. Thank you to everyone who shipped it 💙
- Tony Ko
- Rohan Villoth
- Justin Bento
- Jacky
- John Malapit
- Danyal Imran
- Niki Fereidooni
- Danny Kim
- Batstone Christyanton
- Miller Gonzalez
- Taehyeon Kim
- Jyle Vergara
And a heartfelt thank you to everyone who built and stewarded earlier versions of techtankto.com. This redesign stands on the foundation, inspiration, and lessons you left behind.
MIT — see the file for details.