TudorandClaude Opus 5
a7829d591a
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m3s
PR Checks / Backend Smoke (pull_request) Successful in 8s
PR Checks / Build Backend (no push) (pull_request) Successful in 10s
PR Checks / Build Frontend (no push) (pull_request) Successful in 46s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 15s
leaflet.css paints `background: white; color: #333` on the popup card and its tip. LeafletMapInner binds themed content into it — the school name and the headline figure are var(--text-primary) — so in dark mode #E9EEF0 landed on #FFFFFF at 1.17:1. The two things the popup exists to say were the two least readable things on the page. Every other foreground in that popup failed too, from the same cause: the muted phase line at 2.90:1, the vs-national delta at 1.94:1, the Ofsted badge at 1.74:1. Moving the surface onto --bg-card fixes all of them at once — 13.52, 5.45, 8.14 and 9.11:1 respectively. In light mode --bg-card is #FFFFFF, so the popup renders exactly as it did. globals.css already pulls the rest of Leaflet's chrome onto the tokens, and says why: "this matters most in dark mode, where Leaflet's white attribution bar would otherwise sit on a near-black page." The popup was simply missed. The View Details button needed its own fix. It pairs background:var(--status- above) with a literal white label, which theming the card does not reach: --status-above is #36743F in light but #7FCB8A in dark, taking the label from 5.63:1 to 1.94:1. --text-inverse is the token for ink on a saturated fill, and the popup's own Ofsted badge already uses it. darkThemeSafety already guards this defect class, but only inside .module.css. Neither half of this one lives there — the surface is a third party's, the text is inline in a TSX template — so it scanned clean throughout. Two rules added for the layer it could not see. Fixing the grouped-selector blind spot in its rules() helper was needed to write them: taking only a selector's last line discarded every selector in a grouped rule but the final one, which makes a safety guard fail open. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FuPUioHpxtaiDNagQvjxyM
SchoolCompare Next.js Application
Modern Next.js application for comparing primary school KS2 performance across England.
Features
- Server-Side Rendering (SSR): Fast initial page loads with pre-rendered content
- Individual School Pages: Dedicated pages for each school with full SEO optimization
- Side-by-Side Comparison: Compare up to 5 schools simultaneously
- School Rankings: Top-performing schools by various metrics
- Interactive Maps: Leaflet integration for geographic visualization
- Performance Charts: Chart.js visualizations for historical data
- Responsive Design: Mobile-first approach with full responsive support
- SEO Optimized: Dynamic sitemaps, meta tags, and structured data
Tech Stack
- Framework: Next.js 16 (App Router)
- Language: TypeScript 5
- Styling: CSS Modules + CSS Variables
- State Management: React Context API + URL state
- Data Fetching: SWR (client-side) + Next.js fetch (server-side)
- Charts: Chart.js + react-chartjs-2
- Maps: Leaflet + react-leaflet
- Testing: Jest + React Testing Library
- Validation: Zod
Getting Started
Prerequisites
- Node.js 24+ (using nvm recommended)
- FastAPI backend running on port 8000
Installation
# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Update .env.local with your configuration
Development
# Start development server
npm run dev
# Open http://localhost:3000
Building
# Build for production
npm run build
# Start production server
npm start
Testing
# Run tests
npm test
# Run tests in watch mode
npm run test:watch
# Run tests with coverage
npm run test:coverage
Linting
# Run ESLint
npm run lint
Project Structure
nextjs-app/
├── app/ # App Router pages
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ ├── compare/ # Compare page
│ ├── rankings/ # Rankings page
│ ├── school/[urn]/ # Individual school pages
│ ├── sitemap.ts # Dynamic sitemap
│ └── robots.ts # Robots.txt
├── components/ # React components
│ ├── SchoolCard.tsx # School card component
│ ├── FilterBar.tsx # Search/filter controls
│ ├── ComparisonView.tsx # Comparison interface
│ ├── RankingsView.tsx # Rankings table
│ └── ...
├── lib/ # Utility libraries
│ ├── api.ts # API client
│ ├── types.ts # TypeScript types
│ └── utils.ts # Helper functions
├── hooks/ # Custom React hooks
├── context/ # React Context providers
├── styles/ # Global styles
├── public/ # Static assets
└── __tests__/ # Test files
Environment Variables
| Variable | Description | Default |
|---|---|---|
NEXT_PUBLIC_API_URL |
Public API endpoint (client-side) | http://localhost:8000/api |
FASTAPI_URL |
Server-side API endpoint | http://localhost:8000/api |
NODE_ENV |
Environment mode | development |
Performance Optimizations
- Server-Side Rendering: Initial HTML rendered on server
- Static Generation: Where possible, pages are pre-generated
- Image Optimization: Next.js Image component with AVIF/WebP support
- Code Splitting: Automatic route-based code splitting
- Dynamic Imports: Heavy components loaded on demand
- API Caching: Configurable revalidation for data fetching
- Bundle Optimization: Tree shaking and minification
- Compression: Gzip compression enabled
SEO Features
- Dynamic Meta Tags: Generated per page with Next.js Metadata API
- Open Graph: Social media optimization
- JSON-LD: Structured data for search engines
- Sitemap: Auto-generated from database
- Robots.txt: Search engine crawling rules
- Canonical URLs: Duplicate content prevention
Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
License
Proprietary - SchoolCompare
Support
For issues and questions, please contact the development team.