Skip to content

feat: implement frontend/ — Next.js frontend (Front 3) #10

Description

@guidevit-dealsmartai

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)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions