MindsConnect

Inspiration

MINDS Singapore supports over 3,000 individuals with intellectual disabilities through community activities - but their registration system relied on scattered tools: Canva posters, Google Forms, WhatsApp messages, and manual Excel tracking. Staff spent hours checking for double-bookings, participants struggled with complex forms, and volunteer matching was entirely manual. We saw an opportunity to build something genuinely accessible and inclusive - not just a typical booking system with accessibility features bolted on, but a platform designed from the ground up for neurodivergent users.

What it does

MindsConnect is an accessible activity hub with three distinct experiences:

For Participants (with intellectual disabilities):

Browse activities with text-to-speech, multi-language support (English, Mandarin, Malay, Tamil), and high-contrast modes
One-click registration with automatic conflict detection - the system prevents double-booking and validates membership limits
Nuanced registration made easy: registration captures wheelchair and payment requirements
Ability to toggle account between adhoc and weekly engagements
Simple dashboard showing "what's next" without overwhelming information
Tinder-style swipe interface to match with activities that interest you, increasing accessibility

For Volunteers:

Intuitive, easy-to-browse platform
Tinder-style swipe interface to match with activities you're passionate about
Instant SMS/WhatsApp confirmations when you match
Visual calendar of all your volunteer commitments

For Staff:

Real-time analytics dashboard tracking participation trends and volunteer coverage
Activity management with automatic capacity monitoring
Visual calendar of all activities with attendance of participants and volunteers

Impact: Reduces registration time from 10-15 minutes (across 5 different tools) to 30 seconds on one platform, while eliminating double-bookings entirely.

How we built it

Backend: FastAPI + PostgreSQL (via Supabase) + SQLAlchemy ORM
Frontend: React 18 + Vite + Tailwind CSS + Framer Motion
Integrations: Twilio (SMS/WhatsApp), ElevenLabs (TTS), Google Translate

Architecture Philosophy: Zero Redundancy We avoided the typical hackathon trap of copy-pasting components. Instead:

Polymorphic components - One ActivityDetailModal serves participants (register), volunteers (match), and staff (edit) via action props
Unified service layer - Single RegistrationService handles both participant registrations and volunteer matches with type-specific validation
Composition over duplication - ActivityCalendar works in "view" or "select" mode, reused across all dashboards

Team Division (4 developers, vertical slices):

Foundation Lead: Auth system, shared components, routing
Activities Lead: Calendar, registration logic, participant dashboard
Engagement Lead: Volunteer swiper, Twilio notifications, match animations
Experience Lead: Staff analytics, accessibility features (TTS, translation, high-contrast)

Challenges we ran into

When starting the project, we initially collaborated horizontally - some people would be in charge of backend while the others would be in charge of frontend, which created bottlenecks at times.
- The solution would be to have each person own full features, such that they are in charge of their own feature from start to finish. This enabled better concurrent, asynchronous collaboration for pushing features out faster.

Accomplishments that we're proud of

Genuine accessibility

Text-to-speech works in 4 languages, not just English
High-contrast mode tested with actual color-blind users
Minimum 44x44px touch targets (many "accessible" sites use 30px)
Keyboard navigation works for 100% of actions (tested with screen reader)

Zero double-bookings

Activities ending exactly when another starts (allowed)
All-day activities vs. timed activities (blocked)
Multi-day workshops overlapping with single sessions (blocked)

Clean Architecture Used component composition to eliminate duplicate code. Entire app is 47 components vs. ~80 in original design.

What we learned

Design:

"Accessible" means different things to different disabilities - Motor impairments need large buttons, cognitive disabilities need simple language, visual impairments need screen readers. Solving for one doesn't solve for all.
Swipe interfaces are surprisingly accessible - We worried volunteers with motor impairments couldn't swipe. Turned out large cards + keyboard arrow keys
single-tap buttons made it more accessible than traditional lists.

Collaboration:

Over-communicate early, under-communicate later - Hour 0-8: Constant Slack messages defining contracts. Hour 8-24: Silent execution, everyone knew their role.
Vertical slices > horizontal layers - Splitting by "backend team" and "frontend team" creates bottlenecks. Each person owning full features (database → API → UI) was way faster.