A Next.js study platform for Western University students to browse programs and courses, organize unit notes, and search resources. MusTang is built with Supabase Auth and a contributor upload flow for community-submitted materials.
- Program catalog - Browse 20 academic programs (Arts and Humanities, Computer Science, Engineering, Health Sciences, and more) from a responsive home page with program-specific imagery.
- Static course pages - Program and course routes are pre-rendered at build time with
generateStaticParams, giving fast navigation across the full catalog. - Unit-based notes workspace - Each course page organizes study material into five units with a sidebar layout for structured note-taking.
- Command palette search - Press
Cmd/Ctrl+Kto search programs, courses, notes, and videos across the static catalog. - Supabase authentication - Email/password sign-up and sign-in, plus Google OAuth with cookie-based SSR sessions refreshed by Next.js middleware.
- Contributor uploads - Signed-in students submit notes, videos, and assignments through a protected upload form; submissions are emailed to admins for review and curation.
| Layer | Technologies |
|---|---|
| Framework | Next.js 15 (App Router), React 19, TypeScript |
| Styling | Tailwind CSS 4, shadcn/ui, Geist fonts |
| Auth | Supabase Auth via @supabase/ssr |
| Nodemailer (SMTP upload notifications) | |
| UI | Radix UI, Lucide icons, cmdk command palette |
src/
├── app/ # App Router pages and API routes
│ ├── api/upload-submission/ # Authenticated upload → SMTP email
│ ├── auth/ # Login page + OAuth callback
│ ├── programs/[programSlug]/ # SSG program & course pages
│ ├── signup/ # Registration
│ └── upload/ # Auth-gated contributor form
├── components/ # Feature components + shadcn/ui
├── data/ # Static program & course catalogs
│ ├── programs.ts
│ └── program-courses.ts
├── lib/ # Shared utilities
└── utils/
├── auth/ # Google OAuth helpers
└── supabase/ # Browser, server, and middleware clients
Catalog data lives in TypeScript files-not a Supabase database. The Computer Science program has a curated course list. Other programs ship with generated placeholder courses that can be expanded over time.
git clone https://github.com/davidanukam/mustang.git
cd mustang
npm installCreate a .env.local file in the project root:
# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-anon-key
# Upload notifications (SMTP)
UPLOAD_SMTP_HOST=smtp.example.com
UPLOAD_SMTP_USER=your-smtp-user
UPLOAD_SMTP_PASS=your-smtp-password
UPLOAD_EMAIL_TO=admin@example.com
# Optional SMTP overrides
UPLOAD_SMTP_PORT=587
UPLOAD_SMTP_SECURE=false
UPLOAD_EMAIL_FROM=your-smtp-userSupabase OAuth setup: Add {your-origin}/auth/callback as an authorized redirect URL in the Supabase dashboard.
npm run devOpen http://localhost:3000.
npm run build # Production build (SSG for all program/course routes)
npm run start # Start production server
npm run lint # ESLint| Route | Access | Description |
|---|---|---|
/ |
Public | Program catalog home |
/programs/[programSlug] |
Public | Course grid for a program |
/programs/[programSlug]/courses/[courseSlug] |
Public | Unit-based notes workspace |
/auth |
Public | Login (email + Google) |
/signup |
Public | Create account |
/upload |
Signed in | Submit study materials for admin review |
/api/upload-submission |
Signed in | Upload API (returns 401 if unauthenticated) |
Middleware refreshes Supabase session cookies on every request. The upload page and API enforce authentication at the application layer.
- A signed-in student fills out the upload form (program, course, title, resource type, optional video link, notes, and file attachments).
POST /api/upload-submissionvalidates the request and sends an email to the admin address with submission metadata and attachments.- Admins review, curate, and publish approved materials.
MusTang is designed to deploy on Vercel or any Node.js host that supports Next.js 15. Set all environment variables in your hosting dashboard. The OAuth callback route handles x-forwarded-host for production redirects.
Private project. All rights reserved.