Your All-in-One Hackathon Toolkit

Build. Ship.
Win. Repeat.
⚡ HackKit

100+ curated ideas, production-ready tech stack boilerplates, and pitch deck blueprints used by winning teams. Everything you need from zero to demo.

hackkit-setup.sh
# 🚀 HackKit Quick Start
$ npx create-hackkit-app
✔ Cloning boilerplate...
✔ Installing dependencies...
✔ Setting up auth...
✔ Configuring DB...
$ cd my-hack-project
$ npm run dev
 
┌─────────────────────┐
Ready on localhost:3000
└─────────────────────┘
$
Frontend
92%
Backend
78%
AI / ML
85%
Deployment
95%
Next.js Boilerplate
AI Chat Template
Healthcare Hack Ideas
Pitch Deck Blueprint
Supabase Auth Starter
Winning Demo Tips
EdTech Boilerplate
Fast UI Components
Next.js Boilerplate
AI Chat Template
Healthcare Hack Ideas
Pitch Deck Blueprint
Supabase Auth Starter
Winning Demo Tips
EdTech Boilerplate
Fast UI Components
Hackathon Timer
Team Roles Guide
FinTech Ideas
API Integration Guide
Judging Criteria
Mobile-First Stack
Sustainability Hacks
Deployment Checklist
Hackathon Timer
Team Roles Guide
FinTech Ideas
API Integration Guide
Judging Criteria
Mobile-First Stack
Sustainability Hacks
Deployment Checklist
💡 Idea Bank

100+ Curated Ideas
Across Every Domain

Filter by track, pick your favourite, and start building in minutes. Each idea ships with scope and time estimates.

⚙️ Tech Stack Boilerplates

Ship In Hours,
Not Days.

Pre-configured stacks battle-tested at hackathons. Clone, customise, and launch your MVP before lunch.

Frontend
Next.js 15

App Router, Server Components, streaming. The gold standard for hackathon web apps.

Recommended
🎨
Tailwind CSS + shadcn/ui

Pixel-perfect UI in minutes. Pre-built accessible components, zero design decisions needed.

Fast
🔄
Zustand

Minimal, zero-boilerplate state management. Much faster to set up than Redux in a 24hr hack.

Simple
Backend + Auth + DB
🔥
Supabase

Postgres + Auth + Realtime + Storage in one dashboard. 5-minute setup, no DevOps needed.

Recommended
🚀
Vercel

Push to GitHub → live in 60 seconds. Global CDN, preview URLs, zero config. Judges love it.

Deployment
🔑
Clerk

Drop-in auth with Google, GitHub, Magic Links. Beautiful UI components. 10 min integration.

Auth
setup.sh — Full-Stack Boilerplate
# 1. Clone the boilerplate npx create-next-app@latest my-hack --typescript --tailwind --app cd my-hack # 2. Install essentials npm install @supabase/supabase-js @clerk/nextjs zustand lucide-react npx shadcn@latest init # 3. Set env vars (.env.local) NEXT_PUBLIC_SUPABASE_URL=your_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_key NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_key # 4. Ship it npm run dev # → localhost:3000 ✨
LLM + AI Layer
🧠
OpenAI / Groq API

GPT-4o for quality, Groq for blazing-fast inference. Use llama-3.1-70b free on Groq during hacks.

Recommended
🦜
LangChain.js

Chains, agents, RAG pipelines. Connect LLMs to any data source in under 50 lines.

Agents
🔍
Pinecone / pgvector

Vector search for RAG. Pinecone for external DB; pgvector inside Supabase for simpler setups.

Vector DB
Framework + Streaming
Vercel AI SDK

useChat, useCompletion hooks. Streaming responses with 5 lines of code. Works with any LLM.

Recommended
🐍
FastAPI + Python

If the team prefers Python: FastAPI + uvicorn = async endpoints in minutes. Deploy on Railway.

Python
🎙️
Whisper + ElevenLabs

Voice input + output. Build voice-first AI apps that stand out in demos every time.

Voice
ai-starter.ts — Vercel AI SDK Chatbot
// app/api/chat/route.ts import { openai } from '@ai-sdk/openai'; import { streamText } from 'ai'; export async function POST(req: Request) { const { messages } = await req.json(); const result = await streamText({ model: openai('gpt-4o-mini'), system: 'You are a helpful hackathon assistant.', messages, }); return result.toDataStreamResponse(); } // components/Chat.tsx — 5 lines to a streaming chatbot! const { messages, input, handleSubmit, handleInputChange } = useChat();
Cross-Platform
📱
React Native + Expo

iOS + Android from one codebase. Expo Go lets judges test on their phone without installing anything.

Recommended
🎯
NativeWind

Tailwind CSS syntax for React Native. If you know web, you'll ship mobile UI instantly.

Styling
🗺️
React Navigation v6

Stack, tab, and drawer navigators. The de-facto standard — well-documented, zero surprises.

Navigation
Backend + Services
🔥
Firebase

Firestore + Auth + Cloud Functions. Realtime sync out of the box. Perfect for social or collab apps.

Recommended
📡
Expo Notifications

Push notifications in 30 min. Dramatically improves demo impact — judges love live notifications.

Engagement
📷
Expo Camera + ML Kit

On-device vision APIs. QR scanning, face detection, text recognition — all offline.

Vision
setup.sh — Expo Quickstart
# Create Expo app with TypeScript template npx create-expo-app@latest MyHackApp --template cd MyHackApp # Install navigation + NativeWind npm install @react-navigation/native nativewind tailwindcss npm install firebase @react-native-firebase/app # Start dev server — scan QR with Expo Go app npx expo start # Build for judges (no install needed) eas build --profile preview --platform all
API Framework
🦅
Hono.js

Ultra-fast, edge-ready web framework. Runs on Cloudflare Workers, Bun, Node. Tiny bundle.

Recommended
🐍
FastAPI

Auto-generated OpenAPI docs, Pydantic validation, async out of the box. Best Python choice.

Python
📦
tRPC

End-to-end type safety between Next.js and your backend. Zero API schema duplication.

TypeSafe
Data + Infra
🐘
Neon (Serverless Postgres)

Instant Postgres, generous free tier, branching for testing. No spinning up EC2 instances.

Recommended
🚀
Railway / Render

Connect GitHub, get a URL in 2 minutes. Free tier is enough for a 24–48hr hackathon demo.

Deployment
🔴
Upstash Redis

Serverless Redis for rate limiting, queues, and caching. HTTP SDK — works in any environment.

Caching
index.ts — Hono API starter
import { Hono } from 'hono'; import { cors } from 'hono/cors'; import { neon } from '@neondatabase/serverless'; const app = new Hono(); app.use('/*', cors()); app.get('/api/health', (c) => c.json({ status: 'ok', uptime: process.uptime() })); app.post('/api/submit', async (c) => { const body = await c.req.json(); // → save to Neon, return result return c.json({ success: true, data: body }); }); export default app; // Deploy on Cloudflare Workers in 1 cmd ✨
🎤 Pitch Deck Guide

Winning Pitch Decks
In 6 Slides.

The anatomy of every first-place presentation. Follow this structure and you're already 80% of the way there.

01
💥

The Hook

One sentence that makes judges lean forward

Problem Statement

Open with a stat or story that makes the problem undeniable. Judges hear 50 pitches — you have 10 seconds to earn attention.

Start with "Every day, X people suffer from Y…"
Use one shocking number, not three mediocre ones
Show a relatable human face behind the data
Keep it to 2 sentences max — let the visual breathe
02
🎯

The Solution

Show, don't tell. GIF or live demo beats any diagram.

Your Big Idea

Explain your solution like the judge is 12. Avoid technical jargon. If they can't repeat it to their colleague in 10 seconds, simplify.

Lead with the "wow" — your most impressive feature first
One clear before/after comparison works wonders
Embed a 30-second Loom if you can't live demo
Name your product prominently — make it memorable
03
🔧

How It Works

Architecture in plain English with a clean diagram

Tech & Architecture

Show judges you built something real. A clean architecture diagram with labeled tech icons signals depth without overwhelming non-technical judges.

Use icons (React, OpenAI, Supabase logos) not words alone
Highlight the "special sauce" — your unique technical choice
Mention any APIs or external services integrated
Keep it to max 5 components in the diagram
04
📊

The Impact

Quantify the value you create, even if estimated

Traction & Market

Even in 24hrs you can show something: signups, a user test, quotes from 5 people you interviewed. Judges love data, even small data.

Show market size with a simple TAM/SAM bubble
"We tested with 8 users — 7 said they'd pay for it"
Compare to incumbents and show your advantage
Future roadmap in bullet points — ambition scores points
05
👥

The Team

Why are YOU the people to build this?

Team & Roles

Judges bet on people as much as ideas. Show faces, highlight relevant backgrounds, and demonstrate you have the right blend of skills to execute.

Photos humanise — always include team headshots
Name each person's role: "Full-Stack", "AI/ML", "Design"
Add 1 personal hook: "Used to be a nurse" for HealthTech
Mention any mentors or advisors supporting you
06
🚀

The Ask

End with a clear, confident call to action

Next Steps & Close

Don't trail off. End with a punchy ask and your demo URL visible on screen. Make it trivially easy for judges to explore your project after the room.

Big text: your project URL / QR code front and center
"We're looking for [X] to take this further"
Repeat your tagline — first and last impression matter most
Leave 30 seconds for one killer demo moment at the end
⏱️

Timing is Everything

Practice until you finish 30 seconds early. Rushing = panic = poor impression. Judges almost always cut overtime presenters.

🎬

Demo > Slides

A working demo — even with rough UI — beats a polished deck every time. Build first, beautify second, slide-ify last.

🗣️

Rehearse the Q&A

Write down every hard question and practice answering. "How is this different from X?" and "What's the business model?" are guaranteed.

✅ Launch Checklist

24-Hour Hackathon
Battle Plan

A proven timeline from kickoff to final demo. Check things off as you go.

⚡ Hours 0–3 · Setup
Finalise idea and problem statement as a team
Define MVP scope — cut 60% of features ruthlessly
Assign roles: Frontend / Backend / AI / Design / PM
Clone boilerplate and push to GitHub org repo
Set up project management (Linear / Notion / Trello)
🔨 Hours 3–16 · Build
Core feature #1 working end-to-end
Core feature #2 working end-to-end
Database schema finalized and seeded with test data
Auth flow (sign up / login) working correctly
Deployed to production URL (Vercel / Railway)
✨ Hours 16–22 · Polish
UI polished — consistent spacing, readable fonts
Mobile responsive layout checked on real device
Error states handled (empty states, loading spinners)
Demo data seeded so judges see a rich experience
🎤 Hours 22–24 · Pitch
6-slide deck complete with screenshots / GIFs
Full run-through rehearsed ≥ 2 times as a team
GitHub README updated with setup instructions
Demo script written — every click planned in advance
Backup video recorded in case live demo fails
☐ 0 / 19 tasks completed — keep going!

⏱ Hack Timer

Set your hackathon countdown and stay on track.

24
Hours
:
00
Mins
:
00
Secs
✦ Ready to Build?

Your winning project
starts right now.

Pick an idea, grab a boilerplate, and build something the judges will never forget. The only resource you truly need is momentum.

Free forever · No sign-up required · Built for hackers, by hackers