Hackathon season is here and you've volunteered to organize one. Now you need a system to track events, teams, participants, submissions, judges, and scores. You could spend a week building it. Or you could describe it to an AI, paste some JSON, and have a production app running in five minutes.
I chose five minutes. Here's how.
What We're Building
Hackathon HQ — a complete hackathon management platform with six interconnected collections:
- Events — hackathon details, dates, tracks, and banner images
- Participants — hackers with skills, experience level, GitHub handle, and T-shirt size
- Teams — linked to an event, with multi-select member assignment
- Submissions — projects linked to teams and events, with demo URLs, screenshots, and status tracking (Draft through Winner)
- Judges — assigned to events, with expertise areas and bios
- Scores — judges rate submissions on innovation, execution, impact, and presentation
An event's detail page shows its teams, submissions (with "Winners" and "Finalists" filter buttons), and assigned judges. A submission shows all its judge scores. Everything is cross-linked, searchable, and sortable.
Se the above screenshot of the finished hackathon admin dashboard.
The react-admin-dashboard template for Codehooks.io lets you spin up a complete admin panel for any domain — CRM, project management, inventory, ticketing, you name it. Describe your data to an AI, paste the JSON datamodel, and you get a production app with authentication, role-based access, dynamic forms, file uploads, related collections, and auto-generated REST API docs. One JSON file drives the entire stack: React frontend, serverless backend, NoSQL database.
Prerequisites
- Node.js 18+
- A free Codehooks.io account
- Any AI assistant (ChatGPT, Claude, Gemini — they all work)
Step 1: Scaffold the Project (2 minutes)
Install the Codehooks CLI and create a new project from the template:
npm i -g codehooks
coho login
coho create hackathonhq --template react-admin-dashboard
cd hackathonhq
mv config.json backend
Set the JWT secrets (used for authentication):
coho set-env JWT_ACCESS_TOKEN_SECRET $(openssl rand -hex 32)
coho set-env JWT_REFRESH_TOKEN_SECRET $(openssl rand -hex 32)
Install dependencies:
npm run install:all
Update frontend/vite.config.js with your project URL (run coho info to find it):
const BACKEND_URL = 'https://YOUR_PROJECT.api.codehooks.io/dev';
Deploy the template with the default datamodel:
npm run deploy
Get your project URL from your YOUR_PROJECTe.g. hackathonhq-jvel
coho info --projectname hackathonhq-jvel --space dev
In my project I see these endpoints:
API endpoints:
https://serendipitous-canyon-61e2.codehooks.io
https://hackathonhq-jvel.api.codehooks.io/dev
You now have a working admin dashboard at your project syntetic URL (serendipitous-canyon-61e2). Log in with admin / admin.
The name: Project Management is just the default template that is installed when starting a new project.
Step 2: Ask AI to Design Your Hackathon App (1 minute)
This is the magic part.
Open your deployed app, navigate to the Datamodel page (admin only), and click the "Copy Prompt" button. This copies a detailed prompt to your clipboard that describes the entire datamodel format — field types, relationships, validation rules, everything the AI needs to generate valid output.
Now open your favorite AI assistant and paste the prompt. Add your request:
Design a hackathon management system. I need: Events (name, description, status pipeline from Planning to Completed, dates, location, max teams, prizes as markdown, banner image). Participants (name, email, GitHub username, primary skill enum, experience level, photo, t-shirt size). Teams belong to an event with multi-select members from participants, a track enum (Web, Mobile, AI/ML, DevTools, Open Innovation, Social Impact), repo URL, and project description. Submissions belong to an event and team, with project title, description, demo/repo/video URLs, screenshot upload, submitted timestamp, and status (Draft through Winner). Judges belong to an event with expertise area and bio. Scores link a judge to a submission with 1-10 ratings for innovation, execution, impact, presentation, plus a total and notes. Events should show related teams, submissions (with Winner and Finalist filter buttons), and judges. Submissions should show their judge scores. Make the json string easy to copy to clipboard.
The AI returns a complete JSON datamodel. Here's the key part — look at how relationships are defined:
{
"app": {
"title": "Hackathon Management",
"subtitle": "Manage events, participants, teams, submissions, judges and scoring",
"icon": "trophy"},
"collections": {
"events": {
"label": "Events",
"icon": "calendar",
"schema": {
"type": "object",
"required": [
"name",
"status",
"startDate",
"endDate"],
"properties": {
"name": {
"type": "string",
"title": "Event Name",
"minLength": 1
},
"description": {
"type": "string",
"title": "Description",
"format": "textarea"},
"status": {
"type": "string",
"title": "Status",
"enum": [
"Planning",
"Open for Registration",
"In Progress",
"Judging",
"Completed"],
"default": "Planning"},
"startDate": {
"type": "string",
"title": "Start Date",
"format": "date"},
"endDate": {
"type": "string",
"title": "End Date",
"format": "date"},
"location": {
"type": "string",
"title": "Location"},
"maxTeams": {
"type": "integer",
"title": "Max Teams",
"minimum": 1,
"default": 50
},
"prizes": {
"type": "string",
"title": "Prizes (Markdown)",
"format": "textarea"},
"banner": {
"type": "string",
"title": "Banner Image",
"format": "image",
"x-accept": ".jpg,.jpeg,.png,.webp"}
}
},
"listFields": [
"name",
"status",
"startDate",
"endDate",
"location",
"maxTeams"],
"searchFields": [
"name",
"description",
"location"],
"defaultSort": {
"startDate": -1
},
"relatedCollections": [
{
"collection": "teams",
"foreignKey": "event._id",
"title": "Teams",
"displayFields": [
"name",
"track",
"repoUrl"],
"sort": {
"name": 1
},
"allowCreate": true
},
{
"collection": "submissions",
"foreignKey": "event._id",
"title": "Submissions",
"displayFields": [
"projectTitle",
"team",
"status",
"submittedAt"],
"sort": {
"submittedAt": -1
},
"allowCreate": true,
"filters": [
{
"field": "status",
"value": "Finalist",
"label": "Finalists",
"active": false
},
{
"field": "status",
"value": "Winner",
"label": "Winners",
"active": false
}
]
},
{
"collection": "judges",
"foreignKey": "event._id",
"title": "Judges",
"displayFields": [
"name",
"expertiseArea",
"email"],
"sort": {
"name": 1
},
"allowCreate": true
}
]
},
# CLIPPED JSON CONTENT HERE
}
Three things to notice:
-
x-lookupon theeventfield creates a searchable dropdown linking teams to events -
membersas an array withx-lookupcreates a multi-select — search participants by name or email, add multiple to a team -
relatedCollectionswithfilterson the event gives you toggle buttons to show only Winners or Finalists
Switch to the JSON tab in the datamodel editor, paste the AI-generated JSON, and click Save.
That's it. Your hackathon organizer is live. No redeployment. No backend changes. Just JSON.
Step 3: Explore What You Got
Refresh the page. The sidebar now shows six collections — Events, Teams, Participants, Submissions, Judges, Scores — each with its own icon.
Let's walk through what the template auto-generated from that JSON.
Dynamic Forms with Validation
Click "+ New" on Events. You get a full form: text inputs, an enum dropdown for status, date pickers, a markdown textarea for prizes, and an image uploader for the event banner. Required fields are marked, validation runs on save.
Multi-Select Team Members
Open a team form. The Members field lets you search participants (add some here first) by name or email and add multiple people. Each member shows as a tag with their name and primary skill. This comes from defining members as an array with x-lookup — the template handles the rest.
Searchable Lookups
On the submission form, the Event and Team fields are searchable dropdowns. Start typing and it live-searches the target collection. This comes from x-lookup in the schema — zero extra code.
Related Collections with Filters
Open an event's detail page. Below the event details, you see three sections: Teams, Submissions, and Judges. Submissions has toggle buttons for "Winners" and "Finalists" — click one to filter instantly. Each section has a "+ New" button that pre-fills the event reference.
Judge Scores on Submissions
Open a submission. Below the project details, you see Judge Scores — every score entry from every judge, with their individual ratings and totals. This is another relatedCollections definition, and it required zero code to set up.
Activity Log
Every action across all collections is automatically logged. Navigate to the Activity page to see who created which teams, when submissions were updated, and who assigned scores.
Auto-Generated API Documentation
Navigate to https://your-app-url.codehooks.io/docs to get a full Swagger UI with interactive API docs — generated automatically from your datamodel. Every collection has documented CRUD endpoints. Need to build a public submission form or a participant registration page? The API is already there.
Dark Mode
Toggle the theme in the sidebar. Because every hackathon needs a dark mode.
How It Works
The architecture is straightforward: one JSON drives everything.
Your datamodel defines collections, field schemas, relationships, and UI configuration. The backend validates all writes against the schema. The frontend fetches the datamodel at runtime and renders forms, lists, and relationships dynamically.
The datamodel lives in the database — not in a file. The initial datamodel.json seeds the first deployment. After that, every change goes through the visual editor or API, with full version history and one-click rollback. Schema changes never require redeployment.
datamodel.json (seed) ──> Database (versioned)
│
┌─────────┴─────────┐
▼ ▼
Backend Frontend
(validates writes) (renders UI dynamically)
Tech stack: React 18, Tailwind v4, and shadcn/ui on the frontend. Codehooks.io serverless Node.js with a NoSQL datastore on the backend. JWT auth with httpOnly cookie sessions. One command deploys everything.
Ready-Made Examples
The template ships with example datamodels:
| Example | Collections | Highlights |
|---|---|---|
| Hackathon | Events, Teams, Participants, Submissions, Judges, Scores | Multi-lookup, filters, cross-references |
| CRM | Companies, Contacts, Deals, Activities | Lookups, related lists, stage filters |
| Project Management | Members, Projects, Milestones, Tasks | Tree view, multi-lookup teams |
| Product Catalog | Categories, Suppliers, Products, Parts | Nested tree views, bill of materials |
| Product CMS | Pages, Products, Features | Page hierarchy, content management |
Copy any JSON into your datamodel.json, deploy, and you have a working app.
Get Started
The full template is open source:
npm i -g codehooks
coho create myapp --template react-admin-dashboard
Five minutes from now, you could have a production admin dashboard running. No CRUD boilerplate. No auth plumbing. No form builders.
Describe what you need. Let AI write the JSON. Ship it.
What would you build with this? I'm curious what datamodels people come up with. Drop your ideas in the comments.
Top comments (0)