ff7f5487e6
- Migrate from vanilla JavaScript SPA to Next.js 16 with App Router - Add server-side rendering for all pages (Home, Compare, Rankings) - Create individual school pages with dynamic routing (/school/[urn]) - Implement Chart.js and Leaflet map integrations - Add comprehensive SEO with sitemap, robots.txt, and JSON-LD - Set up Docker multi-service architecture (PostgreSQL, FastAPI, Next.js) - Update CI/CD pipeline to build both backend and frontend images - Fix Dockerfile to include devDependencies for TypeScript compilation - Add Jest testing configuration - Implement performance optimizations (code splitting, caching) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
157 lines
4.3 KiB
Markdown
157 lines
4.3 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Copy environment variables
|
|
cp .env.example .env.local
|
|
|
|
# Update .env.local with your configuration
|
|
```
|
|
|
|
### Development
|
|
|
|
```bash
|
|
# Start development server
|
|
npm run dev
|
|
|
|
# Open http://localhost:3000
|
|
```
|
|
|
|
### Building
|
|
|
|
```bash
|
|
# Build for production
|
|
npm run build
|
|
|
|
# Start production server
|
|
npm start
|
|
```
|
|
|
|
### Testing
|
|
|
|
```bash
|
|
# Run tests
|
|
npm test
|
|
|
|
# Run tests in watch mode
|
|
npm run test:watch
|
|
|
|
# Run tests with coverage
|
|
npm run test:coverage
|
|
```
|
|
|
|
### Linting
|
|
|
|
```bash
|
|
# 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.
|