Constituency Portal — Elected Representative & Public Servant Website Template with Admin Panel & Complaint Management System (Next.js + Tailwind)
A full-stack, production-ready website template for elected representatives, public servants, and civic organisations — anywhere in the world. Built with a "Democratic Premium" design system: deep navy authority, customisable accent colors, and a multilingual engine that can be adapted to any language or region.This is not a brochure site. It ships with a working complaint/grievance submission + tracking system, a private admin panel, dynamic branding controls, and a multilingual i18n foundation — all powered by localStorage, requiring zero backend setup out of the box.The template is built around the Indian MP/MLA context by default, but the architecture is deliberately generic. Rename "Grievance" to "Petition", "Constituency" to "District", swap the language pack, change the accent color — and it works for a City Councillor in the UK, a Senator's office in the US, or a community NGO in East Africa.✦ WHO IS THIS FORElected Representatives — India MPs and MLAs needing a professional, multilingual constituency portal Municipal Councillors, Panchayat members, and Ward Officers wanting a citizen-facing presence State Cabinet Ministers requiring a structured work and project showcase Rajya Sabha members and opposition leaders wanting a transparent public record Elected Representatives — Global Members of Parliament (UK, Canada, Australia, New Zealand, and other Westminster systems) Senators and Congresspersons (US, Brazil, Philippines, Nigeria, and similar structures) City Mayors, County Executives, and District Commissioners worldwide Local Councillors in any country needing a credibility-building digital presence Public Servants & Officials District Collectors and Commissioners (DM offices, Tehsil offices) Government Department heads wanting a public-facing initiative tracker Police Commissioners and Public Safety Officers managing community outreach Public Health Officers running constituency health programme pages Civil Society & Civic Tech NGOs and non-profits running community development programmes — repurpose "Work" as a project portfolio and "Grievance" as a citizen feedback form Think tanks and policy institutes needing a public-facing research and events hub Constituency-level advocacy groups tracking funded initiatives and public commitments Election campaign offices needing a clean, authoritative digital base Developers & Agencies Web developers and agencies building civic or government-adjacent sites for clients anywhere in the world Civic tech freelancers who want a solid, customisable base rather than starting from scratch Political parties needing a replicable template deployable across multiple candidates ✦ WHAT'S INCLUDED — 8 PUBLIC PAGES + FULL ADMIN PORTALPublic-Facing PagesPageWhat it doesHomeHero with impact stats, live news ticker, awards badge, CTA buttonsAboutLeader profile, Playfair Display quote block, career journeyVisionMission pillars, policy priorities with animated scroll revealsWorkProject portfolio with sector filter, fund allocation chart, budget badgesEventsAll / Upcoming / Past filter tabs, date block cards, event type badgesNewsPress articles, Press Kit download, media relations block, newsletter subscribeContactOffice info, message form, constituency helplines, public meeting hoursGrievanceStructured submission form + live tracker with unique Tracking ID lookupAdmin Portal — PrivateSectionWhat it doesOverviewDashboard — grievance metrics and site activity summaryPress & NewsAdd, edit, and delete news articlesConstituency WorkAdd/edit/delete projects — sector, funds, status, locationEventsCreate and manage events with date, time, and typeGrievances InboxFilter by status (New / Under Review / Resolved), reply, Export CSVGalleryUpload and manage photo galleryAnnouncementsPush announcements to the live site ticker in real timeSettingsToggle homepage sections, update site name, logo text, accent colorAnalyticsPage views, unique visitors, grievance resolution rate, top language✦ STANDOUT FEATURESGrievance / Complaint Management System Citizens submit structured complaints — name, phone, village or ward, category, and a description. Each submission generates a unique Tracking ID (GRV-XXXX). Citizens can look up their ID and check status in real time. The admin inbox lets the team filter by status, reply with updates, mark as Resolved, and export the full list as CSV.Multilingual Engine — Globally Extensible Ships with 6 Indian languages out of the box: English, Hindi, Marathi, Tamil, Telugu, and Bengali. Language switcher in the navbar. Noto Sans Devanagari, Tamil, Telugu, and Bengali fonts load automatically for script-accurate rendering. The i18n system is a flat key-value dictionary — adding French, Spanish, Swahili, Arabic, or any other language is simply a matter of adding a new block to translations.js.Dynamic Branding via Admin Settings Update the accent color (default: Saffron #FF6B00), site name, and logo text directly from the Admin Settings panel — no code edits required. All colors are CSS custom properties under the hood, so changes reflect across the entire site instantly.Offline Complaint Support Downloadable PDF grievance forms in English and Hindi for constituents who prefer to submit in person at a local office.Fund Allocation Dashboard The Work page includes a visual breakdown of constituency budget by sector — Infrastructure, Education, Healthcare, Other — with animated progress bars showing percentage allocation.Framer Motion Throughout Page entrance animations, scroll-triggered stat counters, staggered card reveals, smooth modal transitions, and the live scrolling news ticker at the top of every page.Impact Stats Counter Animated number counters on the hero section for key metrics — years of service, crores spent, projects completed, satisfaction rate.✦ DESIGN SYSTEMPhilosophy: Democratic Premium — institutional authority paired with vibrant civic energy.Colors Navy Core #0a1628 Navbar, admin sidebar, section backgrounds Saffron Accent #FF6B00 CTAs, hover states, active badges (fully customisable) Gold Standard #D4A017 Stats, icons, award highlights Base Neutral #F8F9FA Main content area backgrounds Text Primary #1F2937 Text Muted #5A6A7E WCAG AA compliant contrast ratio Typography Barlow Condensed Headings — uppercase, bold, high-impact Inter Body copy, forms, descriptions Playfair Display Italic serif for pull quotes and recognition blocks Noto Sans Series Devanagari, Tamil, Telugu, Bengali scriptsVisual effects: glassmorphism cards, depth shadows, orange underline accents, section dividers with saffron hairlines, badge system for project status and event types.✦ TECH STACKFramework Next.js 14 (App Router) Language JavaScript — no TypeScript, easy to customise Styling Tailwind CSS 4 with @theme CSS variables Animations Framer Motion State lib/store.js synced to localStorage i18n translations.js + useTranslation hook + getLang() helper Data src/data/leader.js — single central config file Icons Lucide React✦ HOW CUSTOMISATION WORKSAll content lives in one file: src/data/leader.jsUpdate the leader name, designation, constituency, party, contact details, all projects, all events, all news articles, team members, gallery photos, grievance categories, and social links — and it all propagates globally across every page.Party or organisation accent color is hot-swappable from the Admin Settings panel with no code changes required.A detailed step-by-step customisation guide — including instructions for global localisation, NGO adaptation, and adding new languages — is included in the README bundled with the download.✦ WHAT YOU GET IN THE DOWNLOAD Full Next.js 14 source code (App Router, JavaScript) All 8 public pages + complete admin portal with 9 sections Grievance submit + track system (localStorage-backed, production-swap-ready) Multilingual engine with 6-language dictionary, extensible to any language Dynamic branding system — accent color, site name, logo all admin-controlled src/data/leader.js seeded with realistic dummy data (Indian political context) translations.js — complete i18n dictionary ready to extend README with setup guide, step-by-step customisation reference, global localisation instructions, and Vercel deployment guide Lifetime access ✦ DEVELOPER NOTEThis template uses a localStorage-based store (lib/store.js) for all state and persistence. There is no database, no auth service, and no backend — making it deployable on Vercel, Netlify, or any static host in minutes. For real civic deployments requiring persistent grievance data, the store is architected for a clean swap to Supabase or Firebase. Admin authentication is mock (localStorage session) and should be replaced with a proper auth provider before going live with real users.Basic familiarity with Next.js and npm is required.✦ QUESTIONSDM on Instagram @starrt.space or browse the full template catalogue at starrt.space
Get it → starrtspace.gumroad.com