web

A video platform for campus stories across Australia.

Client

CampusReels

Role

Full Stack Developer

Timeline

Launching Soon

Overview.

CampusReels is a full-stack video review platform where students discover and share campus experiences through short-form videos (reels). Think TikTok/Instagram Reels, but specifically for university campus tours and reviews. It features AI-powered content moderation, real-time engagement, a robust admin dashboard, and an Instagram/TikTok-style vertical scroll feed.

THE CHALLENGE

International students lacked a dedicated platform to share authentic campus experiences, making it difficult for prospective students to get real insights about university life in Australia. Existing social platforms were too general-purpose, lacked campus-specific discovery, and had no built-in content moderation tailored to educational content.

Built a full-stack video review platform from the ground up with a TikTok-style vertical scroll feed, a 4-layer parallel AI moderation pipeline using Google Cloud APIs, real-time WebSocket engagement via Socket.IO, a comprehensive admin dashboard with RBAC, and direct-to-CDN video uploads via Cloudflare R2 presigned URLs — all containerized with Docker and deployed on Northflank.

THE SOLUTION

Gallery.

Complete platform walkthrough — TikTok-style vertical feed, reel upload with AI moderation, rich commenting with Tiptap editor, and admin dashboard.

Video

Scroll-snap vertical video feed with Intersection Observer autoplay/pause, infinite scroll via TanStack React Query, and real-time engagement via Socket.IO.

Video

Landing page with hero section, platform stats, and campus discovery — built with Next.js 15 App Router and Framer Motion animations.

Home screen with Embla Carousel for featured reels, state-based filtering, and a 4-tier discovery algorithm ranking followed institutions, trending, recent, and long tail content.

User profile with engagement stats, creator analytics, and reel management — featuring Radix UI primitives and React Hook Form with Zod validation.

Admin dashboard with KPI cards, quick actions, and 4-tier RBAC (Super Admin → Admin → Creator → Member) — built with shadcn/ui + 16 Radix UI primitives.

Platform analytics with Recharts trend charts (7/28/90 day ranges), top institutions by reel count, and engagement metrics powered by 16 Mongoose models with text search indexes.

Platform settings with 25+ configurable toggles — registration, moderation thresholds, email alerts, upload limits, and super admin–locked settings.

Content moderation queue with approve/reject/escalate actions and bulk operations — backed by a 4-layer parallel AI moderation pipeline using Google Cloud Video Intelligence, Vision, NLP, and Speech-to-Text APIs.

TECHNOLOGY

Tech Stack.

Frontend

Next.js 15.1.3 (App Router, SSR, ISR)

Core framework

React 18.3.1 + TypeScript 5.8.3

Type-safe UI

Tailwind CSS 3.4

Custom HSL theme system (50+ CSS variables), dark/light/system

shadcn/ui + Radix UI (16 primitives)

Accessible components with Class Variance Authority variants

TanStack React Query v5

Infinite queries, optimistic updates, smart caching (5min stale, 10min GC)

Framer Motion 12 (LazyMotion)

Lazy-loaded animations — page transitions, carousels, stagger

Locomotive Scroll 5

Smooth scrolling on studio routes

Embla Carousel

Featured reels with spring-driven parallax + weighted scoring

TipTap

Rich text editor with @mentions, emoji picker, links, markdown

Recharts

Engagement trend charts in admin and creator dashboards

React Hook Form + Zod

Form management & validation

next-seo

Meta tags, OG tags, VideoObject structured data

Socket.IO Client

Real-time WebSocket communication

Lucide React + React Icons

Iconography

Backend

Node.js 20+ (Alpine Linux)

Runtime

MongoDB + Mongoose (16 models)

Primary database & ODM

NextAuth.js v4

Authentication (email/password + magic link + JWT sessions)

Socket.IO (port 3001)

Separate real-time server with HTTP bridge for API → socket emission

Sanity CMS

Headless CMS with GROQ queries and webhook sync to MongoDB

Resend

Transactional emails (verification, magic links, welcome)

Zoho SMTP (Nodemailer)

Admin alert emails with batch delivery

Cloudflare R2 (AWS SDK)

S3-compatible presigned URL direct uploads — browser to CDN

Web Push API

VAPID keys + Service Worker for push notifications

Infrastructure & DevOps

Docker (multi-stage Alpine)

Standalone output containerization

Northflank

Container orchestration & deployment

FFmpeg

Server-side frame and audio extraction for AI pipeline

Sharp

Server-side image processing & optimization

Google Analytics 4

Event tracking

CAPABILITIES

Key Features.

Video Platform & Discovery

TikTok-style vertical scroll feed with scroll-snap, keyboard navigation (arrow keys), Intersection Observer autoplay/pause, infinite scroll

Featured reels carousel with spring-driven parallax animations and weighted scoring algorithm

Reel upload with presigned URL direct-to-cloud upload, drag-drop, thumbnail customization, and automatic AI moderation

Search reels by title/caption with state/territory + institution filters and sticky animated filter bar (ResizeObserver)

Institution directory — browse, follow universities with type and geographic filtering

Video player — play/pause, mute, progress scrubbing, fullscreen, preview URL generation

Conditional rendering — only active reel ±1 neighbors render video for performance

Engagement & Social

Like/dislike with real-time Socket.IO sync and view tracking with live count updates

Rich comments — TipTap editor, @mentions, emoji reactions (6 types), threaded replies, pin/report

Save reels to personal collection with drag-and-drop reordering and batch management

Share modal — clipboard, social media (Facebook, Twitter, WhatsApp, Email), QR code, embed code

Watch history — 3 tabs (Watched, Liked, Commented) with search, sort, batch delete

Follow/unfollow users and institutions

Notifications

In-app notification panel — slide-in, infinite scroll, mark read, delete

Web push notifications via VAPID keys + Service Worker

Email notifications to admins (batch delivery via Zoho SMTP)

10+ notification types: reel_like, comment_reply, mention, follow, reel_approved/rejected, reports, etc.

AI Content Moderation

4-check parallel pipeline with worst-status-wins aggregation (Video Intelligence → SafeSearch → Audio → Text NLP)

4-tier escalation system (every 15 min): first reminder → second → urgent → final warning

Configurable review deadlines (default 72h) with auto-reject or auto-approve

Report system with threshold-based auto-flagging (default: 3 reports)

Creator appeal system — submit response text, admin reviews decision

Profanity filter (regex-based) on comments, moderation logging to JSON line files

Admin Dashboard

KPI dashboard — users, reels, pending moderation, reports, flagged comments, institutions

Reel moderation queue with bulk approve/reject/delete, search, status filters

Comment moderation with flagged comment queue

User management — search, filter by role/status, edit profiles, change roles

Platform analytics — engagement trends with Recharts, date range selection, period comparison, fullscreen charts

Activity/audit log — track all admin actions with search and filters

Institution management — edit details, view institution analytics

Bulk reel import from CSV/JSON (PapaParse)

25+ configurable platform settings (registration, moderation, email alerts, upload limits)

Site content CMS via Sanity — edit About, Guidelines, Terms, Privacy, Welcome pages

Super admin restrictions — email alert settings locked to super_admin only

Creator Features

Creator analytics dashboard — engagement trends (7d/28d/90d), views, likes, comments breakdown by reel

Reel management on profile — status filters (pending/approved/rejected), edit, delete

Edit & resubmit rejected reels with appeal text

Auth & Security

4-tier RBAC: member → creator → admin → super_admin with middleware-enforced route protection

Email/password signup with OTP verification (6-digit, 10-min expiry) + magic link authentication

JWT sessions (30-day max age), bcryptjs (12 salt rounds)

CRON secret validation, Sanity webhook signature verification

Authorization helpers: requireAuth, requireAdmin, requireSuperAdmin

Deactivation guard and maintenance mode guard

INTELLIGENCE

AI / ML Pipeline.

A 4-layer parallel AI moderation pipeline that automatically screens every uploaded video. All checks run in parallel using a worst-status-wins aggregation.

Video Intelligence

@google-cloud/video-intelligence

Scans entire video for explicit/adult visual content

Full video scan for explicit content
Confidence-based decisions (Likely/Very Likely = Rejected, Possible = Needs Review)

Vision SafeSearch

@google-cloud/vision

Frame-by-frame image safety analysis

Extracts up to 20 frames (1 every 3 seconds) via FFmpeg
Checks 5 categories: Adult, Violence, Racy, Medical, Spoof
Batch processes 5 frames at a time

Natural Language

@google-cloud/language

Text toxicity analysis on metadata

Analyzes title + caption + tags combined
Detects: Toxic, Violent, Sexual, Derogatory, Insult, Profanity, Death/Harm

Speech-to-Text

@google-cloud/speech

Audio transcription for content screening

Extracts audio via FFmpeg and transcribes it
Infrastructure for audio content toxicity detection

How It Works

All 4 checks run in parallel, and the system uses a worst-status-wins aggregation — if any single check flags content, the entire reel is flagged. Results include confidence scores, frame counts analyzed, and processing times.

IMPACT

Results.

010Custom HooksAcross data fetching, real-time, UI, forms, performance

020API RoutesAcross auth, content, engagement, moderation, admin

030AI LayersParallel moderation pipeline with worst-status-wins

040Mongoose ModelsNamed models with text search indexes

050Radix PrimitivesDialog, Dropdown, Tabs, Toast & more

060+Platform SettingsConfigurable toggles for registration, moderation, uploads

ENGINEERING

Architecture.

0169 custom React hooks across data fetching, real-time, UI state, forms, and performance

0279 API routes across auth, content, engagement, moderation, admin, webhooks, and cron

0316 Mongoose models with denormalized institution/user data for query efficiency

04Dual email system — Resend (transactional) + Zoho SMTP via Nodemailer (admin alerts with batch delivery)

05Web Push API with VAPID keys + Service Worker for browser push notifications

064-tier moderation escalation system (runs every 15 min): first reminder → second → urgent → final warning

07Event-driven real-time sync via Socket.IO with room-based broadcasting and HTTP bridge

08Presigned URL direct uploads to Cloudflare R2, bypassing server for large video files

09LazyMotion + domAnimation for tree-shaken Framer Motion 12 bundles

10Conditional rendering — only active reel ±1 neighbors render video elements

11HSL CSS variable theme system (50+ variables) with hydration flash prevention

12Cron jobs: orphaned upload cleanup (hourly), moderation escalation (every 15 min)

Deployment

Docker multi-stage build (deps → builder → runner on Alpine Linux)

Single container runs both Next.js (port 3000) and Socket.IO (port 3001) via concurrently

Deployed on Northflank with environment variable management

Previous ProjectAll Projects

Next ProjectA community hub for international

Get in Touch