Implemented split-view map layout for postcode searches:
- List/Map toggle appears when doing location search
- Map view shows interactive map with school markers on left
- Compact school list on right with distance badges, stats, actions
- Mobile responsive: stacks vertically with map on top
- Updated School type to include distance and total_pupils fields
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Merged the hero title/description into FilterBar component to save
vertical space. The combined block has a gradient background flowing
from cream to white with the search controls below the header.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Reduced padding and title size to eliminate empty feeling, added
decorative coral underline bar for visual interest, and subtle
fade-in animation on page load.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add flex layout to schoolCard for proper content distribution
- Use flex: 1 on schoolMeta to fill available space
- Change margin-top to auto on latestValue to push to bottom
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Move comparison state from hook to shared context provider
- All components now share the same state instance
- Badge count updates immediately when schools are added/removed
- Add key prop to badge to re-trigger animation on count change
- Add storage event listener for cross-tab synchronization
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove padding from Modal's .content wrapper (let children control)
- Remove conflicting width/max-width from SchoolSearchModal
- Modal size classes now properly control the width
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- ComparisonView now uses fetchComparison from lib/api
- SchoolSearchModal now uses fetchSchools from lib/api
- Fixed bug in fetcher function that incorrectly sliced URLs
(url.slice(4) was removing '/com' from '/compare')
This fixes the malformed URL issue where '/api/compare' became '/apipare'.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added better UX and debugging for the comparison screen:
1. Loading state for chart section
- Shows "Loading comparison data..." when schools are selected
but data hasn't loaded yet
- Provides visual feedback to users
2. Enhanced debugging logs
- Log URNs being fetched
- Log API response status
- Log received comparison data
- Better error handling with null state on failure
3. Improved conditional rendering
- Chart shows when data is available
- Loading message shows when waiting for data
- Nothing shows when no schools selected
This helps diagnose any API issues and provides better user feedback
during data loading.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The compare screen and school search modal were not working because
they were fetching from '/api' directly instead of using the
NEXT_PUBLIC_API_URL environment variable that points to the backend.
Fixed client-side fetch calls in:
- ComparisonView: Fetch comparison data with correct API URL
- SchoolSearchModal: Search schools with correct API URL
This ensures client-side requests go to the FastAPI backend at
the configured URL (e.g., http://localhost:8000/api) rather than
trying to hit non-existent Next.js API routes.
Fixes comparison screen showing no data when schools are selected.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1. Added original favicon
- Copied favicon.svg from original frontend
- Added favicon reference to layout metadata
- Professional icon with brand colors
2. Updated logo in navigation
- Replaced emoji with proper SVG logo from original design
- Uses circular target design with crosshairs
- Matches brand identity with coral accent color
3. Removed emoji icons throughout app for professional look
- Removed 📍 (location pin) from school locations
- Removed 🏫 (school building) from school types
- Removed 🔢 from URN labels and section headings
- Kept meaningful symbols (✓, +) in buttons only
- Updated map popup button color to brand coral (#e07256)
Components updated:
- Navigation: Professional SVG logo
- HomeView: Clean location banner
- SchoolDetailView: No decorative emojis in metadata
- ComparisonView: Text-only school information
- SchoolSearchModal: Clean school listings
- LeafletMapInner: Professional map popups
Result: More polished, professional appearance suitable for
educational data platform
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1. Show empty state by default on home page
- Don't fetch or display schools until user searches
- Show helpful message prompting users to search
- Only fetch schools when search params are present
2. Change distance search to miles
- Display 0.5, 1, and 2 mile options instead of km
- Convert miles to km when sending to API (backend expects km)
- Convert km back to miles for display in location banner
- Maintains backend compatibility while improving UX
3. Fix metric labels in rankings dropdown
- Backend returns 'name' and 'type' fields
- Frontend expects 'label' and 'format' fields
- Added transformation in fetchMetrics to map fields
- Dropdown now shows proper labels like "RWM Combined %"
instead of technical codes like "rwm_expected_pct"
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- 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>
