RALLY
Yo, I melted my mind on this web-site and I’m genuinely proud of how it turned out.
So, I finally finished building this project I’ve been working on. It’s called RALLY. It’s completely free, there are no accounts to make, and it’s just a straight-up tool to help you and your family handle emergencies.
We all like to think we’d keep our cool if something crazy happened, but the truth is, most of us just freeze. I know I would. I built RALLY for that exact moment when your brain just stops working.
Here’s how it all comes together. You start by sorting out your emergency plan. Just the basics: your family's meeting spot, who to call, any meds you need. Then you build out your emergency kit checklist—the water, the flashlight, all of it. You can even drop in your local shelters and safe spots.
But the best part is the Family Circle. You and your people set up a private group with a shared password. The app encrypts your messages right there on your phone before they even leave the device. So, nobody—not me, not the servers, nobody—can see what you're saying to your family. It’s completely locked down.
And then there’s the Siren. Imagine something happens and you can’t even type a text. You just press and hold the big red button for two seconds. A loud siren goes off on your phone and instantly rings on everyone else's phone in your circle. If the internet is totally down, it automatically drops a one-tap link so you can send a direct SMS over your phone's normal network.
The whole thing works offline and you can install it to your home screen just like a regular app. No app store, no ads, no tracking.
For me, the whole reason for building this comes down to one thing. In a real crisis, tech shouldn't make things more complicated. It should just be a bridge that connects people. RALLY is basically my way of making sure that when things go sideways, no one in your circle has to face it alone.
Tech stack
- Cursor
- Vercel
Links
Prompt
🎨 Phase 1: v0 (Modular UI & Visual Design)
Goal: Generate a highly polished, separated HTML/CSS structure focused purely on the "Living Canvas" aesthetic.
Prompt for v0:
Act as an expert Frontend UI/UX Designer. I am building 'RALLY', a public resilience PWA. Generate the complete structural HTML and custom CSS for this app, but DO NOT output a single monolithic file. Structure the output into separate files:
index.html
css/variables.css (colors, fonts, spacing)
css/layout.css (grid, sections, header, responsive rules)
css/components.css (cards, buttons, inputs, siren overlay, rings)
css/animations.css (Living Canvas particles, reveal transitions, pulse effects)
Design Requirements:
Dark theme (Navy #07101c), glassmorphism, teal/blue/amber/red accents.
Living Canvas: Background with animated radial gradients and a <canvas id="particles"> for floating dots.
Readiness Rings: Use inline SVG with concentric circles (Personal, Family, Home, Neighborhood) ready for stroke-dashoffset animations.
Layout Sections: Header (Status, Language, Install Btn), Hero, Plan Form, Kit Checklist, Family Circle (Topic/Pass/Members), Massive Siren Button + Alert Overlay, Drills, Shelters, and Wallet Card.
Responsiveness: Mobile-first, RTL support via CSS logical properties (use margin-inline-start instead of margin-left), and safe-area insets for iOS.
Include empty placeholders (like <script type="module" src="src/main.js"></script>) so I can hand this off to a backend logic developer. Focus entirely on world-class aesthetics and fluid CSS.
🧠 Phase 2: Cursor (Architecture, Logic & PWA)
Goal: Take the UI and build a modular JavaScript engine with Vite, separating concerns for perfect performance.
Prompt for Cursor:
Act as a Senior Frontend Architect. I have the HTML/CSS UI files for 'RALLY'. I need you to set up a modern Vanilla JS project using Vite and write the complete, production-ready logic.
Architecture & Modules (Do not use one giant JS file):
src/main.js (Entry point, initializes UI and modules).
src/i18n.js (Translation dictionary for EN, ES, ZH, HI, AR, FA. Handles RTL toggling and DOM injection).
src/store.js (LocalStorage state management for Plan, Kit, Shelters, Members).
src/crypto.js (Web Crypto API: PBKDF2 key derivation, AES-GCM encryption/decryption).
src/network.js (ntfy.sh integration: EventSource for SSE subscription, fetch for publishing, offline detection, and BroadcastChannel for same-device sync).
src/audio.js (Web Audio API: generate the 10-second two-tone siren sweep, play/stop functions).
src/ui.js (DOM manipulation, event listeners, ring calculations, scroll reveals, particle canvas).
Key Features to Implement:
Encryption: Messages must be encrypted before sending to ntfy.sh and decrypted upon receipt.
Siren Flow: Press-and-hold for 2 seconds -> Play audio -> Broadcast locally -> Send via ntfy -> If fails (offline), show SMS fallback links.
PWA: Create a public/manifest.webmanifest, a public/sw.js (using Workbox or custom caching for offline support), and register it in main.js.
Optimization: Ensure the particle canvas uses requestAnimationFrame and pauses when the tab is hidden. Add prefers-reduced-motion media queries.
Provide the exact package.json dependencies (e.g., vite, vite-plugin-pwa) and terminal commands to initialize the project.
🚀 Phase 3: Vercel (Deployment & CI/CD)
Goal: Deploy the multi-file Vite project securely, ensuring the PWA and caching are correctly configured.
Prompt for Vercel / Terminal:
Act as a DevOps Engineer. I have a multi-file Vite project for 'RALLY' with a Service Worker and Manifest.
Provide the exact steps and configurations to:
Deploy: Run npm run build and deploy the dist folder to Vercel via CLI (bypassing Git for privacy).
Vercel Config: Write the exact vercel.json needed for a Vite SPA. Ensure headers are set so that sw.js and manifest.webmanifest are served with the correct Content-Type and Cache-Control (no-cache for the service worker to allow updates, long-cache for hashed assets).
Custom omain: Steps to connect a custom domain via Vercel Dashboard and configure DNS (A record 76.76.21.21, CNAME cname.vercel-dns.com) with automati3 likes