Building Safer Online Spaces with CommonGround

This is a submission for the DEV Weekend Challenge: Community

The Community

CommonGround is built for three interconnected communities that need safe, dignified spaces to heal and connect:

1. DV Survivors - Individuals escaping domestic violence who need anonymous, safe spaces to share their stories and connect with others who understand their experiences. They require strict privacy protections and gentle, non-triggering interactions.

2. People Reintegrating After Incarceration - Individuals rebuilding their lives after incarceration who need judgment-free support, community connection, and resources to successfully reintegrate into society.

3. Community Volunteers - Compassionate individuals who want to help vulnerable populations but need clear guidelines, AI-powered safety tools, and structured ways to provide support without causing harm.

This app is specifically designed for audiences who serve these populations and need trauma-informed digital tools that maintain dignity while ensuring safety.

What I Built

CommonGround is a trauma-informed community support web application that creates safe, AI-moderated spaces for vulnerable populations to connect, share, and heal together.

Core Features:

🎭 Three Persona System

• Safety Seeker (DV survivors with anonymity focus)
• Fresh Start (reintegration support with no judgment)
• Community Support (volunteers with guided interactions)

🛡️ Trauma-Informed Onboarding

• Gentle, non-invasive persona selection
• Goal-setting with dignity-first language
• Privacy controls with clear explanations
• No forced disclosures or triggering questions

💬 Story Circles (AI-Moderated Group Spaces)

• Safe group discussions with real-time AI moderation
• Suggested gentle edits to maintain respectful tone
• Private and public circle options
• Story sharing with dignity-preserving prompts

🤝 CoCreate Activities

• Kindness Wall: Community gratitude and affirmation board
• Shared Story: Collaborative storytelling experience
• Interactive Community Map: Real Leaflet-powered map with pinned safe locations, resources, and community spaces with Google Maps integration

📍 Support Services

• Curated safe resources
• Location-based service finder
• Crisis hotlines and immediate support options

🔔 Complete Notification System

• Real-time notification banner with swipe-to-dismiss
• Navigation to relevant content
• Non-intrusive, gentle alerts

📊 Reflection Tools

• Personal progress tracking
• Mood journaling
• Safe self-reflection prompts

Design Principles:

Trauma-Safe Color Palette:

• Soft Indigo (#5C6BC0) - Trust and calm
• Calm Teal (#4DB6AC) - Healing and growth
• Warm Amber (#FFB74D) - Hope and warmth

Typography: Inter font family for accessibility and readability

UX Patterns:

• Gentle animations with Motion (Framer Motion)
• Dignity-first language throughout
• No dark patterns or forced engagement
• Clear exit paths on every screen
• Respectful micro-interactions

Demo

Video URL

Demo App URL

Code

Github URL

How I Built It

This is a fully functional web application built with Figma Make. The app includes:

• ✅ Complete authentication flow with persona selection
• ✅ Three-step trauma-informed onboarding
• ✅ Full dashboard with all features accessible
• ✅ Working Story Circles with real chat interface
• ✅ Interactive CoCreate activities including real map functionality
• ✅ Support services directory
• ✅ Notification system with routing
• ✅ Profile management
• ✅ Responsive design for mobile and desktop

Key User Flows:

1. Login → Select Persona → Onboarding (Welcome → Goals → Privacy) → Dashboard
2. Dashboard → Story Circles → Join Circle → Share Story
3. Dashboard → CoCreate → Interactive Map → Explore Safe Locations
4. Notification Banner → Click → Navigate to relevant feature

Key Technical Implementations:

Router Architecture:

// React Router Data Mode with protected routes
export const router = createBrowserRouter([
  {
    element: <RootLayout />,
    children: [
      { path: '/login', Component: Login },
      { path: '/', element: <ProtectedRoute><Welcome /></ProtectedRoute> },
      { path: '/home/*', element: <OnboardingCheck><HomeDashboard /></OnboardingCheck> },
      // ... more routes
    ],
  },
]);

Notification System:

// Swipeable notification banner with navigation
<motion.div
  drag="x"
  onDragEnd={(_, info) => {
    if (Math.abs(info.offset.x) > 100) onDismiss();
  }}
  onClick={() => navigate(notification.link)}
>

Interactive Map with Leaflet:

// Real map with markers, popups, and Google Maps integration
<MapContainer center={userLocation} zoom={13}>
  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
  {safeLocations.map(location => (
    <Marker position={location.coordinates}>
      <Popup>
        <a href={googleMapsUrl} target="_blank">Get Directions</a>
      </Popup>
    </Marker>
  ))}
</MapContainer>

How I Built It

Core Technologies:

Frontend Framework:

• React 18 with TypeScript for type-safe component development
• React Router (Data Mode) for client-side routing with protected routes
• Vite for fast development and optimized builds

Styling & Design:

• Tailwind CSS v4 for utility-first styling with custom design tokens
• Motion (Framer Motion) for gentle, trauma-informed animations
• Custom trauma-safe color palette defined in CSS variables

Key Libraries:

1. Lucide React - Beautiful, accessible icons throughout the interface
2. React Leaflet - Interactive community maps with real geolocation
3. date-fns - Date formatting for timestamps and schedules
4. AnimatePresence - Smooth enter/exit animations for modals and notifications

Architecture Decisions:

1. Trauma-Informed First

• Every interaction designed to preserve dignity
• Gentle language and non-triggering prompts
• Clear exit paths and no forced engagement
• Privacy by default with opt-in sharing

2. Persona-Based Experience

• Three distinct user journeys based on needs
• Personalized onboarding for each persona
• Tailored content and features per user type
• Flexible navigation adapting to user context

3. Component-Driven Architecture

• Reusable, modular components
• Consistent design patterns across features
• Easy to maintain and extend
• Type-safe props and state management

4. State Management Strategy

• Local storage for authentication and onboarding state
• React hooks (useState, useEffect) for component state
• URL-based routing for navigation state
• Future-ready for Supabase backend integration

5. Accessibility & Responsiveness

• Mobile-first responsive design
• Semantic HTML throughout
• Keyboard navigation support
• Screen reader friendly structure

Development Workflow:

1. Design System First - Established trauma-safe color palette and typography
2. Component Library - Built reusable UI components following design system
3. User Flows - Implemented complete user journeys for each persona
4. Interactive Features - Added real map, notifications, and dynamic content
5. Polish & Refinement - Gentle animations, micro-interactions, and UX improvements

Future Enhancements:

• Supabase Integration for persistent data storage
• Real-time AI Moderation for Story Circles using AI APIs
• Push Notifications for mobile web experience
• Progressive Web App features for offline support
• Multi-language Support for broader accessibility
• Analytics Dashboard for program administrators

---

Built with dignity, designed for healing, powered by community.

CommonGround represents the future of trauma-informed digital services for vulnerable populations - where technology serves humanity with respect, safety, and compassion.