Skip to content

zeukyr/SwipeForChange

Repository files navigation

SwipeForChange

React Next.js TypeScript Tailwind CSS MongoDB Auth0 Gemini API

🏆🌿 2nd place winner in Deloitte's 'Green AI, and AI for Green' prize track at Hack the 6ix 2026. Check out our DevPost and demo video!

Overview

SwipeForChange bridges the gap between citizens and government by making civic engagement as frictionless as doomscrolling. In just 3 simple steps, users can discover local environmental petitions and take immediate action through contacting their elected representatives.

Often, environmental issues spark outrage on social media, but direct action is lacking. SwipeForChange transforms that outrage into tangible change by offering an intuitive platform for environmental activism.

Features

🔐 Secure Authentication

  • OAuth integration with Auth0 for secure login and account creation
  • Session management with encrypted credentials

🌍 Personalized Discovery

  • Enter your postal code to find your local Member of Parliament and riding
  • Select environmental topics you care about (climate, water, wildlife, plastics, forests, energy)
  • AI-powered petition recommendations based on your interests and location

👆 Swipe-Based Interface

  • Card-based swiping experience similar to Tinder
  • Right swipe to save petitions you support, left to skip
  • Each petition card displays:
    • AI-generated summaries for quick understanding
    • Official petition descriptions
    • Signature counts
    • Topic tags and urgency status

✉️ One-Click Action

Three ways to take action on saved petitions:

  1. Sign Directly: Link to the official parliamentary petition website
  2. Email Your MP: AI-assisted draft emails that you can customize before sending
  3. Social Share: Pre-written social media posts to raise awareness

📊 Smart Petition Management

  • Save petitions for later
  • View petition details including MP sponsorship and riding information
  • Track petition status (open, certified, presented to House of Commons, government response tabled, etc.)
  • Archive completed petitions for a full user history

Tech Stack

  • Frontend: React 18 + Next.js 16 with TypeScript
  • Styling: Tailwind CSS
  • Backend: Next.js API routes with Server-Sent Events (SSE) for streaming
  • Database: MongoDB Atlas for petition and user data
  • Authentication: Auth0 OAuth integration
  • AI — Embeddings & Search: Google Gemini API for vector embeddings used in semantic search within the recommendation algorithm
  • AI — Summarization: Backboard.io LLM for generating shortened petition summaries, email drafts, and social media
  • Deployment: Node.js runtime

Getting Started

Prerequisites

  • Node.js 18+
  • MongoDB instance
  • Auth0 account and credentials
  • Google Gemini API key
  • Backboard.io API access (for petition data)

Installation

  1. Clone the repository:
git clone https://github.com/zeukyr/SwipeForChange.git
cd SwipeForChange
  1. Install dependencies:
npm install
  1. Set up environment variables:
cp .env.example .env.local

Fill in your credentials:

MONGO_URI=mongodb+srv://...
AUTH0_SECRET=...
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=https://your-tenant.auth0.com
AUTH0_CLIENT_ID=...
AUTH0_CLIENT_SECRET=...
GOOGLE_AI_API_KEY=...
BACKBOARD_API_KEY=...
  1. Run the development server:
npm run dev
  1. Open http://localhost:3000 in your browser

Usage

For Users

  1. Sign Up: Create an account via Auth0
  2. Onboard: Enter your postal code and select environmental topics
  3. Discover: Swipe through local environmental petitions
  4. Act: Save petitions, then email your MP, sign directly, or share on social media
  5. Archive: Mark petitions as done so they stay archived

For Developers

The app uses Next.js App Router with client and server components. Key directories:

  • /src/app/api - API routes for petitions, user profiles, and AI services
  • /src/app/components - Reusable React components
  • /src/app/lib - Core business logic and database utilities
  • /src/lib - Shared utilities and external service integrations

Project Structure

src/
├── app/
│   ├── (app)/           # Authenticated app layout
│   ├── api/             # API routes
│   ├── components/      # React components
│   ├── lib/             # Utilities and services
│   ├── layout.tsx       # Root layout
│   ├── page.tsx         # Home page
│   └── globals.css      # Global styles
└── lib/                 # Shared libraries

Key Features Implementation

Petition Matching Algorithm

  • User interest + metrics vector embedding for personalized recommendations
  • Urgency-based sorting (closing soon petitions first)
  • Geographic location (nearby petitions first)

AI-Assisted Content

  • Short & accessible petition summaries for quick comprehension
  • Email drafts & social media posts generated via Blackboard.io based on petition context

Responsive Design

  • Mobile-first approach with Tailwind CSS
  • Optimized for touch interactions (swiping)

About

doomscrolling for social change | Hackthe6ix 2026

Resources

Stars

Watchers

Forks

Contributors

Languages