Context
Part of the Application Layer design (Issue #7). Front 3 of 4.
Scope
Implement the Next.js + React frontend under frontend/. This is the public-facing web application that displays mandatário profiles, SCI scores, inconsistency cards, timelines, and patrimony charts.
Deliverables
Pages (frontend/src/app/)
| Route |
Description |
/ (Home) |
Search bar + featured mandatários (highest/lowest SCI) |
/mandatario/[id] |
Full profile: SCI gauge, timeline, inconsistency cards, patrimony chart |
/sobre |
Methodology explanation, legal basis, open-source info |
Components (frontend/src/components/)
| Component |
Description |
sci-gauge |
Visual SCI score display (colored band: red/orange/yellow/green + number) |
inconsistency-card |
Card with FATO / MÉTRICA / FONTE sections + source links |
timeline |
Chronological event list (votes, expenses, declarations, contracts) |
patrimony-chart |
Line chart: declared wealth per election year vs cumulative salary |
search-bar |
Debounced autocomplete search |
mandatario-summary |
Card for search result lists (name, party, UF, SCI score) |
nav / footer |
Global navigation and footer |
Tech Stack
- Next.js 15 (App Router, SSR for profile pages)
- Tailwind CSS for styling
- Recharts for patrimony chart
- TypeScript throughout
Design Language
- Clean, newspaper-like aesthetic (navy + red + gold palette)
- Monospace for data/metrics, serif for body text
- Cards with left border accent for inconsistencies
- Strictly neutral language — no emojis, no subjective adjectives
- All source links open in new tab to official government portals
Key Concerns
- SSR for profile pages (SEO — politicians should be indexable)
- Responsive design (mobile-first)
- Accessibility (WCAG 2.1 AA)
- API client in
lib/api.ts (fetch wrapper for backend endpoints)
- TypeScript types in
lib/types.ts matching API response schemas
Dependencies
- Depends on: Backend API (Front 2) — codes against API contract
- No Python imports — communicates via REST only
Branch
feat/10-nextjs-frontend (from develop)
Context
Part of the Application Layer design (Issue #7). Front 3 of 4.
Scope
Implement the Next.js + React frontend under
frontend/. This is the public-facing web application that displays mandatário profiles, SCI scores, inconsistency cards, timelines, and patrimony charts.Deliverables
Pages (
frontend/src/app/)/(Home)/mandatario/[id]/sobreComponents (
frontend/src/components/)sci-gaugeinconsistency-cardtimelinepatrimony-chartsearch-barmandatario-summarynav/footerTech Stack
Design Language
Key Concerns
lib/api.ts(fetch wrapper for backend endpoints)lib/types.tsmatching API response schemasDependencies
Branch
feat/10-nextjs-frontend(fromdevelop)