Event Details & Registration System (Production Ready)

This is the most important page of the platform.

Every conversion happens here:

```txt
Visitor
 ↓
Views Event
 ↓
Reads Details
 ↓
Creates Team
 ↓
Registers
 ↓
Submits Project
 ↓
Gets Evaluated
 ↓
Wins / Gets Hired
```

Inspired by:

* [[Devfolio](https://devfolio.co/?utm_source=chatgpt.com)](https://devfolio.co?utm_source=chatgpt.com)
* [[Devpost](https://devpost.com/?utm_source=chatgpt.com)](https://devpost.com?utm_source=chatgpt.com)
* [[Hack2Skill](https://hack2skill.com/?utm_source=chatgpt.com)](https://hack2skill.com?utm_source=chatgpt.com)
* [[Unstop](https://unstop.com/?utm_source=chatgpt.com)](https://unstop.com?utm_source=chatgpt.com)

---

# Business Goals

### User Goals

* Understand event quickly
* Register easily
* Create team
* Submit project
* Track progress

### Platform Goals

* Maximize registrations
* Improve conversion rate
* Increase participation
* Improve retention

---

# URL Structure

```txt
/events/:slug
```

Examples:

```txt
/events/ai-hackathon-2026
/events/web3-builder-challenge
/events/google-cloud-bootcamp
```

SEO Friendly:

```txt
Title
Meta Description
OpenGraph
Twitter Cards
Structured Data
```

---

# Page Layout

```txt
------------------------------------------------
Hero Section
------------------------------------------------
Quick Stats
------------------------------------------------
Register CTA
------------------------------------------------
About Event
------------------------------------------------
Tracks & Themes
------------------------------------------------
Prizes
------------------------------------------------
Timeline
------------------------------------------------
Sponsors
------------------------------------------------
Judges
------------------------------------------------
Mentors
------------------------------------------------
Rules
------------------------------------------------
Resources
------------------------------------------------
FAQs
------------------------------------------------
Discussion Board
------------------------------------------------
Participants
------------------------------------------------
Footer
------------------------------------------------
```

---

# Hero Section

Display:

```txt
Event Banner
Event Logo
Event Name
Organizer
Mode
Location
Registration Deadline
Event Dates
Prize Pool
Participants Count
```

Actions:

```txt
Register
Bookmark
Share
Join Discord
Visit Website
```

---

# Event Status Engine

## Draft

```txt
Not Public
```

---

## Upcoming

```txt
Registration Open
```

---

## Registration Closing Soon

```txt
Less than 48 Hours
```

---

## Live

```txt
Event Started
```

---

## Submission Open

```txt
Project Submission Active
```

---

## Judging

```txt
Evaluation Running
```

---

## Completed

```txt
Event Finished
```

---

# Quick Stats Section

Display:

```txt
Prize Pool
Participants
Teams
Tracks
Mentors
Judges
```

Example:

```txt
₹5,00,000 Prize Pool
2500 Participants
600 Teams
```

---

# Registration CTA

Sticky section.

Display:

```txt
Registration Status
Seats Remaining
Deadline Countdown
```

Buttons:

```txt
Register Now
Create Team
Join Team
```

---

# About Event Section

Supports:

```txt
Rich Text
Markdown
Images
Videos
Embeds
```

Content:

```txt
Problem Statement
Event Objective
Organizer Message
Expected Outcomes
```

---

# Tracks & Themes

Example:

```txt
AI & ML
Web3
FinTech
HealthTech
EdTech
Open Innovation
```

Each Track:

```ts
{
  title: string;
  description: string;
  icon: string;
}
```

---

# Prize Section

Display:

```txt
Winner
Runner Up
Second Runner Up
Track Winners
Special Awards
```

Example:

```txt
Winner - ₹100,000
Runner Up - ₹50,000
Best AI Project - ₹25,000
```

---

# Timeline Section

Critical feature.

Display:

```txt
Registration Opens
Registration Closes
Team Formation Ends
Hackathon Starts
Submission Opens
Submission Closes
Judging
Winner Announcement
```

Schema:

```ts
{
  title: string;
  date: Date;
  description: string;
}
```

---

# Team Formation System

## Create Team

Fields:

```txt
Team Name
Team Description
Invite Members
```

Rules:

```txt
Minimum Team Size
Maximum Team Size
```

Example:

```txt
Min 1
Max 4
```

---

## Join Team

Methods:

```txt
Invite Link
Join Request
Team Code
```

---

## Team Dashboard

Display:

```txt
Team Members
Pending Requests
Project Status
Submission Status
```

---

# Participant Registration

## Registration Form Builder

Admin Configurable Fields:

```txt
Name
Email
Phone
College
Company
Experience
Resume
GitHub
LinkedIn
Custom Questions
```

---

## Custom Questions

Types:

```txt
Text
Textarea
Dropdown
Radio
Checkbox
File Upload
```

Example:

```txt
Why do you want to join?
```

---

# Participant Dashboard

After Registration:

Display:

```txt
Registration Status
Team Status
Project Status
Certificates
Announcements
```

---

# Judges Section

Display:

```txt
Photo
Name
Role
Company
Bio
LinkedIn
```

Schema:

```ts
{
  id: string;
  name: string;
  role: string;
  company: string;
  image: string;
}
```

---

# Mentors Section

Display:

```txt
Photo
Name
Specialization
Availability
```

---

# Sponsors Section

Sponsor Tiers:

```txt
Title Sponsor
Gold Sponsor
Silver Sponsor
Community Partner
Hiring Partner
```

Display:

```txt
Logo
Website
Description
```

---

# Resources Section

Provide:

```txt
Rulebook PDF
Problem Statements
Starter Kits
Documentation
API Keys
Workshop Recordings
```

---

# FAQ Section

Example:

```txt
Who can participate?
Is there a registration fee?
Can I participate solo?
What is the team size?
```

---

# Discussion Board

Features:

```txt
Create Post
Reply
Mention Users
Pin Post
Moderation
```

Types:

```txt
Question
Announcement
Discussion
Bug Report
```

---

# Announcements System

Organizers can publish:

```txt
Schedule Changes
Important Updates
Deadline Extensions
```

Notification Channels:

```txt
Email
Push
In-App
```

---

# Participants Section

Public Display:

```txt
Total Participants
Teams Count
Colleges Represented
Countries Represented
```

Optional:

```txt
Public Participant List
```

---

# Bookmark System

Users Can:

```txt
Save Event
View Later
Receive Updates
```

---

# Share System

Support:

```txt
LinkedIn
X
WhatsApp
Telegram
Copy Link
```

Track:

```txt
Share Count
Traffic Source
```

---

# Event Analytics

Track:

```txt
Views
Unique Visitors
Registrations
Conversion Rate
Bookmarks
Shares
Team Creation
```

---

# Database Schema

## Event

```ts
{
  id: string;
  title: string;
  slug: string;
  description: string;
  bannerUrl: string;

  registrationStart: Date;
  registrationEnd: Date;

  eventStart: Date;
  eventEnd: Date;

  prizePool: number;

  status: string;

  organizerId: string;
}
```

---

## Registration

```ts
{
  id: string;
  userId: string;
  eventId: string;

  status: string;

  registeredAt: Date;
}
```

---

## Team

```ts
{
  id: string;

  eventId: string;

  name: string;

  leaderId: string;

  maxMembers: number;
}
```

---

## Team Member

```ts
{
  teamId: string;
  userId: string;
}
```

---

## Timeline

```ts
{
  eventId: string;
  title: string;
  date: Date;
}
```

---

# API Endpoints

## Get Event

```http
GET /api/events/:slug
```

---

## Register Event

```http
POST /api/events/:id/register
```

---

## Create Team

```http
POST /api/events/:id/team
```

---

## Join Team

```http
POST /api/team/:id/join
```

---

## Bookmark Event

```http
POST /api/events/:id/bookmark
```

---

## Submit Discussion

```http
POST /api/events/:id/discussion
```

---

# Frontend Components

```txt
EventHero
EventStats
EventTimeline
PrizeSection
TrackSection
RegistrationCTA
TeamCreator
JudgesSection
MentorsSection
SponsorsSection
FAQAccordion
DiscussionBoard
AnnouncementFeed
```

---

# Security

Protect:

```txt
Spam Registrations
Bot Accounts
Fake Teams
Abusive Discussions
```

Implement:

```txt
Rate Limiting
RBAC
CAPTCHA
Audit Logs
```

---

# Performance Requirements

```txt
Page Load < 2 Seconds
API < 200ms
Discussion Realtime < 500ms
```

---

# Mobile Requirements

Must Support:

```txt
Sticky Register Button
Mobile Timeline
Touch Friendly Forms
Responsive Team Management
```

---

# Tech Stack

### Frontend

* Next.js 15
* TypeScript
* Tailwind CSS
* ShadCN UI
* TanStack Query

### Backend

* NestJS
* PostgreSQL
* Prisma
* Redis

### Realtime

* Socket.IO

### Storage

* [[AWS S3](https://aws.amazon.com/s3/?utm_source=chatgpt.com)](https://aws.amazon.com/s3/?utm_source=chatgpt.com)

### Analytics

* [[PostHog](https://posthog.com/?utm_source=chatgpt.com)](https://posthog.com?utm_source=chatgpt.com)

---

# Acceptance Criteria

✅ Event details render correctly
✅ Registration works
✅ Team creation works
✅ Team joining works
✅ Timeline works
✅ Judges section works
✅ Mentors section works
✅ Sponsors section works
✅ FAQ works
✅ Resources work
✅ Discussion board works
✅ Announcements work
✅ Analytics tracked
✅ Mobile responsive
✅ SEO optimized
✅ Production ready



Uh oh!

Event Details & Registration System (Production Ready) #16

Description

Business Goals

User Goals

Platform Goals

URL Structure

Page Layout

Hero Section

Event Status Engine

Draft

Upcoming

Registration Closing Soon

Live

Submission Open

Judging

Completed

Quick Stats Section

Registration CTA

About Event Section

Tracks & Themes

Prize Section

Timeline Section

Team Formation System

Create Team

Join Team

Team Dashboard

Participant Registration

Registration Form Builder

Custom Questions

Participant Dashboard

Judges Section

Mentors Section

Sponsors Section

Resources Section

FAQ Section

Discussion Board

Announcements System

Participants Section

Bookmark System

Share System

Event Analytics

Database Schema

Event

Registration

Team

Team Member

Timeline

API Endpoints

Get Event

Register Event

Create Team

Join Team

Bookmark Event

Submit Discussion

Frontend Components

Security

Performance Requirements

Mobile Requirements

Tech Stack

Frontend

Backend

Realtime

Storage

Analytics

Acceptance Criteria

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions