Inspiration

UniVibe Events

Executive Summary

UniVibe Events is a modern, student-focused event discovery and management platform built with Next.js 14, TypeScript, and Firebase. The application enables university students to discover, RSVP, and create events while facilitating community engagement through real-time chat and teammate matching features.

Developer: Aditi
Submission Date: 26/10/2025 Framework: Next.js 14 (App Router)
Language: TypeScript
Database: Firebase Firestore
Authentication: Firebase Auth
Hosting: Vercel (recommended)

1. Project Overview

1.1 Purpose

UniVibe Events bridges the gap between university event organizers and students by providing a centralized, intuitive platform for event discovery and participation. The platform focuses on creating a vibrant campus community through seamless event management and social features.

1.2 Target Audience

Primary: University students aged 18-25
Secondary: Event organizers, clubs, and societies
Market: Universities across Australia (RMIT, University of Melbourne, Monash, Swinburne)

1.3 Problem Statement

Students struggle to discover relevant campus events, find teammates for hackathons, and stay connected with their campus community. Existing solutions are fragmented, outdated, or lack modern UX/UI design.

2. Technical Architecture

2.1 Technology Stack

Layer	Technology	Purpose
Frontend Framework	Next.js 14	Server-side rendering, routing, optimization
Language	TypeScript	Type safety, better developer experience
Styling	Tailwind CSS	Utility-first CSS framework
Backend	Firebase	Authentication, database, storage
Database	Firestore	Real-time NoSQL database
Authentication	Firebase Auth	User authentication and authorization
Storage	Firebase Storage	Image and file storage
Icons	Lucide React	Modern icon library
Animations	Framer Motion	Smooth UI animations
Date Handling	date-fns	Date manipulation utilities

2.2 Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home/Events page
│   ├── login/             # Authentication pages
│   ├── signup/
│   ├── profile/           # User profile
│   ├── my-events/         # User's events
│   ├── create/            # Event creation
│   └── events/[id]/       # Event details
│
├── components/            # React components
│   ├── ui/               # Reusable UI components
│   ├── Hero.tsx          # Landing hero section
│   ├── EventCard.tsx     # Event display card
│   ├── Navbar.tsx        # Navigation bar
│   └── ProtectedRoute.tsx # Auth guard
│
├── contexts/             # React contexts
│   └── AuthContext.tsx   # Authentication state
│
├── hooks/                # Custom React hooks
│   ├── useEvents.ts      # Event data fetching
│   ├── useAuth.ts        # Auth utilities
│   ├── useRSVP.ts        # RSVP functionality
│   ├── useChat.ts        # Chat messages
│   ├── useMyEvents.ts    # User's events
│   └── useTeammatePosts.ts # Team matching
│
├── lib/                  # Utilities and configs
│   ├── firebase.ts       # Firebase initialization
│   ├── firestore-helpers.ts # Firestore utilities
│   ├── auth-helpers.ts   # Auth utilities
│   └── types.ts          # TypeScript interfaces
│
└── styles/
    └── globals.css       # Global styles

3. Core Features

3.1 Event Discovery

Smart Filtering: Filter by category, campus, date range, free food, beginner-friendly
Search Functionality: Full-text search across titles, descriptions, and tags
Category Chips: Visual category selection with emoji indicators
Date Sorting: Upcoming events prioritized
Responsive Design: Optimized for mobile, tablet, and desktop

3.2 Event Details

Comprehensive Information: Date, time, location, description, requirements
RSVP System: One-click RSVP with confetti animation
Real-time Chat: Event-specific chat for attendee communication
Teammate Board: Find teammates for hackathons and workshops
QR Code: Check-in functionality with QR codes
Share Feature: Social media sharing capabilities

3.3 Event Creation

Multi-step Form: Intuitive event creation workflow
Live Preview: Real-time preview of event card
Category Selection: Categorized event types
Campus Selection: Multi-campus support
Tag System: Flexible tagging for better discoverability
Special Features: Free food, beginner-friendly checkboxes
Image Upload: Event banner upload (Firebase Storage integration)

3.4 User Profile

Statistics Dashboard: Event attendance, vibe points, interests
Vibe Points System: Gamification through point system
Interest Management: Customizable interest tags
Event History: Past events and attendance tracking
Settings: Account and preference management

3.5 Authentication

Email/Password Auth: Traditional authentication
University Email Validation: Domain-based verification
Session Management: Persistent login with Firebase Auth
Protected Routes: Route guards for authenticated pages
Social Login: OAuth integration capability (ready for implementation)

3.6 My Events

Attending Tab: Events user has RSVPed to
Hosting Tab: Events created by user
Past Events: Historical event management
Quick Actions: Edit, delete, view attendees

4. User Interface & Design

4.1 Design Philosophy

Inspired by Up Bank's vibrant, modern aesthetic with:

Joyful Gradients: Warm color palette (#FF6F91 → #FFA06A → #FFC75F)
Rounded Corners: 18-24px border radius for friendly appearance
Soft Shadows: Subtle depth with hover effects
Micro-interactions: Confetti, smooth transitions, hover states
Accessibility: WCAG compliant, keyboard navigation

4.2 Color Palette

Primary Gradient: Pink (#FF6F91) → Peach (#FFA06A) → Yellow (#FFC75F)
Accent: Purple (#845EC2)
Background: Light Gray (#F9FAFB)
Text: Dark Gray (#1E1E1E)
Success: Green (#10B981)
Error: Red (#EF4444)

4.3 Typography

Headings: Poppins (600, 700)
Body: Inter (400, 500, 600)
Sizes: Fluid typography with responsive scaling

4.4 Component Design

Cards: Elevated with rounded corners and hover effects
Buttons: Gradient backgrounds with smooth transitions
Inputs: Clean, minimal with focus states
Badges: Pill-shaped category indicators
Modals: Overlay dialogs with backdrop blur

5. Database Schema

5.1 Firestore Collections

Users Collection (`users`)

{
  id: string
  name: string
  email: string
  campus: string
  avatar?: string
  interests: string[]
  vibePoints: number
  createdAt: Timestamp
  userType: 'student' | 'club'
  clubDescription?: string
}

Events Collection (`events`)

{
  id: string
  title: string
  description: string
  category: string
  date: Timestamp
  time: string
  campus: string
  location: string
  image?: string
  host: {
    id: string
    name: string
    avatar?: string
    university: string
  }
  attendees: string[]  // User IDs
  maxAttendees: number
  isFree: boolean
  tags: string[]
  hasFood: boolean
  createdBy: string
  createdAt: Timestamp
  updatedAt: Timestamp
}

RSVPs Collection (`rsvps`)

{
  id: string
  eventId: string
  userId: string
  createdAt: Timestamp
  checkedIn: boolean
}

Chat Messages Collection (`chatMessages`)

{
  id: string
  eventId: string
  senderId: string
  senderName: string
  text: string
  createdAt: Timestamp
}

Teammate Posts Collection (`teammatePosts`)

{
  id: string
  eventId: string
  title: string
  description: string
  skillsNeeded: string[]
  authorId: string
  authorName: string
  members: string[]
  createdAt: Timestamp
}

5.2 Security Rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Users can read all events
    match /events/{eventId} {
      allow read: if true;
      allow create: if request.auth != null;
      allow update, delete: if request.auth != null && 
        resource.data.createdBy == request.auth.uid;
    }

    // Users can only read their own RSVPs
    match /rsvps/{rsvpId} {
      allow read: if request.auth != null && 
        resource.data.userId == request.auth.uid;
      allow create: if request.auth != null;
      allow update, delete: if request.auth != null &&
        resource.data.userId == request.auth.uid;
    }

    // Chat messages accessible to event attendees
    match /chatMessages/{messageId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null;
      allow delete: if request.auth != null &&
        resource.data.senderId == request.auth.uid;
    }
  }
}

6. Key Implementation Details

6.1 Real-time Data

All event data is fetched using Firestore real-time listeners (onSnapshot), ensuring users see updates instantly without manual refresh.

6.2 Authentication Flow

User signs up with university email
Firebase Auth creates user account
User profile created in Firestore
Session persisted across tabs
Protected routes validated on navigation

6.3 RSVP System

One-click RSVP with optimistic UI updates
Confetti animation for engagement
Automatic attendee list updates
Check-in functionality with QR code

6.4 Image Upload

Firebase Storage integration for event banners with:

Client-side compression
Upload progress tracking
Automatic URL generation
CDN delivery

7. Installation & Deployment

7.1 Prerequisites

Node.js 18+ and npm
Firebase account and project
Git

7.2 Local Setup

# Clone repository
git clone [repository-url]
cd univibe-events

# Install dependencies
npm install

# Set up environment variables
cp env.local.example .env.local

# Add Firebase config to .env.local
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id

# Run development server
npm run dev

# Open http://localhost:3000

7.3 Firebase Setup

Create Firebase Project
- Go to Firebase Console
- Create new project
- Enable Authentication (Email/Password)
- Enable Firestore Database
- Enable Storage
Configure Firestore
- Create database in test mode (update rules for production)
- Run seed script: npm run seed-events

Set Storage Rules

rules_version = '2';
service firebase.storage {
 match /b/{bucket}/o {
   match /events/{eventId}/{fileName} {
     allow read: if true;
     allow write: if request.auth != null;
   }
 }
}

7.4 Deployment

Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Add environment variables in Vercel dashboard
# Redeploy

Alternative: Other Platforms

Netlify
AWS Amplify
Firebase Hosting

8. Testing & Quality Assurance

8.1 Manual Testing Performed

✅ User registration and login
✅ Event browsing and filtering
✅ Event creation and editing
✅ RSVP functionality
✅ Real-time chat
✅ Responsive design (mobile, tablet, desktop)
✅ Form validation
✅ Error handling
✅ Protected routes
✅ Image upload

8.2 Browser Compatibility

✅ Chrome (latest)
✅ Firefox (latest)
✅ Safari (latest)
✅ Edge (latest)
✅ Mobile browsers (iOS Safari, Chrome Mobile)

8.3 Performance

Lighthouse Score: 90+ (target)
First Contentful Paint: < 1.5s
Time to Interactive: < 3s
Image optimization with Next.js Image component

9. Future Enhancements

9.1 Planned Features

Push Notifications: Browser push notifications for event reminders
Calendar Integration: Export events to Google Calendar, iCal
Social Features: User following, friend system
Event Analytics: Dashboard for event hosts
Payment Integration: Stripe for paid events
Advanced Search: AI-powered event recommendations
Mobile Apps: React Native iOS/Android apps

9.2 Technical Improvements

Unit and integration tests (Jest, React Testing Library)
End-to-end testing (Playwright)
PWA capabilities
Offline support with service workers
Performance monitoring (Sentry, LogRocket)
A/B testing framework

10. Challenges & Solutions

10.1 Challenges Faced

Real-time Data Synchronization
- Challenge: Keeping UI in sync with Firestore updates
- Solution: Implemented onSnapshot listeners with proper cleanup
Image Upload Performance
- Challenge: Large images causing slow uploads
- Solution: Client-side compression before upload
State Management
- Challenge: Managing complex state across components
- Solution: Context API for auth, custom hooks for data fetching
Responsive Design
- Challenge: Consistent UX across all devices
- Solution: Mobile-first approach with Tailwind breakpoints

10.2 Technical Decisions

Next.js App Router: Modern routing, server components, improved performance
Firebase: Rapid development, real-time capabilities, scalable backend
Tailwind CSS: Rapid UI development, consistent design system
TypeScript: Type safety, better developer experience, fewer bugs

11. Code Quality & Best Practices

11.1 Code Standards

ESLint configuration
Prettier for code formatting
TypeScript strict mode
Consistent naming conventions
Component composition over inheritance

11.2 File Organization

Feature-based folder structure
Reusable components in /components/ui
Custom hooks for data fetching
Centralized type definitions
Utility functions separated from components

11.3 Error Handling

Try-catch blocks for async operations
User-friendly error messages
Error boundaries for React components
Firebase error handling

12. Learning Outcomes

12.1 Technical Skills Developed

Next.js 14 App Router and Server Components
Firebase Authentication and Firestore
TypeScript for type-safe development
Tailwind CSS for modern UI
Real-time data synchronization
Responsive web design
Git version control

12.2 Soft Skills Enhanced

Problem-solving
Time management
User-centric thinking
Design sensibility
Documentation writing

13. Conclusion

UniVibe Events represents a modern, scalable solution to campus event discovery and community building. Built with industry-standard technologies and best practices, the application provides an excellent user experience while remaining maintainable and extensible.

The platform demonstrates proficiency in full-stack development, modern React patterns, and cloud services integration. With its vibrant design and comprehensive feature set, UniVibe Events is ready for deployment and real-world use.