An empathy-first peer-support web application with opt-in anonymity, strong moderation, crisis workflows, privacy-by-design, and modular social spaces.

• Landing/Trust Page: Clear mission, safety notice, crisis links, privacy tagline
• Onboarding Flow: Two paths (anonymous & identified) with minimal data collection
• Home Feed: Community stream with filters (All/Local/Anonymous/Topics)
• Groups/Circles: Topic-based communities (public, private, invite-only)
• Chat: 1:1 and group chat with real-time features
• Share/Post Composer: Step-by-step flow with safety checks and risk detection
• Personal Dashboard: Stories, mood tracker, achievements, settings
• Resources & Emergency: Crisis lines, international hotlines, local resources
• Identity & Anonymity Settings: Privacy controls and data audit
• Admin/Moderator Dashboard: Moderation queue, analytics, user risk management

• Three Identity Modes: Fully anonymous guest, pseudonymous account, verified account
• Privacy by Design: Minimal data collection, encrypted storage, clear consent
• Safety & Moderation: Automated detection, community reporting, human moderators
• Crisis Workflows: Immediate help UI, crisis line integration, escalation protocols
• Accessibility: WCAG AA/AAA compliant, keyboard navigable, screen-reader tested
• Responsive Design: Mobile-first, large tap targets, minimized typing

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: React Icons
• State Management: Zustand (for future use)

• Node.js 18+
• npm or yarn

1. Install dependencies:

npm install

1. Run the development server:

npm run dev

1. Open http://localhost:3000 in your browser.

app/
  ├── page.tsx              # Landing/Trust page
  ├── onboarding/           # Onboarding flow
  ├── home/                 # Home feed
  ├── share/                # Post composer
  ├── groups/               # Groups listing and detail
  ├── chat/                 # Chat interface
  ├── dashboard/            # Personal dashboard
  ├── resources/            # Crisis resources
  ├── settings/identity/    # Identity & privacy settings
  └── admin/                # Admin/moderation dashboard

• Empathy-First: Supportive, non-judgmental tone throughout
• Privacy by Design: Minimal data collection, user control
• Safety First: Automated detection, moderation, crisis workflows
• Accessibility: WCAG compliant, keyboard navigable
• Mobile-First: Responsive design, large tap targets

• Primary: Soft blues (#0073e6) - Trust, calm
• Support: Soft greens (#4cbe82) - Growth, support
• Crisis: Warm orange (#ff8f00) - Urgency, attention

• Real-time WebSocket integration for chat
• Backend API integration
• Database setup
• Authentication system
• Moderation tools backend
• Analytics dashboard
• Mobile app

This project is for educational/demonstration purposes.