') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); GitHub - njfdev/ncsmc2: 📊 Full-stack Next.js platform powering a North Carolina School of Science and Mathematics competition · GitHub
Skip to content
BranchesTags

Repository files navigation

NC(SMC)² - Math Competition Platform

A modern, full-stack web application for the North Carolina School of Science and Mathematics Math Club Competition, an annual mathematics competition that brings together middle school students across North Carolina. This platform serves as the complete digital hub for registration, competition management, practice materials, and results.

🎯 Project Overview

NC(SMC)² (pronounced "NC-SMC-squared") is a comprehensive competition management system built to handle all aspects of a statewide academic competition. The platform demonstrates modern web development practices, responsive design, and scalable architecture for handling hundreds of participants.

Key Features

  • Dynamic Competition Management: Real-time registration system with participant tracking
  • Interactive Practice Portal: PDF-based problem sets with navigation and year selection
  • Responsive Design: Mobile-first approach ensuring accessibility across all devices
  • Competition Day Interface: Live competitor listings with search functionality
  • Administrative Dashboard: CSV-based participant management and team assignments
  • Sponsor Integration: Professional sponsor showcase and partnership management

🏗️ Architecture & Technology Stack

Frontend

  • Next.js 15.5 with App Router for modern React development
  • TypeScript for type safety and developer experience
  • Tailwind CSS 4.1 for utility-first styling and custom theming
  • React PDF for interactive document viewing
  • React Responsive Masonry for dynamic layout management

Backend & Data

  • Server-Side Rendering with Next.js API routes
  • CSV Processing with csv-parse for participant data management
  • File System Operations for dynamic content serving

Development Tooling

  • ESLint & Prettier with pre-commit hooks via Husky
  • Turbopack for fast development builds
  • TypeScript strict mode for enhanced code quality

Deployment & Infrastructure

  • Docker containerization with multi-stage builds
  • Kubernetes deployment with rolling updates
  • Nginx reverse proxy configuration
  • Custom domain with SSL/TLS termination

🎨 Design System

The application features a carefully crafted design system with:

  • Custom Color Palette:
    • Primary Blue (#346094) - Main brand color
    • Secondary colors for visual hierarchy (Yellow #f4c300, Orange #d57e00, Purple #853175)
  • Typography: Geist font family for modern, readable text
  • Responsive Layout: Mobile-first design with breakpoint-specific optimizations
  • Accessibility: High contrast ratios and semantic HTML structure

📱 Key Components & Features

Competition Registration System

  • Google Forms integration for seamless registration
  • Team-based registration with automatic ID generation
  • Email validation and parent contact management
  • Registration deadline enforcement

Practice Materials Portal

  • Multi-year problem set archive (2023, 2025)
  • Interactive PDF viewers with page navigation
  • Problem categories: Speed Round, Accuracy Round, Team Round, Solutions
  • Downloadable resources for offline practice

Live Competition Interface

  • Real-time participant search and filtering
  • Team assignment display
  • Zoom integration for virtual competition management
  • Competition schedule with detailed timing

Administrative Features

  • CSV-based participant data management
  • Automated team shuffling for fairness
  • Competition statistics and reporting
  • Sponsor management and display

🔧 Technical Highlights

Performance Optimizations

  • Image Optimization: Next.js Image component with lazy loading
  • Bundle Splitting: Automatic code splitting for optimal loading
  • Server-Side Rendering: Fast initial page loads with SEO benefits
  • Static Asset Optimization: Efficient caching strategies

Development Experience

  • Hot Module Replacement: Instant development feedback
  • TypeScript Integration: Full type safety across the application
  • Code Quality: Automated linting and formatting
  • Git Hooks: Pre-commit validation for code quality

Scalability Features

  • Containerized Deployment: Docker for consistent environments
  • Kubernetes Orchestration: Scalable container management
  • Load Balancing: Nginx configuration for high availability
  • Database-Ready: Architecture prepared for future database integration

📊 Competition Metrics

The platform successfully manages:

  • 150+ participants from across North Carolina
  • Multiple competition rounds: Speed (30 problems), Accuracy (10 problems), Team (20 problems)
  • Sponsor partnerships: Jane Street, Art of Problem Solving
  • Prize distribution: Trophies, coupons, branded merchandise

🎓 Educational Impact

This project demonstrates proficiency in:

  • Full-Stack Development: End-to-end application architecture
  • Modern React Patterns: Hooks, Server Components, App Router
  • DevOps Practices: Containerization, CI/CD, monitoring
  • UI/UX Design: User-centered design principles
  • Project Management: Real-world client requirements and deadlines
  • Performance Engineering: Optimization for scale and speed

The NC(SMC)² platform showcases the ability to build production-ready applications that serve real educational communities, combining technical excellence with meaningful social impact in STEM education.

About

📊 Full-stack Next.js platform powering a North Carolina School of Science and Mathematics competition

ncsmc2.org

Resources

Readme
Activity

Stars

2 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages