Skip to content

QUICKSTART_FEST_SYSTEM.md

Latest commit

 

History

History
317 lines (252 loc) · 8.58 KB

QUICKSTART_FEST_SYSTEM.md

File metadata and controls

317 lines (252 loc) · 8.58 KB
Raw

🚀 Quick Start: Fest Creation & Registration System

✅ What's Been Implemented

Your Festify platform now has a complete Fest Creation and Dynamic Registration system!

New Features:

  1. ✅ Multi-Step Fest Creation Wizard (4 steps)
  2. ✅ Banner Upload (ImageBB + Custom URL)
  3. ✅ Visual Form Builder with 10 field types
  4. ✅ Dynamic Registration Forms for students
  5. ✅ Validation (frontend + field-level)
  6. ✅ Prefill User Data option
  7. ✅ Duplicate Registration Prevention
  8. ✅ Backwards Compatibility (venue/location fields)

📝 Quick Setup Steps

1. Get ImageBB API Key (5 minutes)

Required for banner uploads to work:

  1. Go to https://imgbb.com/
  2. Sign up / Log in
  3. Go to Profile → API
  4. Copy your API key
  5. Open src/pages/CreateFest.jsx
  6. Find line 62: const response = await fetch('https://api.imgbb.com/1/upload?key=YOUR_IMGBB_API_KEY'
  7. Replace YOUR_IMGBB_API_KEY with your actual key

Note: Organizers can still use custom image URLs without setting up ImageBB!

📖 Full ImageBB Setup Guide

2. Test Organizer Flow

  1. Login as Organizer

    • Go to /login
    • Login with an organizer account
    • Or create new account → verify email → select "Organizer" role

  2. Create a Fest

    • Navigate to Create Fest page
    • Step 1: Fill basic details (name, college, date, venue, category, description)
    • Step 2: Upload banner or add custom URL
    • Step 3: Build registration form:
      • Toggle "Auto-fill user data" (recommended: ON)
      • Add custom fields like:
        • T-Shirt Size (Dropdown: S, M, L, XL)
        • Team Name (Text Input)
        • Event Category (Radio: Coding/Design/Business)
      • Reorder fields with ⬆ ⬇ buttons
      • Mark fields as required
    • Step 4: Review and publish
    • Wait for admin approval

3. Test Student Flow

  1. Login as Student

    • Create new account → verify email → select "Student" role
    • Fill in phone and college during role selection

  2. Register for Fest

    • Browse fests on Home page (only approved fests shown)
    • Click fest card → View Details
    • Click "Register for this Fest"
    • Fill registration form:
      • Basic info (pre-filled if organizer enabled it)
      • Custom fields created by organizer
    • Submit registration
    • See "✓ Already Registered" confirmation

🎨 New Components & Files

Created:

  • src/components/FormBuilder.jsx - Form builder with drag-drop management
  • IMGBB_SETUP.md - ImageBB API setup guide
  • FEST_CREATION_GUIDE.md - Comprehensive feature documentation
  • QUICKSTART_FEST_SYSTEM.md - This file

Updated:

  • src/pages/CreateFest.jsx - Complete rebuild with 4-step wizard
  • src/pages/FestDetails.jsx - Dynamic registration modal with validation
  • src/pages/Home.jsx - Updated search to handle venue/location
  • src/components/FestCard.jsx - Display venue with fallback
  • src/pages/Dashboard.jsx - Display venue in fest lists
  • src/pages/Admin.jsx - Display venue in approval interface

🧪 Testing Checklist

Organizer Features:

  • Create fest with all 4 steps
  • Upload image via ImageBB (requires API key)
  • Add custom image URL (works without API key)
  • Add multiple custom fields
  • Reorder fields (up/down arrows)
  • Delete fields
  • Mark fields as required
  • Toggle prefill option
  • Navigate back/forth between steps
  • Preview banner image
  • Review page shows all details
  • Publish creates fest with status 'pending'

Student Features:

  • View fest details page
  • Click "Register" opens modal
  • Basic fields pre-filled (if enabled)
  • Custom fields render correctly
  • All field types work (text, dropdown, radio, checkbox, file, date, etc.)
  • Required field validation works
  • Email/phone validation works
  • File size validation (5MB limit)
  • Submit registration successful
  • "Already Registered" state shown
  • Cannot register twice
  • Data saved to Firestore correctly

Edge Cases:

  • Very long descriptions
  • 10+ custom fields
  • Invalid image URLs
  • Missing required fields
  • Network errors
  • Special characters in inputs
  • Mobile responsive design

📊 Data Structure

Fest Document (Firestore):

{
  festName: "TechFest 2026",
  collegeName: "MIT College",
  venue: "Main Auditorium",  // NEW: Changed from "location"
  category: "Technical",
  description: "...",
  date: "2026-03-15",
  bannerUrl: "https://...",
  registrationForm: [  // NEW: Custom form fields
    {
      id: 1234567890,
      label: "T-Shirt Size",
      type: "dropdown",
      required: true,
      options: ["S", "M", "L", "XL"]
    }
  ],
  prefillUserData: true,  // NEW: Auto-fill option
  createdBy: "userId",
  status: "pending",
  createdAt: "2025-01-15T10:00:00Z",
  registrationCount: 0
}

Registration Document (Firestore):

{
  festId: "festDocId",
  userId: "userDocId",
  festName: "TechFest 2026",
  collegeName: "MIT College",
  name: "John Doe",  // If prefill enabled
  email: "john@example.com",
  phone: "9876543210",
  college: "ABC University",
  customFields: {  // NEW: Dynamic responses
    "T-Shirt Size": "L",
    "Team Name": "Code Warriors",
    "Dietary Preferences": true
  },
  registeredAt: "2025-01-20T14:30:00Z"
}

🎯 Common Use Cases

Use Case 1: Simple Fest Registration

Organizer:

  • Step 1: Enter basic details
  • Step 2: Add banner
  • Step 3: Enable prefill, skip custom fields
  • Step 4: Publish

Student sees: Name, Email, Phone, College fields only

Use Case 2: Tech Hackathon with Team Registration

Organizer adds custom fields:

  • Team Name (Text, Required)
  • Team Size (Dropdown: 2-5 members)
  • Tech Stack (Checkbox: Multiple selection)
  • Project Idea (Textarea, Optional)
  • Resume Upload (File, Required)

Student fills: Basic info + all custom fields

Use Case 3: Sports Fest with Event Selection

Organizer adds custom fields:

  • Sport Category (Radio: Cricket/Football/Basketball)
  • Experience Level (Dropdown: Beginner/Intermediate/Advanced)
  • Emergency Contact (Phone, Required)
  • Medical Conditions (Textarea, Optional)

🔧 Customization Tips

Adding New Field Types:

  1. Add to fieldTypes array in FormBuilder.jsx
  2. Add rendering case in FestDetails.jsx registration modal
  3. Add validation in validateForm() function

Styling:

  • All components use Tailwind CSS
  • Custom styles in src/index.css
  • Color scheme: Primary color defined in tailwind.config.js
  • Modify classes in component files for changes

Validation:

  • Email: Uses regex /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  • Phone: Minimum 10 digits
  • File: Maximum 5MB
  • Add custom validators in validateForm() function

🆘 Troubleshooting

"Image upload failed"

  • Check ImageBB API key is correct
  • Verify image is under 5MB
  • Try custom URL option instead

"Registration not saving"

  • Check Firestore rules allow writes to 'registrations'
  • Verify user is authenticated
  • Check browser console for errors

"Form builder not working"

  • Clear browser cache
  • Check FormBuilder.jsx is imported correctly
  • Verify no JavaScript errors in console

"Already registered" but not showing data

  • Check Firestore 'registrations' collection
  • Verify festId and userId match
  • Check query in checkRegistrationStatus()

📚 Documentation Files

🎉 Next Steps

  1. ✅ Set up ImageBB API key (5 minutes)
  2. ✅ Test organizer flow (create a fest)
  3. ✅ Test student flow (register for fest)
  4. ✅ Check data in Firestore console
  5. ✅ Customize field types if needed
  6. ✅ Deploy to production

💡 Future Enhancements

Suggested improvements:

  • Drag-and-drop field reordering UI
  • Field templates (save & reuse forms)
  • Conditional fields (show based on other fields)
  • Payment integration
  • QR code for registrations
  • Email notifications
  • CSV export of registrations
  • Registration analytics
  • Capacity limits
  • Registration deadlines

🎊 Summary

You now have a production-ready fest creation and registration system with:

  • ✨ Beautiful multi-step wizard
  • ✨ Flexible form builder
  • ✨ Dynamic registration forms
  • ✨ Complete validation
  • ✨ Mobile responsive
  • ✨ Backwards compatible

Happy Testing! 🚀

For questions or issues, review the detailed guides or check browser console for errors.