A modern, animated workshop platform built for hackathon-style AI workshops. Participants log in individually, form their own teams, submit projects, get AI-powered guidance, and showcase their work — all from one beautiful dashboard.
| Feature | Description |
|---|---|
| 🔐 Individual Auth | JWT login via User ID or Email, rate-limited (5 attempts/15min), HTTP-only cookies |
| 👥 Self-Service Teams | Participants create teams from the dashboard (team name, members, domain) |
| 📊 Dashboard | Countdown timer, progress tracker, team creation, project submission with confetti |
| 🌍 Project Showcase | Public grid with domain filters, search, hover animations & student submission form |
| 🤖 AI Chatbot | Floating assistant with OpenAI integration + built-in fallback guides for GitHub & Vercel deployment |
| 🖼️ Gallery | Masonry layout with lightbox, video model & admin upload/approval system |
| 📋 Attendance | Admin CRUD with first/second half toggles & CSV export |
| 📈 Reports | Upload & manage event materials (PDFs, images, presentations) with category filtering |
| 🛠️ Admin Panel | Manage participants (with email), toggle submissions, animated settings cards |
| 🎓 Certificates | Admin-issued certificates (name, ID, type) with PDF generation & QR code |
| ❓ FAQ | Smooth accordion section powered by Radix UI |
- White / Light theme with soft glassmorphism
- Smooth page transitions & micro-interactions
- Animated counters & floating particle effects
- Glow hover buttons & scroll reveal animations
- Premium AI startup aesthetic
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI Library | React 19 |
| Styling | Tailwind CSS 4 + Custom CSS |
| Animations | Framer Motion |
| Database | MongoDB via Mongoose (optional — falls back to in-memory store) |
| Auth | JWT (jose + jsonwebtoken) + bcryptjs |
| AI | OpenAI API (optional — built-in fallback responses) |
| jsPDF + QRCode | |
| CSV | PapaParse |
| UI Components | Radix UI (Accordion, Dialog) |
| Icons | Lucide React |
| Effects | React Confetti |
npm installCopy the example file and edit as needed:
cp .env.local.example .env.local| Variable | Required | Description |
|---|---|---|
JWT_SECRET |
✅ | Secret key for JWT tokens |
MONGODB_URI |
❌ | MongoDB connection string (app works without it) |
OPENAI_API_KEY |
❌ | OpenAI key for chatbot (has built-in fallback) |
NEXT_PUBLIC_APP_URL |
❌ | App URL, defaults to http://localhost:3000 |
npm run devOpen http://localhost:3000 🎉
npm run build
npm start| Admin ID | Role |
|---|---|
DMP001 |
Prof. Dhara M Patel (Coordinator) |
25EC080 |
Student Coordinator |
25EC112 |
Student Coordinator |
- Auto-seeded on first MongoDB connection (default password:
temppass2024) - First login prompts for password change
- Can add participants (User ID, Password, Name, Email), edit, delete, and reset passwords
- Created only by admins — no self-registration
- Log in with User ID or Email + password
- Create a team from the Dashboard: enter team name, domain, and add teammates
- Submit projects with GitHub links, live demos, and tech stack details
- Change password (requires old password, min 8 chars)
- 🔒 JWT stored in HTTP-only secure cookies
- 🔒 bcrypt password hashing (10 salt rounds)
- 🔒 Rate limiting: 5 login attempts per IP per 15 minutes
- 🔒 Minimum password length: 8 characters
- 🔒 No public registration API
- 🔒 Middleware route protection for
/adminand/dashboard
Note: Without MongoDB, data is stored in-memory with file-based persistence (
.data/store.json). Full data persists across server restarts locally.
├── app/
│ ├── page.js # Landing page
│ ├── layout.js # Root layout with Navbar, Footer, ChatBot
│ ├── globals.css # Global styles & design tokens
│ ├── login/ # Authentication page
│ ├── dashboard/ # Participant dashboard, team creation & project submission
│ ├── showcase/ # Public project showcase + student submissions
│ ├── gallery/ # Media gallery with admin approval
│ ├── certificates/ # Certificate viewer & PDF generation
│ ├── faq/ # FAQ accordion section
│ ├── admin/
│ │ ├── page.js # Admin panel — manage participants
│ │ ├── attendance/ # Attendance tracking
│ │ └── reports/ # Reports & materials management
│ └── api/
│ ├── auth/ # Login, set-password, change-password, verify, logout
│ ├── projects/ # Project CRUD
│ ├── teams/ # Participant team creation & management
│ ├── attendance/ # Attendance CRUD
│ ├── gallery/ # Gallery upload & approval
│ ├── certificates/ # Certificate issuance
│ ├── reports/ # Reports management
│ ├── chat/ # AI chatbot endpoint
│ ├── admin/ # Participant management, create-user, reset-password & settings
│ └── stats/ # Workshop statistics
├── components/
│ ├── Navbar.js # Navigation bar
│ ├── Footer.js # Site footer
│ ├── ChatBot.js # Floating AI chatbot
│ ├── ParticleBackground.js # Animated particle effects
│ └── UIComponents.js # Reusable UI primitives
├── lib/
│ ├── db.js # MongoDB connection
│ ├── tryDb.js # DB connection attempt wrapper
│ ├── auth.js # JWT verification utilities
│ ├── AuthContext.js # React auth context provider
│ ├── memoryStore.js # In-memory fallback data store
│ └── models/
│ ├── User.js # User account schema (admins + participants)
│ ├── Team.js # User-created team schema
│ ├── Project.js # Project submission schema
│ ├── Attendance.js # Attendance record schema
│ ├── Gallery.js # Gallery item schema
│ └── Settings.js # Workshop settings schema
├── middleware.js # Route protection & JWT verification
└── public/ # Static assets
-
MongoDB Atlas (free): Create a cluster at mongodb.com/atlas
- Create a database user
- Set Network Access to
0.0.0.0/0(Allow All) - Copy connection string
-
GitHub: Push your code
git add . && git commit -m "deploy" && git push origin main
-
Vercel: Import repo at vercel.com and add environment variables:
Variable Value MONGODB_URImongodb+srv://user:pass@cluster.mongodb.net/vibebuildJWT_SECRETAny secure random string OPENAI_API_KEY(Optional) OpenAI API key for chatbot -
Deploy — admin accounts auto-seed on first connection
npm run build
npm startWithout MongoDB, data persists locally via .data/store.json.
MIT