Files
school_compare/nextjs-app
Tudor Sitaru dfa8058efc
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 12s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 49s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
feat(school-detail): page-wide improvements across 5 sections
History chart
- Strip the redundant school-name title (already the page heading)
- Default to 2 visible lines: Reading, Writing & Maths expected % (teal,
  bold) + Exceeding (gold, lighter); progress score lines hidden by
  default, togglable via legend
- Add dashed national average reference line for RWM (primary) or
  Attainment 8 (secondary) so the school's trajectory is always in
  context
- Add trend summary chip above the chart computed from the data
  ("↓ Peaked at 90% (2016/17), currently 70%")
- Add COVID footnote when 2019/20 and 2020/21 data is absent

Ofsted section
- Collapse the four identical "Outstanding / Outstanding / Outstanding /
  Outstanding" boxes into a single prose line when all sub-grades match
  the overall verdict; show individual cards only when grades differ

SATs sub-metrics
- DeltaChip vs national average on Expected level row for Reading,
  Writing and Maths (national averages already in the API response)

Admissions
- Fix label: "Year 3 places per year" → "Reception places per year" for
  primary schools

Pupils & Inclusion
- DeltaChip + national avg hint on Eligible for pupil premium and
  Pupils receiving SEN support (both keys present in /api/national-averages)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-08 15:13:13 +01:00
..

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.