Alignr

Group plans die in the chat, Alignr brings them to life

Comment 4

Alignr

One link, zero chaos — from idea to done.

Inspiration

I showed up to a gender reveal in blue while everyone else wore pink, because nowhere on the invitation did it say what to wear. The detail just got lost in the group chat chaos.

That's when we thought: we're constantly switching plans, drowning in hundreds of messages, and half the time our events never even happen because the planning process is so messy!

We wanted a place where everything could live. One interactive digital space you could just send out. No more buried RSVPs, no more "wait, what time again?", no more showing up confused. That's why we built Alignr: so plans actually make it out of the group chat, and everyone knows exactly what's happening.

What it does

Alignr transforms group planning chaos into a visual, collaborative workspace. Here's how:

Visual Event Canvas

  • Drag-and-drop planning blocks (notes, checklists, polls, RSVPs, budgets, shared albums) onto a freeform canvas
  • Every event gets a unique shareable link so it's one place for all details
  • Real-time updates visible to all participants instantly
  • Mobile-responsive design that works on any device

Collaborative Decision-Making

  • Group Availability Heatmap: Participants mark when they're free, organizers see overlap in real-time (supports both specific dates and days of week)
  • Voting Polls: Make decisions on locations, activities, or any other options with single or multi-select voting
  • Budget Tracking: Collect anonymous budget preferences (1-5 dollar signs) so everyone's comfortable sharing
  • RSVP Block: Instant visibility on who's coming, who's not, and who's undecided
  • Location Voting: Suggest venues with visual location cards and let participants vote
  • No more 200+ messages trying to find common ground

Smart Organization

  • Task Lists: Collaborative checklists where multiple participants can claim tasks (who's bringing what)
  • Shared Photo Albums: Collect memories from everyone in one place (powered by Firebase Storage)
  • Location Blocks: Vote on venues with visual location cards
  • Note Blocks: Add critical details like dress codes, parking info, house rules with comments and likes
  • Everything visible on one canvas, nothing gets buried

AI-Powered Insights

  • Gemini AI analyzes event type and suggests optimal planning blocks
    • Birthday party → suggests RSVP, poll (food preferences), shared album, task list
    • Work meeting → suggests time availability, task list (agenda items), notes
    • Trip planning → suggests budget tracker, task list (packing), poll (activity choices)
  • Snowflake Cortex AI generates natural language summaries from aggregate data
    • "8 people participated! Friday at 7 PM was selected with 5 votes. Poll results: Pizza won (6 votes). Top contributor: Mira (4 suggestions)."
  • Smart content generation helps write event descriptions, task lists, and suggestions
  • Contextual recommendations based on what blocks already exist

Real-Time Collaboration

  • Live updates across all devices (powered by Firebase Firestore)
  • Multiple people can edit simultaneously without conflicts
  • Two modes: Creator mode for organizers, Guest mode for attendees
  • No account needed for guests - just enter a name and join
  • Works on any device - desktop, tablet, or mobile

Universal Calendar Export

  • One-click "Add to Calendar" button that generates RFC-compliant .ics files
  • Compatible with all major calendar apps:
    • Google Calendar
    • Apple Calendar (iOS/macOS)
    • Microsoft Outlook
    • Any calendar app that supports .ics files
  • Automatic timezone detection ensures event shows at correct time
  • Seamless integration - take finalized plans into the tools you already use

The result: Plans that actually leave the group chat, events where everyone shows up prepared, and a collaborative experience that makes planning fun instead of frustrating.

How we built it

Frontend Stack

  • React + TypeScript + Vite for fast, type-safe development
  • Tailwind CSS with custom purple/white theme (#3F2A52 Jakarta, #7B61FF accents)
  • react-grid-layout for the freeform drag-and-drop block canvas
  • Lucide React icons for clean, consistent UI
  • Custom ICS generator for universal calendar compatibility

Backend & Real-Time

  • Firebase Firestore for real-time data sync across all participants
  • Firebase Auth with phone number authentication (organizers only)
  • Firebase Cloud Functions for serverless backend logic
  • Firebase Storage for shared album photo uploads with CORS and public read access

AI Integration

Dual AI Architecture - We use the best tool for each job:

Google Gemini API (gemini-2.0-flash-exp) for real-time planning:

  • Event type detection (detectEventType)
  • Block suggestions (suggestBlocks)
  • Contextual content generation (suggestBlockContent)
  • Task list generation
  • Description writing assistance

Snowflake Data Cloud + Cortex AI (Mistral-7B) for analytics:

  • Real-time event data pipeline from Firebase
  • Aggregate analytics across all events
  • Natural language insight generation
  • Pattern detection and trend analysis

Calendar Integration

  • RFC-compliant ICS file generation from scratch
  • Support for specific dates and recurring day-of-week patterns
  • Automatic timezone detection and conversion
  • Cross-platform compatibility testing with Google, Apple, and Outlook

Deployment

  • Docker containerization for consistent environments
  • nginx web server and reverse proxy
  • Vite optimized production builds
  • Environment-based configuration for development and production

Challenges we ran into

Drag-and-Drop Canvas Architecture

Implementing the freeform block canvas with react-grid-layout proved more complex than expected. We had to carefully balance flexibility (letting organizers arrange blocks freely) with usability (ensuring blocks don't overlap chaotically). Getting the responsive grid system to work across different screen sizes while maintaining relative positioning took several iterations.

Real-Time State Synchronization

Managing real-time updates across multiple users editing simultaneously required careful thought about data structure and conflict resolution. We had to ensure that when one user adds availability, votes in a poll, or claims a task, everyone sees the update instantly without race conditions or data loss.

We solved this by:

  • Using Firestore's atomic operations for updates
  • Building participant name maps from multiple data sources
  • Implementing backward compatibility for data format changes (e.g., when we changed tasks from single-claimer to multi-claimer)

Anonymous vs. Authenticated User Experience

Balancing two user flows, organizers who authenticate via phone and participants who join with just a name, required careful state management. We wanted participants to have full functionality without the friction of creating accounts, while still maintaining data integrity and preventing abuse.

AI Integration Optimization

Getting useful, contextual suggestions from Gemini AI required extensive prompt engineering. We iterated through multiple prompt designs to ensure the AI understood event context, suggested relevant blocks, and generated helpful content without being overly prescriptive.

Days of Week vs. Specific Dates

Supporting both "specific dates" (e.g., Jan 15, 2025) and "days of week" (e.g., every Monday) required updates across multiple components:

  • AvailabilityHeatmap had to render either dates or day names
  • AvailabilityGrid had to accept both types of date arrays
  • "Click to set event time" had to format differently for each mode
  • Event metadata display had to show appropriate labels ("3 dates" vs "3 days")

What we learned

Technical Lessons

  • Firebase Architecture: We gained deep experience with Firestore's data modeling, understanding when to use subcollections vs. embedded documents, and how to structure data for real-time queries.

  • State Management Complexity: Managing state across authentication, real-time database, local UI state, and AI suggestions taught us the importance of clear data flow patterns and careful use of React hooks (useMemo, useCallback, useEffect).

  • Backward Compatibility Matters: When we changed the task claiming system from single-claimer to multi-claimer, we had to handle both old and new data formats gracefully. This taught us to think about data migrations from the start.

Product Lessons

  • Friction Kills Adoption: Every additional step in the user journey (creating accounts, filling forms, navigating menus) dramatically reduces engagement. We learned to ruthlessly eliminate unnecessary friction.

  • Visual > Textual: People process visual information (heatmaps, layouts, cards) much faster than text. The canvas approach makes complex planning information immediately graspable.

  • Context is King: The same feature (like a poll) needs different behavior in different contexts (single-select vs multi-select, allowing participant options vs not). Building flexible systems that adapt to context is crucial.

Team Lessons

  • Communication is Everything: Regular check-ins, clear task division, and honest discussions about blockers kept us productive even under hackathon pressure.

  • Iterate Quickly: We learned to build MVPs of features, test them, and refine rather than trying to perfect everything upfront.

  • Documentation as You Go: Writing clear commit messages and documenting design decisions saved us countless hours when debugging or onboarding.

Try it out: [https://alignr.vercel.app/]

GitHub: [https://github.com/codedbycupidity/alignr]

Built with ❤️ for cleaner group coordination

Built With

+ 7 more
Share this project:

Updates