15

Citizens Draft

A full-stack collaborative legislative platform that democratized lawmaking by enabling citizens to create, collaborate on, and vote on legislative proposals. Built with Next.js, TypeScript, Clojure, and GraphQL.

GitHub Website
Screenshot 1Screenshot 2Screenshot 3Screenshot 4Screenshot 5Screenshot 6
1 / 6

Citizens Draft: Collaborative Legislative Platform

Democratizing Lawmaking Through Technology

Project Overview

Citizens Draft was a full-stack web platform designed to democratize the legislative process by enabling citizens to view, create, collaborate on, and vote on legislative proposals. The platform served as a bridge between civic engagement and modern technology, making legislation more transparent, accessible, and responsive to citizen input.

Launched in December 2024, the platform successfully attracted significant public interest, achieving 30,000+ views across its website and social media channels, facilitating the creation of approximately 100 legislative bills, and recording over 1,000 citizen votes on various proposals. The project demonstrated the viability of technology-driven civic participation at scale.

The platform was voluntarily suspended due to regulatory considerations regarding overlap with similar government-sponsored initiatives. Despite its early conclusion, Citizens Draft successfully validated the technical architecture and proved the concept of collaborative legislative drafting through digital platforms.

Key Features

Collaborative Bill Drafting

  • Multi-User Collaboration: Citizens could propose amendments and edits to legislative bills
  • Creator Control: Bill creators maintained final approval authority over all suggested changes
  • Version Control: Complete tracking of bill evolution with change history and timestamps
  • Real-Time Editing: Collaborative editing interface with conflict resolution

Bill Categorization System

The platform organized legislation into three distinct categories:

  • Historic Bills: Previously passed legislation serving as reference material with read-only access
  • Current Bills: Active legislation under governmental consideration with citizen feedback capabilities
  • Future Bills: Community-created proposals enabling grassroots legislative innovation

Advanced Voting System

  • Three-Tier Voting: Support, Needs Changes, or Oppose options for nuanced citizen feedback
  • Contextual Reasoning: Optional comment fields for voters to explain their positions
  • Real-Time Analytics: Live visualization of public opinion trends and vote distribution
  • Vote Aggregation: Statistical analysis of voting patterns across demographics and time periods

Accessibility & Transparency

  • User-Friendly Interface: Intuitive design making complex legislative content accessible to all citizens
  • Search & Discovery: Advanced filtering and search capabilities for finding relevant bills
  • Public Analytics Dashboard: Transparent display of engagement metrics and voting statistics
  • Mobile Responsive: Full functionality across desktop, tablet, and mobile devices

Technology Stack

Frontend Architecture

  • Framework: Next.js 14.2.7 / Next.js 15.1.6 (React 18/19)
  • Language: TypeScript 5.x
  • UI Components: Radix UI component library
  • Styling: Tailwind CSS with custom design system
  • Animations: Framer Motion for smooth user interactions
  • State Management: React Context API and hooks
  • Form Handling: React Hook Form with Zod validation
  • Code Highlighting: Highlight.js for legislative text formatting
  • Markdown Support: React Markdown with rehype plugins
  • Analytics Visualization: Recharts for data visualization
  • Authentication UI: Auth0 Next.js integration

Backend Infrastructure

  • Runtime: Clojure (JVM-based functional programming)
  • API Layer: GraphQL with Hasura engine
  • Database: PostgreSQL (via Hasura)
  • Authentication: Firebase Authentication
  • Cloud Storage: Firebase/Google Cloud Storage
  • API Communication: GraphQL Request, Axios

DevOps & Infrastructure

  • Containerization: Docker with Docker Compose orchestration
  • Cloud Hosting: AWS EC2 instances
  • Reverse Proxy: Custom reverse proxy configuration
  • SSL/TLS: Let's Encrypt with Certbot automation
  • Monitoring: AWS CloudWatch for system metrics and logging
  • Firewall: UFW (Uncomplicated Firewall) configuration
  • Version Control: Git/GitHub with container registry

Development Tools

  • Linting: ESLint with Next.js configuration
  • Testing: Jest, React Testing Library, Playwright
  • Error Tracking: Sentry integration
  • Security: reCAPTCHA v3 for spam prevention
  • Database Migrations: Hasura CLI for schema management

Technical Implementation Highlights

Scalable Architecture

Designed and implemented a microservices-based architecture separating frontend presentation, backend logic, and database layers. The system utilized Docker containerization for consistent deployment across development and production environments, with AWS EC2 providing scalable cloud infrastructure.

Real-Time Collaboration

Engineered a sophisticated collaborative editing system allowing multiple users to propose changes to legislative bills simultaneously, with real-time conflict detection and resolution mechanisms ensuring data integrity.

GraphQL API Design

Implemented a comprehensive GraphQL API using Hasura, providing efficient data fetching with precise query capabilities, reducing over-fetching and improving application performance compared to traditional REST architectures.

Security & Authentication

Integrated multi-layered security including Firebase Authentication for user management, reCAPTCHA v3 for bot prevention, SSL/TLS encryption via Let's Encrypt, and comprehensive input validation using Zod schemas.

Cloud Infrastructure Management

Configured and managed AWS EC2 instances with CloudWatch monitoring, automated SSL certificate renewal, firewall management, and Docker orchestration, demonstrating full-stack DevOps capabilities.

Impact & Results

User Engagement

  • 30,000+ Total Views: Combined website and social media traffic
  • ~100 Bills Created: Community-generated legislative proposals
  • 1,000+ Votes Cast: Citizen engagement with active voting participation
  • Strong Early Adoption: Demonstrated market validation for civic technology platforms

Technical Achievements

  • Zero Downtime Deployment: Successful Docker-based deployment pipeline
  • Responsive Performance: Sub-second page loads with optimized Next.js rendering
  • Cross-Platform Compatibility: Seamless experience across all device types
  • Scalable Infrastructure: Architecture capable of supporting 10x growth

Skills Demonstrated

  • Full-Stack Development: End-to-end ownership from database design to UI/UX
  • Functional Programming: Production Clojure application development
  • Cloud Infrastructure: AWS service configuration and management
  • Modern Frontend: React/Next.js with TypeScript and modern tooling
  • API Design: GraphQL schema design and optimization
  • DevOps Practices: Containerization, CI/CD, monitoring, and security
  • Database Management: PostgreSQL with Hasura for complex queries
  • System Architecture: Microservices design and integration

Project Timeline & Status

Launch Date: December 2024

Development Duration: Multi-month full-stack development effort

Current Status: Voluntarily suspended as of early 2025 due to regulatory considerations. The platform was proactively paused when similar government-sponsored civic engagement initiatives were announced, avoiding potential conflicts with official governmental platforms.

Despite the early suspension, Citizens Draft successfully validated its core hypothesis: that modern web technologies can significantly lower barriers to civic participation and make legislative processes more accessible to everyday citizens. The project serves as a technical showcase of integrating diverse technologies—from functional programming languages like Clojure to modern React frameworks—into a cohesive, production-ready platform.

Technical Learnings

Integration Complexity

Successfully integrated a diverse technology stack spanning multiple paradigms (functional programming with Clojure, reactive UI with React, declarative APIs with GraphQL), demonstrating versatility across programming languages and architectural patterns.

Civic Technology Challenges

Gained insights into the unique requirements of civic engagement platforms, including content moderation, democratic voting mechanisms, version control for collaborative documents, and balancing openness with quality control.

Production Deployment

Hands-on experience with complete production deployment lifecycle including cloud infrastructure provisioning, SSL certificate management, container orchestration, monitoring setup, and security hardening.

User-Centric Design

Developed deep understanding of accessibility requirements and user experience design for platforms serving diverse user bases with varying technical proficiency levels.

Project Repository

The project consists of three main components:

  • Frontend: Next.js TypeScript application with modern React patterns
  • Backend: Clojure-based API server with GraphQL integration
  • Infrastructure: Docker Compose configuration with reverse proxy and database services

Note: This project is currently in private repository status.