GitHub - codexperts2024/codexperts-web: 🌐 Official website for codeXperts, a student coding club at Seneca Polytechnic. React/Next.js on Vercel, FastAPI on Heroku, Supabase for database and auth, Cloudinary for images. Problem publishing, solution submissions, member management, events, and announcements.

 ██████╗ ██████╗ ██████╗ ███████╗██╗  ██╗██████╗ ███████╗██████╗ ████████╗███████╗
██╔════╝██╔═══██╗██╔══██╗██╔════╝╚██╗██╔╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝██╔════╝
██║     ██║   ██║██║  ██║█████╗   ╚███╔╝ ██████╔╝█████╗  ██████╔╝   ██║   ███████╗
██║     ██║   ██║██║  ██║██╔══╝   ██╔██╗ ██╔═══╝ ██╔══╝  ██╔══██╗   ██║   ╚════██║
╚██████╗╚██████╔╝██████╔╝███████╗██╔╝ ██╗██║     ███████╗██║  ██║   ██║   ███████║
 ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝     ╚══════╝╚═╝  ╚═╝   ╚═╝   ╚══════╝

A real-world Agile team project — 6 members, 6-week sprint cycle, full-stack web app.

codeXperts Preview

codeXperts Production

What We Built

The codeXperts Club official website — a members-only platform for a coding club at Seneca Polytechnic. Built end-to-end by a 6-person team following Agile practices over a 6-week sprint.

Feature	Description
Google OAuth + RBAC	4-tier role system (Public → Member → Executive → Admin) with Supabase RLS enforcement
Coding Problems	Weekly problems on `/problems` (markdown editor or Word/PDF document mode); exec/admin CRUD; members read-only
Solutions Workspace	`/solutions` list + `/solutions/:id` Monaco editor; Run via Judge0 across six languages (Python, Java, C, C++, JavaScript, TypeScript), Submit upsert, Community accordion viewer
AI Code Review	Gemini Flash-Lite reviews a submission for Big O complexity and duplicated logic, plus static hints for forbidden constructs; gated behind passing the sample tests and a per-member daily limit
QR Attendance	Admin generates a session token → members scan to check in → auto-expires
Schedule Page	Google Calendar API integration — synced events with subscribe/download for members
Member Directory	Filterable profile cards with cohort, school, role badges, and per-field visibility controls
Activity Heatmap	GitHub-style contribution graph per member, combining submissions and attendance
Events Page	Past and upcoming events from Supabase; exec/admin inline CRUD with Cloudinary cover/gallery; detail pages with markdown body, lightbox gallery, and prev/next nav
Our Mentor	Public welcome letter from the founder; portrait stored on Cloudinary and editable by executive/admin
Member Profiles	Per-member profile page with bio, social links, and self-edit mode
Announcements	Public board with Post View (markdown, prev/next nav) and List View (table, pagination); admin/exec create and delete

Stack & Key Decisions

Layer	Choice	Why
Frontend	Next.js 16 (App Router)	SSR for schedule/calendar pages; app router for per-route auth guards
Styling	Tailwind CSS	Rapid iteration across 6 contributors without CSS conflicts
Auth + DB	Supabase	Google OAuth out of the box; RLS policies enforce RBAC at the DB level — no leaking data through API mistakes
Backend	FastAPI (Heroku)	Lightweight proxy for Judge0 code execution and QR token validation; decoupled from Vercel edge
AI Review	Gemini Flash-Lite	Cheap enough to run per submission; the system prompt is scoped to complexity and duplication only, so it coaches without handing over the answer
Deployment	Vercel + Heroku	Zero-config preview deploys per PR on Vercel; Heroku for persistent Python backend

Team

Name	Role
Paul	PM / Full-Stack (Monaco Editor, Judge0 integration) / UI/UX
Kai	Frontend
Dave	Backend (FastAPI / Heroku / Deployment) / Frontend
Gary	Backend (Supabase / DB & Auth)
Judy	Frontend
Andra	Frontend / Backend

System Architecture

Frontend (Next.js — Vercel)
│
├── Supabase
│   ├── Auth (Google OAuth only)
│   └── PostgreSQL
│       ├── profiles       → id, name, email, role, school, cohort, status, bio,
│       │                     linkedin, github, avatar_url, profile_visibility (JSONB)
│       ├── problems       → id, title, description, file_url, created_at
│       ├── submissions    → profile_id, problem_id, code, language, ai_feedback
│       ├── sessions       → token, expires_time, is_active
│       ├── attendances    → profile_id, session_id, checked_at
│       ├── announcements  → author_id, title, content, created_at
│       └── events         → title, description, body, event_date, location, campus,
│                             cover_image_url, gallery_urls, author_id
│
└── FastAPI (Heroku)
    ├── /health            → service health check
    ├── /execute           → proxy to Judge0 CE (RapidAPI) for code execution
    ├── /execute/samples   → run member code against the problem's sample tests
    ├── /evaluate          → forbidden-construct hints + Gemini Big O / duplication review
    ├── /submissions       → upsert member solutions to Supabase
    └── /attendance/verify → QR token validation

Role-Based Access Control:

Public (Unauthenticated)
  └── Member (Approved)
        └── Executive
              └── Admin

Role	Access
Public	Landing, public announcements, events
Member	Dashboard, member directory, problem submissions
Executive	Post problems, manage sessions, events CRUD
Admin	User approval, role management, executive position assignment for Our Team, member CSV export for Excel, full access

Onboarding flow: Google Sign-In → draft → Submit application → pending → Admin approval → member

Apply supabase/migrations/20261008120000_application_submission.sql before deploying this application version. It adds major and self-reported Discord participation, returns incomplete pending profiles to draft, and preserves approved members. Complete legacy pending applications remain pending; an administrator or the applicant must fill in their major before approval. Never infer submission from a Google email or a first name alone.

Signup writes go through the authenticated submit_application database function. It derives the user ID from the session, validates required fields, and saves the profile and pending status in one transaction. Cancel does not submit or delete the Google account. A failed request retains form inputs, and a timed-out submission is checked against the stored fields before showing success.

Run npm test for isolated PostgreSQL migration/RPC tests and signup/auth UI tests. No production credentials or production data are used by these tests.

Apply supabase/migrations/20261008150000_optional_phone_and_rejections.sql after the initial onboarding migration for optional phone numbers and rejection history. Phone is validated only when supplied. New rejections require a reason (up to 1,000 characters); the server saves the reason, reviewer, timestamp and rejected status atomically. Admin's Rejected applications list includes earlier rejected accounts, but their missing historical dates/reasons are shown as not recorded. Applicants can read their own rejection details; other members cannot. The York Discord invite is maintained in src/config/socialLinks.js.

Agile Process

6-person team, weekly sprints, Saturday standups at 7:30 PM via Google Meet. Each PR is reviewed before merging to develop; develop merges to main at sprint close.

Planning → Design → Development → Testing → Review & Release
   ↑                                               │
   └───────────────── next sprint ◀────────────────┘

Sprint Contribution Report — Total
───────────────────────────────────
Name    Issues Contribution
───────────────────────────────────
Paul    30     ████████████████████████████████████████████████████████████

Dave    8      ████████████████

Kai     7      ██████████████

Gary    7      ██████████████

Andra   4      ████████

Sid     3      ██████

Judy    2      ████

───────────────────────────────────

Week 1 — Foundation & Setup

Planning

Defined 6-week roadmap and MVP scope · Created GitHub Issues · Assigned tasks across FE/BE · Set up GitHub Projects Kanban board

Design

Finalized sitemap and page visibility rules · Produced Figma wireframes for all 8 pages · Finalized DB schema (profiles, problems, submissions, sessions, attendances, announcements) · Defined navbar structure and social link config

Development

Next.js + Tailwind project setup · Supabase project created + Google OAuth configured · RLS policies drafted · Vercel + Heroku pipelines connected · Placeholder pages scaffolded for all routes

Testing

Google login → pending user flow tested end-to-end · Vercel preview deploy verified · Environment variable setup confirmed across team

Review & Release

Sprint retrospective completed · Foundation merged to develop · Preview URL shared with team

Sprint Contribution Report — Week 1
──────────────────────────────────────
Name    Done/All  Contribution
──────────────────────────────────────
Paul    6/6       ████████████

Gary    3/3       ██████

Dave    3/3       ██████

Sid     1/1       ██

Kai     1/1       ██

Andra   1/1       ██

Judy    0         

──────────────────────────────────────

Week 2 — Auth Flow & Public Pages

Planning

Sprint goal defined: complete auth flow and build all public-facing pages · Issues #14 (role-based navbar), #15 (Google OAuth login), #20 (Join Us modal) scoped and assigned · Design system tokens scoped as prerequisite for all UI work

Design

Members page structure defined · Individual profile page spec (/members/:id) · Self-edit mode with per-field visibility controls · Student/Graduate status toggle · Stitch wireframes finalized for all member-facing views

Development

Design system initialized: color tokens, Inter/Montserrat fonts, base UI components (#64, #66, #67) · Role-based navbar with social hover dropdowns (#14) · Google OAuth login + pending screen (#15) · Homepage built: hero section, Elfsight Instagram embed, About section · feature/auth-role-guard: ProtectedRoute middleware, PENDING/EXECUTIVE roles, RoleGuard refactored (#65) · RLS policies finalized for all Supabase tables (#70) · feature/join-modal-issue-20: Google OAuth signup modal with campus/cohort/phone fields and profile completion (#72)

Testing

Google OAuth → pending screen → admin approval → member role flow tested end-to-end · Protected Route enforcement validated · RLS policy enforcement verified on Supabase · All public pages reviewed on Vercel preview

Review & Release

7 PRs reviewed and merged to develop (#64, #65, #66, #67, #70, #71, #72) · Sprint 2 retrospective completed · Auth flow and all public pages live on Vercel preview

Sprint Contribution Report — Week 2
──────────────────────────────────────
Name    Done/All  Contribution
──────────────────────────────────────
Paul    4/4       ████████

Kai     4/4       ████████

Dave    3/3       ██████

Andra   2/2       ████

Sid     1/1       ██

Gary    1/1       ██

Judy    0         

──────────────────────────────────────

Week 3 — Schedule Page & Timezone Bugs

Planning

Issue #18 (Schedule page) scoped and carried forward · Judy onboarded as Frontend

Design

3-Layer Depth System designed (L0 #F9F9F9 → L1 #EAEAEA → L2 #DBDBDB) and documented in design-system.md · Schedule page spec fully rewritten to match implementation · Tailwind custom depth tokens defined (bg-bg-layer1/2/2Hover)

Development

feature/schedule-page-issue-18: server-side iCal parser (/api/calendar) with RRULE expansion and EXDATE support · Schedule page rebuilt with Google Calendar embed, custom month nav, event list with start/end time, and event detail modal (Google Maps link) · UTC→Toronto timezone conversion · Join flow converted from dedicated route to Navbar modal (/join → redirect)

Testing

EXDATE VALUE=DATE timezone day-shift bug found and fixed · UTC time offset bug (01:30 UTC displaying as 1:30 AM instead of 9:30 PM EDT) caught and fixed · Copilot AI review: 5 issues addressed (race condition, RRULE UNTIL boundary, dead code, React key, modal scroll lock) · Vercel preview QA passed

Review & Release

PR #78 opened with Copilot automated review · All review comments triaged and addressed · Issue #18 implementation summary posted · develop merge pending final approval

Sprint Contribution Report — Week 3
──────────────────────────────────────
Name    Done/All  Contribution
──────────────────────────────────────
Paul    2/2       ████

Dave    2/2       ████

Judy    2/2       ████

Sid     1/1       ██

Kai     1/1       ██

Gary    1/1       ██

Andra   0         

──────────────────────────────────────

Week 4 — Auth Hardening, JoinModal Overhaul & DB Schema

Planning

Sprint 4 scope locked: complete JoinModal signup flow, fix auth/navbar regressions, extend DB schema for members and problems · UserChip (avatar + role badge in navbar) scoped as auth UX milestone · Executive role admin access gap flagged

Design

Signup flow redesigned: scrollable modal with fixed header, prefix-input pattern for GitHub/LinkedIn, cohort stored as ordinal · Navbar UserChip layout finalized: [Avatar] [Role badge] [Log out] for desktop; avatar + hamburger on mobile top bar

Development

JoinModal overhaul (#88): added first_name, last_name, nickname, school, cohort, phone, status, company, occupation, linkedin, github fields; GitHub/LinkedIn as prefix + username; auto-fills from Google OAuth metadata; cohort stored as ordinal
DB schema (#87): added cohort, phone, status, occupation to profiles; difficulty, category, created_by to problems; updated_at to submissions — migrations run in Supabase
UserChip (#95): UserChip component added to navbar — Google profile photo with initials fallback, role badge (P/M/E/A), applied to desktop and mobile top bar
Navbar bug fixes (#97, #98): navbar buttons no longer disappear on interaction; user role now displays correctly after login; bfcache PKCE fix (back button after OAuth no longer breaks login state); duplicate click guard on Login button
signOut reliability (#96): replaced router.push('/') with window.location.href for full page reload — prevents Supabase token refresh timer surviving sign-out

Testing

Google OAuth → pending → approval → member role flow re-validated after JoinModal changes · UserChip rendering tested across desktop and mobile breakpoints · DB migration applied and column presence verified in Supabase

Review & Release

5 issues closed (Paul: 4, Gary: 1) · Sprint 4 feature branch growing toward main merge · DB migrations committed to supabase/migrations/

Sprint Contribution Report — Week 4
──────────────────────────────────────
Name    Done/All  Contribution
──────────────────────────────────────
Paul    5/5       ██████████

Gary    1/1       ██

Sid     0         

Kai     0         

Andra   0         

Dave    0         

Judy    0         

──────────────────────────────────────

Week 5 — Sprint 4 Merge, Events, Profile Page & Design Overhaul

Planning

Sprint 4 merged to main (PR #122) — 5 feature areas, 4 DB migrations, 0 build errors · Post-merge: Copilot security review triaged; 3 issues addressed in follow-up PRs · Events full implementation and Profile page scoped as W5 deliverables · Design token audit kicked off to unify all pages before launch · Custom domain codexperts.ca purchased via Cloudflare (#130) and configured on Vercel (apex + www)

Design

Design system token cleanup: all hardcoded hex and default Tailwind colors replaced with semantic tokens across 22 files · Responsive container pattern (max-w-6xl mx-auto px-4 sm:px-6) standardized across every page · Navbar flattened to direct links; social icons always visible on mobile · Badge system finalized: Graduate → bg-link-bg text-gold, Executive → bg-success-bg text-success; unified across Navbar, UserAvatar, MemberCard

Development

Sprint 4 release (PR #122): Members Page (live Supabase data, combinable filters), Problems Page (Post + List view, Markdown, exec delete/download), Footer + Contact Form (Gmail SMTP via nodemailer), About Us page, Announcements layout
Events Section: main events page redesigned (upcoming + past split); individual event detail page at /events/[id] with description, date, location, tracks, gallery, prev/next nav; PastEventsCards component
Profile Page (/members/[id]): live Supabase fetch via fetchMemberById(); avatar with initials fallback, name, nickname, status badge, conditional LinkedIn/GitHub icons; bio section; edit button visible only to profile owner
Pending page: school-specific club signup prompt — Seneca live link, York Coming Soon; managed via socialLinks.js config (#133)
Executive role fix (#77): canAccessAdminRoutes updated to include Executive — admin routes no longer 403 for execs
Problems table columns (#107): week, due_date, school columns added to problems table via migration
Security hardening: contact form HTML + SMTP header injection sanitized (escapeHtml, sanitizeHeader); adminApproval moved to server-side /api/admin/approve using service role key — client can no longer trigger RLS-bypassed updates directly

Testing

Copilot review on PR #122: 3 security issues triaged → resolved in #123 (contact form injection), #124 (admin approval RLS), #125 (replyTo header sanitization) · Graduate badge dark-bg regression caught and fixed · JoinModal double-submit race condition guarded · Members cohort filter value mismatch ("Fall 2024" vs DB "1") fixed · Status filter 'graduate' → 'graduated' DB value corrected

Review & Release

Sprint 4 merged to main · 17 follow-up PRs merged (security patches, Events, Profile, design overhaul, domain) · codexperts.ca and www.codexperts.ca live

Sprint Contribution Report — Week 5
──────────────────────────────────────
Name    Done/All  Contribution
──────────────────────────────────────
Paul    3/3       ██████

Kai     1/1       ██

Andra   1/1       ██

Sid     0         

Gary    0         

Dave    0         

Judy    0         

──────────────────────────────────────

GitHub Projects — Kanban Board

Column	Description
`Backlog`	Unscheduled items
`Ready`	Committed for current sprint
`In Progress`	Actively being developed
`In Review`	PR open, awaiting review
`Done`	Merged and deployed

Issue & PR Convention

Issue title format: [Type] Short description — types: feat, fix, docs, refactor, chore
All PRs require at least 1 reviewer approval before merge
PRs are linked to their corresponding issue

Branch Strategy

Branch	Purpose
`main`	Production-ready code only
`develop`	Integration branch — all features merge here first
`feature/*`	Individual feature or fix branches

Never commit directly to main. All changes go through develop via reviewed PRs.

Deployment

Layer	Platform	Domain
Frontend	Vercel	codexperts.ca · www.codexperts.ca
Backend	Heroku	auto-assigned Heroku URL
Database & Auth	Supabase	managed

Custom domain codexperts.ca is live. Both apex (codexperts.ca) and www.codexperts.ca resolve correctly.

Folder Structure

codexperts-web/
├── public/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── layout.js        # Root layout (Navbar included)
│   │   ├── page.js          # / Home
│   │   ├── about/           # /about
│   │   ├── mentor/          # /mentor — founder welcome letter
│   │   ├── schedule/        # /schedule
│   │   ├── api/             # Next.js API routes
│   │   │   ├── calendar/    # GET /api/calendar — iCal fetch + parse (no API key)
│   │   │   └── problems/    # Document upload, DOCX→PDF preview/convert
│   │   ├── announcements/   # /announcements
│   │   ├── events/          # /events
│   │   ├── join/            # /join — redirects to / (join flow is Navbar modal)
│   │   ├── problems/        # /problems (member only)
│   │   ├── solutions/       # /solutions (member only)
│   │   ├── members/         # /members (member only)
│   │   └── admin/           # /admin (admin only)
│   ├── components/
│   │   ├── common/          # Navbar, Footer
│   │   ├── mentor/          # Mentor photo editor
│   │   ├── layout/          # PageContainer (About-style max width)
│   │   ├── auth/            # ProtectedRoute, RoleGuard
│   │   └── ui/              # Button, Card, Modal
│   ├── config/
│   │   └── socialLinks.js   # Campus social media links config
│   ├── lib/
│   │   └── supabase.js      # Supabase client singleton
│   ├── hooks/               # useAuth, useRole
│   ├── contexts/            # AuthContext
│   ├── services/            # Supabase service modules
│   └── utils/               # Helper functions, constants
├── docs/
│   ├── design/              # Design system, sitemap, page-level specs
│   ├── guidelines/          # code-conventions, git-workflow, data-loading, judge0-rapidapi-setup
│   ├── meeting-notes/       # Sprint meeting records
│   ├── sprints/             # Sprint plan + weekly specs
│   └── schema/              # Database schema definitions
├── backend/
│   ├── main.py              # FastAPI entry point
│   ├── auth.py              # Supabase JWT + member+ role gate
│   ├── services/            # Judge0 client, Gemini review, rate limiting, Supabase REST
│   ├── Procfile             # Heroku web process
│   ├── .profile.d/          # Optional dyno env (LibreOffice via Heroku buildpack)
│   ├── requirements.txt
│   ├── .env.example
│   └── routers/             # documents (DOCX→PDF), execute, execute/samples, evaluate, submissions
├── scripts/
│   └── sprint-report.js     # CLI tool — GitHub Issue contribution report per member
├── package.json
└── README.md

Getting Started

Prerequisites: Node.js v18+, a Supabase project with Google OAuth and PostgreSQL enabled.

git clone https://github.com/codexperts2024/codexperts-web.git
cd codexperts-web
npm install
cp .env.example .env.local
# Fill in your Supabase config values
npm run dev

App runs at http://localhost:3000.

Environment variables:

Variable	Required	Description
`NEXT_PUBLIC_SUPABASE_URL`	Yes	Supabase project URL
`NEXT_PUBLIC_SUPABASE_ANON_KEY`	Yes	Supabase anon key
`SUPABASE_SERVICE_ROLE_KEY`	Backend only	Never expose to client
`NEXT_PUBLIC_API_URL`	Yes	Heroku FastAPI URL
`CONTACT_EMAIL_USER`	Yes	Gmail address for contact form SMTP
`CONTACT_EMAIL_PASS`	Yes	Gmail App Password (not your account password) — generate at myaccount.google.com/apppasswords

To add York University's club signup link: open src/config/socialLinks.js and set the url field in the clubSignup array for York University.

Sprint contribution report:

npm run report          # all-time closed issues per member
npm run report -- 4     # Week 4 breakdown (closed vs. open)

Built with intention. Deployed with confidence.

Reapplication rollout

Apply supabase/migrations/20261008180000_allow_reapplication.sql after the optional-phone/rejection migration before deploying reapplication UI. Rejected applicants may edit and submit again; only a valid submission returns them to pending, and previous rejection records remain intact. Google sign-in requests account selection; Switch Google account signs out this local session before starting OAuth.

Navigation Menu

Repository navigation

About

Repository files navigation

codeXperts Preview

codeXperts Production

What We Built

Stack & Key Decisions

Team

System Architecture

Agile Process

GitHub Projects — Kanban Board

Deployment

Folder Structure

Getting Started

Reapplication rollout

About

Contributors

Languages

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
backend		backend
docs		docs
public		public
scripts		scripts
src		src
supabase		supabase
tests		tests
.env.example		.env.example
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
CLAUDE.md		CLAUDE.md
README.md		README.md
jsconfig.json		jsconfig.json
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vitest.config.mjs		vitest.config.mjs

Latest commit

History

Folders and files

Repository files navigation

codeXperts Preview

codeXperts Production

What We Built

Stack & Key Decisions

Team

System Architecture

Agile Process

GitHub Projects — Kanban Board

Deployment

Folder Structure

Getting Started

Reapplication rollout

About

Topics

Resources

Stars

Watchers

Forks

Contributors

Languages