Building Safer Online Spaces with CommonGround

Source: Dev.to

Overview

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

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

Product Summary

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

🎭 Three Persona System

• Safety Seeker – DV survivors with an 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 (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.

Trauma‑Safe Color Palette

Typography & UX Patterns

• Font: Inter (accessibility & readability).
• Animations: Gentle motions via Framer Motion.
• Language: Dignity‑first throughout.
• No dark patterns or forced engagement.
• Clear exit paths on every screen.
• Respectful micro‑interactions.

Demo & Source

• Demo App: [Demo URL]
• GitHub Repository: [GitHub URL]

(Replace placeholders with actual URLs.)

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

Technical Details

Router Architecture

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

Notification System

// Swipeable notification banner with navigation
{
  if (Math.abs(info.offset.x) > 100) onDismiss();
}
onClick={() => navigate(notification.link)}
>
  {/* Notification content */}

Interactive Map with Leaflet

// Real map with markers, popups, and Google Maps integration
{safeLocations.map((location) => (
  <Marker position={location.coords} key={location.id}>
    <Popup>
      <div>{location.name}</div>
      <button onClick={() => openDirections(location)}>Get Directions</button>
    </Popup>
  </Marker>
))}

Front‑end Stack

• Framework: React 18 + TypeScript (type‑safe component development).
• Routing: React Router (Data Mode) with protected routes.
• Build Tool: Vite (fast development & optimized builds).

Styling & Design

• Tailwind CSS v4 – utility‑first styling with custom design tokens.
• Framer Motion – gentle, trauma‑informed animations.
• CSS Variables – custom trauma‑safe color palette.

Key Libraries

Design Principles

1. Trauma‑Informed First

   • Every interaction preserves dignity.
   • Gentle language & non‑triggering prompts.
   • Clear exit paths; 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 & 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 & extend.
   • Type‑safe props & state management.

4. State Management Strategy

   • Local storage for authentication and user preferences.
   • Context API / React Query for data fetching & caching.
   • Minimal global state – favoring component‑level state where possible.

Boarding State

• React hooks (useState, useEffect) for component state
• URL‑based routing for navigation state
• Future‑ready for Supabase backend integration

Accessibility & Responsiveness

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

Design System First

• Established trauma‑safe color palette and typography

Component Library

• Built reusable UI components following the design system

User Flows

• Implemented complete user journeys for each persona

Interactive Features

• Real map integration
• Notifications
• Dynamic content

Polish & Refinement

• Gentle animations
• Micro‑interactions
• UX improvements

Supabase Integration

• Persistent data storage

Real‑time AI Moderation

• Story Circles moderated using AI APIs

Push Notifications

• Mobile‑web experience

Progressive Web App (PWA)

• Offline support

Multi‑language Support

• 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.