CASE STUDY · 03

THE LEADERS

A structured political information platform for Nepal, built to combine news, archives, election coverage, and editorial intelligence.

Git Commits

Main branch history

Deployments

Vercel production and preview releases

Primary Stack

Next.js 16

App Router with TypeScript

Database

MongoDB

Mongoose-backed content and archive layer

Project Overview

The Leaders was conceived as a Nepal-focused political and news platform built to deliver factual, timely, and structured coverage of elections, governance, parliament, parties, leaders, and public affairs.

The implementation direction shows a deliberate move away from a simple chronological news website toward a political knowledge platform with searchable archives, leader profiles, election datasets, bilingual publishing, analytics dashboards, and future AI-assisted editorial workflows.

Core Dependencies and Frameworks

The technology stack was selected to minimize operational overhead while maximizing developer velocity.

Core Framework

Next.js 16.1

Primary application framework using the App Router.

React

Component model for interactive editorial and data-driven interfaces.

TypeScript

Main application language with strict typed UI and data flows.

Styling & UI

Tailwind CSS v4

Utility-first styling system driving the visual language.

Framer Motion

Used for page and component-level interaction polish.

GSAP

Supports richer motion and presentation-driven transitions.

Lucide React

Consistent iconography across interface surfaces.

Data & State

MongoDB

Primary database for content, archives, and structured political data.

Mongoose

ODM layer for schema-based content modeling.

Zustand

Lightweight client-side state for UI and local data interactions.

Infrastructure & Content Tooling

JWT Authentication

Stateless authentication for protected application flows.

Cloudinary

Media management and asset delivery.

Zod + React Hook Form

Validation and controlled editorial/admin forms.

Vercel

Hosting and deployment target for preview and production.

System Data Flow and Security Boundaries

The system is designed in discrete layers, establishing strict boundaries between the client, the server actions, and the database.

>User Roles

#The platform serves public readers, editors, and future newsroom/admin operators, balancing open access to archives and election coverage with protected publishing and management workflows.

>Public Editorial Platform

#Primary reading experience for news, archives, political profiles, timelines, and election coverage.

>Election 2026 Hub

#Dedicated election surface for countdowns, dashboards, charts, districts, candidates, and result-oriented political data.

>Archives & Historical Knowledge

#Search-oriented archive experience for historical documents, perspectives, and timeline-based political memory.

>Editorial Automation Pipeline

>Security Boundary

#Public content remains open while protected authoring and management features rely on JWT-based authentication and server-side data boundaries.

Source Code Organization

A predictable folder structure is critical for a solo developer to maintain velocity over time.

srcMain application source containing routes, components, business logic, and data handling.

appNext.js App Router entry point for public pages, election sections, and likely protected interfaces.

publicStatic assets including images and election data payloads exposed directly to the frontend.

election

candidatesGenerated candidate datasets for the FPTP 2082 election data pipeline.

scriptsUtility and data preparation scripts used to build or normalize election datasets.

designProject design references and visual direction assets.

.agents

skillsRepository-specific agent or workflow skill configuration used during project development.

README.mdPrimary project narrative covering mission, design system, stack, and roadmap.

CHANGELOG.mdVersioned release history documenting feature evolution across the platform.

package.jsonDependency manifest for the Next.js, UI, data, and tooling stack.

next.config.tsFramework-level runtime and build configuration.

components.jsonComponent registry/config file, likely tied to the UI component workflow.

vitest.config.tsTesting configuration for the project’s Vitest setup.

Database Schema Overview

The database direction centers on a structured political content model rather than a flat news feed. MongoDB is used as the primary content store, which aligns with flexible document schemas for articles, leader profiles, election datasets, archive documents, party histories, timelines, and future AI-generated metadata packages.

Zero-Trust Architecture

Database Schema Overview

Editorial Content

SCHEMA

articles

RLS

Political Knowledge

SCHEMA

leaders

RLS

political_parties

RLS

constituencies

RLS

government_updates

RLS

parliament_records

RLS

historical_timelines

RLS

Election Intelligence

SCHEMA

elections

RLS

candidates

RLS

results

RLS

vote_statistics

RLS

seat_tracking

RLS

district_maps

RLS

Media & Workflow

SCHEMA

media_assets

RLS

publication_metadata

RLS

image_prompts

RLS

summaries

RLS

editorial_packages

RLS

source_ingestion

RLS

Migration Matrix

The project explicitly generates normalized and raw candidate datasets for FPTP 2082, showing a schema design that separates cleaned election data from source payloads.

The long-term data model is intentionally structured to support searchable archives, political profiles, election history, and AI-produced metadata rather than treating every entry as an unstructured article.

MongoDB was chosen to accommodate evolving editorial and political knowledge documents while the schema grows alongside election dashboards and archival intelligence features.

Mutation Layer

Content operations appear to be handled through application routes, authenticated flows, scripts, and editorial tooling rather than a simple static publishing process.

Server Action Modules

Editorial content ingestion

Receives and transforms incoming newsroom material into structured content ready for review and publishing.

Election dataset generation scripts

Builds normalized and raw candidate JSON files for official election data workflows.

Admin controls

Supports protected management flows for editorial updates, imports, and operational controls.

Analytics and dashboard endpoints

Power election dashboards, charts, and comparative political data views.

Media handling pipeline

Coordinates uploaded or generated assets through Cloudinary-backed media workflows.

Visual Identity and Styling Rules

The design system focuses on clean and structured presentation, establishing a consistent brand identity.

Principles

Editorial authority with modern digital clarity.
Soft-paper archive aesthetic in light mode and deep-charcoal gravity in dark mode.
High-contrast reading surfaces optimized for political journalism and historical material.
Minimal, premium UI with restrained emphasis on a single brand red.
Typography deliberately separates editorial voice from structured data and archive interfaces.

Visual Identity Guidelines

Brand Red

#B71C1C

Primary brand color for calls to action, active states, and emphasis.

Near Black

#121212

Main dark background for immersive reading and archive presentation.

White

#FFFFFF

Light-mode background and high-contrast text counterpart.

Neutral Gray

#E0E0E0

Borders, muted separators, and secondary UI structure.

Dark Card

#1E1E1E

Card surface used in dark mode content blocks and panels.

Muted Surface

#FAFAFA

Secondary light-mode surfaces for layered editorial layouts.

Typography Scale

Headings / Display

600-700

Bebas Neue

Hero titles, section headings, political impact statements, and uppercase archive display text.

Body / Interface

400-600

Manrope

Article text, UI labels, metadata, descriptions, and reading-focused surfaces.

Accent / Historical Display

400-700

Anton, Cinzel, Oswald

Selective use in banners, archival treatments, and high-emphasis historical contexts.

Engineering Patterns

Architectural Trade-offs and Key Decisions