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:
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.
People Reintegrating After Incarceration - Individuals rebuilding their lives after incarceration who need judgment-free support, community connection, and resources to successfully reintegrate into society.
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
Code
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:
- Login → Select Persona → Onboarding (Welcome → Goals → Privacy) → Dashboard
- Dashboard → Story Circles → Join Circle → Share Story
- Dashboard → CoCreate → Interactive Map → Explore Safe Locations
- 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:
- Lucide React - Beautiful, accessible icons throughout the interface
- React Leaflet - Interactive community maps with real geolocation
- date-fns - Date formatting for timestamps and schedules
- 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:
- Design System First - Established trauma-safe color palette and typography
- Component Library - Built reusable UI components following design system
- User Flows - Implemented complete user journeys for each persona
- Interactive Features - Added real map, notifications, and dynamic content
- 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.
Top comments (1)
Nice to meet someone else who also cares about helping people reintegrate into society after incarceration. It's been an interest of mine for years. :)