Ayeline

• 

  Homepage

Inspiration

Every week, a few people in a room decide your rent rules, your bus route, your water bill and the park your kids play in. The agenda is public, but it's a long PDF in legal language, and the comment deadline passes before most residents hear about it. Civic tech usually looks like a tax form. We wanted it to feel like somewhere you'd choose to spend a minute.

What it does

1) Personal feed: pick who you are (renter, bus rider, parent, senior…), and the items that affect you rise to the top, each with a "Because you rent…" note. 2) Plain official switch: "Consideration of Ordinance 2026-112 approving a Zone Change from C-2…" becomes "Turn the empty Kmart lot into 240 apartments." 3) Quick take: swipe through the whole agenda in a minute. Right to support, left to oppose. 4) Have your say: a comment to the council in under a minute, with sentence starters already filled in. 5) My voice: after the vote, see how each member voted, so your effort has a visible ending. 6) Live 311 service desk: report a pothole or dark streetlight with a photo, get a request number, and follow it from Reported to Fixed. City staff dispatch crews from a live board. 7) City notices: festivals, alerts and town halls, with RSVP headcounts and calendar export.

How we built it

1) Next.js 16 (App Router), React 19, TypeScript and Tailwind CSS v4. No UI or animation library. 2) "Blue Hour" design: a visionOS-style spatial interface. Glass panels float over a canvas flight down a city avenue toward City Hall at dusk. 3) Motion: pure CSS, a few React hooks and React's <ViewTransition>. Cards fly into their item page, and everything turns off under prefers-reduced-motion. 4) Shared backend: Postgres with LISTEN/NOTIFY and server-sent events, so every phone sees the same 311 queue within a moment, even across several server instances. 5) Easy to adapt: everything about the place lives in one TypeScript file, so it works for a city council, a municipal ward or a housing society. 6) Deployed as a small standalone Docker image.

Challenges we ran into

a) Making a full-screen animated city run smoothly (about 1 ms of script per frame) without ever competing with the text. b) Giving out unique request numbers when two people report at the same moment on different servers. We used per-service locks with a unique constraint as a backstop. c) Writing plain-language summaries that simplify without spinning, which is why the official wording is always one tap away.

Accomplishments that we're proud of

a) From opening the app to sending a comment to the council takes about a minute. b) WCAG AA contrast, full keyboard support, screen-reader text for votes, and layouts checked from a 320 px phone to a desktop. c) Private by default: no accounts and no tracking, and photos are shrunk and stripped of location data on the phone.

What we learned

Most people don't skip local democracy because they don't care. They skip it because it's unreadable. Once each decision answers "what does this mean for me?", people engage.

What's next for Ayeline

Sending comments straight to the city clerk, SMS/WhatsApp reminders before deadlines, more languages (Hindi, Marathi, Tamil, Spanish), and importing an official agenda PDF to get draft plain-language summaries.

Built With

• css3
• docker
• html5
• nextjs
• node.js
• postgresql
• react
• tailwindcss
• typescript
• view-transitions-api