Events Managing and Checking-in System

[lukeguo12210]

Events Management System with QR Code Check-In

Summary

Implemented a complete event management system for CS124H with QR code-based student check-ins, admin dashboard, and point tracking integration.

Features Added

1. Student-Facing Events Page

• Location: /app/events/page.js
• Tabbed interface showing Upcoming and Past events
• Event cards with details (title, location, presenter, time, points)
• Modal popup with full event information
• RSVP to Discord button integration
• Mobile-responsive design

2. Admin Management Dashboard

• Location: /app/events/manage/page.js
• Secure admin login with PRIVATE_EVENTS_MANAGE_KEY environment variable
• Full CRUD operations for events:
  • Create new events with all details
  • Edit existing events
  • Delete events with confirmation
  • View check-in statistics
• Display QR codes for event check-ins
• Real-time check-in count tracking
• Logout functionality

3. QR Code Check-In System

• Admin Side:
  • Generate unique QR codes for each event
  • QR modal displays event details alongside code
  • 4-digit secret codes for security
  • Square QR code rendering with CS124H branding
• Student Side (/app/events/checkin/page.js):
  • Scan QR code to access check-in page
  • Verify QR code secret matches event
  • Collect NetID, name, and email
  • Success confirmation with points earned
  • Auto-redirect to events page after check-in

4. Database Schema

• Migration: /supabase/migrations/001_create_events_tables.sql
• Tables:
  • events: Stores all event information
    • Basic info: title, description, location, presenter
    • Timing: start_time, end_time
    • Points: point_value (default 10)
    • Check-in: qr_code_secret, checked_in_students (JSONB)
    • Discord: join_link
  • event_checkins: Tracks individual check-ins
    • Links to events via foreign key
    • Unique constraint prevents duplicate check-ins
• Row Level Security (RLS):
  • Public read access for students
  • Anonymous write access (admin auth in API layer)
  • Separate policies for SELECT, INSERT, UPDATE, DELETE
• Indexes: Optimized for start_time, is_active, and check-in queries

5. API Endpoints

Events Management

• GET /api/events - Fetch all events (with optional filters)
• POST /api/events - Create new event
• GET /api/events/[id] - Get single event
• PUT /api/events/[id] - Update event
• DELETE /api/events/[id] - Delete event

Check-In

• POST /api/events/checkin - Process student check-in
  • Validates QR code secret
  • Prevents duplicate check-ins
  • Updates event's checked_in_students JSONB
  • Adds points to attendance_sheet for leaderboard integration

Admin Authentication

• POST /api/auth/admin - Validate admin code
  • Returns session token for dashboard access

File Structure

app/
├── events/
│   ├── page.js                    # Student events page
│   ├── Events.module.css          # Events page styles
│   ├── manage/
│   │   ├── page.js                # Admin dashboard
│   │   └── Manage.module.css      # Dashboard styles
│   └── checkin/
│       ├── page.js                # Check-in form page
│       └── Checkin.module.css     # Check-in styles
├── api/
│   ├── events/
│   │   ├── route.js               # GET/POST events
│   │   ├── [id]/route.js          # GET/PUT/DELETE single event
│   │   └── checkin/route.js       # POST check-in
│   └── auth/
│       └── admin/route.js         # Admin authentication
└── supabase/
    └── migrations/
        └── 001_create_events_tables.sql  # Database schema

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
cs124h-site	Ready	Preview	Comment	Nov 17, 2025 10:38pm