Skip to content

brayvid/soap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SOAP: A New Polling Platform

July 30th, 2024

Revolutionizing How We Talk About Politicians

Constructive political criticism online is hard to find. Discussions quickly turn mean, and even minor disagreements can escalate into major arguments. Messages will get lost if one's audience is too small, and misunderstood words can lead to backlash.

That's where Soap comes in—a new platform designed to change the way we talk about politicians. Soap is a public utility disguised as a social network where users can describe officials one word at a time. This straightforward approach aims to foster a thoughtful, concise, and reasonable discourse.

Soap allows users to submit a few words for each official, which are then interpreted as ranked choice votes. This method ensures that the most popular words rise to the top, providing a clear and collective voice of the people.

Users can update their choices at any time, allowing for a dynamic and evolving reflection of public opinion. By limiting the number of words each user can contribute, Soap encourages careful consideration and promotes a more civil discussion environment.

Soap is more than just a social platform—it's a movement towards more constructive discourse about our leaders. Join us in shaping a new way to discuss politics, where every word counts and every voice is heard. Together, we can create a more thoughtful, reasonable, and effective conversation.


To do

Phase 1

  • More robust and secure database system (4/18/25)
  • Word cloud (4/19/25)
  • RESTful urls, 404 handling (4/20/25)
  • Rate limit submissions (4/20/25)
  • Switch from table to something more mobile friendly (4/20/25)
  • Valence of words (5/3/25) Phase 1 complete

Phase 2

  • Last 7 days view (7/10/25)
  • User accounts, demographics
  • Public vs logged-in views
  • Ability to undo submissions
  • Ranked choice voting system
  • Locality aware - federal, state, local
  • Universe of politicians
  • Universe of words, definitions
  • Autocomplete & autocorrect
  • NLP word selection tool
  • Users can also submit reasons for their selections

Phase 3

  • Data products
  • Cohort analysis
  • Social features
  • Support multiple languages

Tech Stack

Soap is built with a modern, decoupled architecture. The frontend is a Next.js application that communicates with a dedicated backend API and a separate image processing pipeline.

Frontend (Web Application)

  • Framework: Next.js with React, using the App Router.
  • Architecture: A hybrid rendering model is used for optimal performance and SEO. The homepage is Server-Side Rendered to provide data to users and search engines instantly. The interactive politician pages are Client-Side Rendered ("use client";) to allow for a dynamic user experience and real-time updates.
  • Data Visualization: D3.js is used to render the interactive word bubbles.
  • Real-time Updates: The Socket.IO Client connects to the backend API to receive live updates on the politician pages without requiring a refresh.

Backend (API Service)

  • Runtime: Node.js
  • Web Framework: Express.js is used to build the REST API, which handles business logic and serves data to the Next.js frontend.
  • Database: Data is stored in a PostgreSQL database.
  • Database Access: Knex.js is used for writing database queries and managing schema migrations.
  • Sentiment Analysis: The vader-sentiment library determines the valence of words in real-time. Google Gemini handles more complex cases on a scheduled basis.

Image Processing & Machine Learning

A separate Python script is responsible for analyzing politician portraits. The Node.js server executes this script for each image.

  • Core Language: Python
  • Face Analysis: Google's MediaPipe library detects 478 distinct facial landmarks in a portrait.
  • Image Manipulation: The OpenCV library uses the landmark data to crop, resize, and convert the portrait to grayscale.
  • Numerical Calculation: NumPy does the math to correctly scale and position the landmark coordinates.

Development & Deployment

  • Development Environment: The Next.js development server provides a unified environment with Fast Refresh (hot-reloading).
  • Deployment: The application is deployed on Railway as two distinct services: soap-web for the Next.js frontend and soap-api for the backend.
  • Configuration: The dotenv module loads environment variables from a .env.local file for local development, while production variables are managed securely through the Railway dashboard.
  • Performance: Next.js provides automatic performance optimizations, including code-splitting, asset bundling, and server-side compression, ensuring fast load times.


Home page (7/12/25)



Politician page (7/12/25)



Data dashboard (7/12/25)




© Copyright 2024-2025 soap.fyi. All rights reserved.