Frontend: React-based administrative interface for managing patient-therapist matching workflows.
THIS SOFTWARE IS NOT INTENDED FOR MEDICAL OR MENTAL HEALTH TREATMENT
- This platform is a demonstration project and portfolio piece showing technical capabilities
- DO NOT USE this software to diagnose, treat, cure, or prevent any disease or medical condition
- DO NOT USE this software as a substitute for professional medical advice, diagnosis, or treatment
- This software is not designed to provide emergency services or crisis intervention
- Always seek the advice of qualified health providers with any questions regarding medical or mental health conditions
- If you are experiencing a mental health emergency, contact emergency services immediately
USERS ARE SOLELY RESPONSIBLE FOR LEGAL COMPLIANCE
- Healthcare regulations vary significantly by country, region, and jurisdiction
- Users of this software must ensure full compliance with all applicable laws and regulations, including but not limited to:
- Medical device regulations (e.g., EU MDR, FDA regulations)
- Health data protection laws (e.g., GDPR, HIPAA, national data protection laws)
- Healthcare provider licensing requirements
- Patient consent and privacy requirements
- Professional liability and insurance requirements
- This software is provided as a technical demonstration only
- The authors and contributors make no representations regarding regulatory compliance
- It is your responsibility to obtain all necessary legal approvals, certifications, and licenses before deploying this system
- This system processes sensitive personal health information
- You must implement appropriate security measures and data protection safeguards
- You are responsible for conducting privacy impact assessments and data protection compliance reviews
- Never deploy this system with real patient data without proper legal authorization and security measures
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND. See the LICENSE file for full details.
# Clone the repository
git clone https://github.com/peterhaupt/psychotherapy-matching-frontend.git
cd psychotherapy-matching-frontend
# Install dependencies
npm install
# Start development server
npm startThe application runs at http://localhost:3000
This React-based administrative interface demonstrates a comprehensive patient-therapist matching workflow system. Built as a portfolio project to showcase full-stack development capabilities with modern React patterns and microservices integration.
- Patient Management - Register and track patients seeking therapy
- Therapist Management - Manage therapist profiles and availability
- Matching System - Connect patients with compatible therapists using automatic and manual matching algorithms
- Communication System - Send emails and schedule phone calls with therapists
- Dashboard - Real-time overview of system status and quick access to common tasks
This frontend connects to the Psychotherapy Matching Backend microservices architecture.
| Technology | Version | Purpose |
|---|---|---|
| React | 19.1.0 | UI Framework |
| React Router | 7.6.1 | Client-side routing |
| Bootstrap | 5.3.6 | UI components and styling |
| Axios | 1.9.0 | HTTP client |
| PropTypes | 15.8.1 | Runtime type checking |
Key Decision: JavaScript (not TypeScript) for faster development iteration.
- Infrastructure: API clients, state management, routing
- Patient Management: Full CRUD operations with contact history
- Therapist Management: Full CRUD with availability and status control
- Matching System: Placement requests, automatic matching, and manual match management
- Communication System: Email templates, email sending, phone call scheduling
- Dashboard: Real-time statistics, activity feed, urgent requests, quick actions
- Mock Data: Realistic German test data for all services
- Authentication: User login and authorization
- Advanced Analytics: Detailed reporting views
The application follows a microservices architecture pattern:
Frontend (React SPA)
↓
API Clients (with Mock/Real switching)
↓
Backend Microservices:
- Patient Service (Port 8001)
- Therapist Service (Port 8002)
- Matching Service (Port 8003)
- Communication Service (Port 8004)
Create a .env file in the root directory:
# API Endpoints
REACT_APP_PATIENT_API=http://localhost:8001/api
REACT_APP_THERAPIST_API=http://localhost:8002/api
REACT_APP_MATCHING_API=http://localhost:8003/api
REACT_APP_COMMUNICATION_API=http://localhost:8004/api
# Development Settings
REACT_APP_USE_MOCK_DATA=truenpm start # Start development server
npm test # Run tests
npm build # Build for productionWhen REACT_APP_USE_MOCK_DATA=true, the app uses in-memory mock data:
Test Patients:
- Anna Müller (Berlin) - Searching for therapy
- Thomas Schmidt (München) - Open status
- Julia Wagner (Hamburg) - In therapy
Test Therapists:
- Dr. Maria Weber - Behavioral therapy, available
- Michael Becker - Psychodynamic therapy, waiting list
- Dr. Sandra Fischer - Family therapy, available
- Klaus Hoffmann - Currently blocked
Test Placement Requests:
- Open request for Anna Müller (high urgency)
- In-progress request for Thomas Schmidt
- Matched request for Julia Wagner
Test Email Templates:
- Anfrage Therapieplatz - Request for therapy place
- Erinnerung Therapieplatz - Reminder for therapy request
- Bestätigung Therapiebeginn - Confirmation of therapy start
- Real-time Statistics: Live counts of patients, therapists, requests, and calls
- Activity Feed: Recent activities across all services
- Urgent Requests: Highlighted requests requiring immediate attention
- Today's Calls: Scheduled calls with overdue alerts
- Quick Actions: One-click access to common tasks
- Performance Metrics: Success rates and KPIs with visual indicators
- Auto-refresh: Configurable 30-second automatic data refresh
- Create placement requests for patients
- Run automatic matching algorithm
- View compatibility scores and criteria
- Manually create matches
- Track match status (suggested → contacted → accepted/rejected)
- Filter by status, urgency, and patient
- Complete patient profiles with personal data
- Therapy preferences (type, gender preference, distance)
- Contact history tracking
- Status management (open, searching, in therapy)
- Therapist profiles with specializations
- Availability management
- Status control (active, blocked, inactive)
- Contact history tracking
- Email Templates: Create and manage reusable email templates with variables
- Email Sending: Send personalized emails using templates
- Email History: Track all sent emails with status
- Phone Calls: Schedule and manage phone calls
- Status Tracking: Monitor communication outcomes
src/
├── api/ # API clients and mock implementations
├── components/ # React components
│ ├── common/ # Reusable UI components
│ ├── patient/ # Patient management
│ ├── therapist/ # Therapist management
│ ├── matching/ # Matching system components
│ ├── communication/ # Email and phone call components
│ └── dashboard/ # Dashboard widgets
├── context/ # React Context for state
├── pages/ # Page-level components
└── App.js # Main application component
| Document | Description |
|---|---|
| Environment Setup | Development environment configuration |
| Architecture | System design and technical decisions |
| API Specifications | Backend API endpoints and formats |
| Data Models | Core data structures |
| Project Status | Detailed implementation progress |
| Common Errors | Error solutions and prevention |
| Document | Description |
|---|---|
| Original Requirements | Initial project requirements |
- Chrome (latest)
- Firefox (latest)
- Edge (latest)
- Safari (latest)
- Create a feature branch from
main - Follow existing code patterns
- Ensure all text is in German
- Add PropTypes to new components
- Test with mock data before backend integration
- Check Common Errors to avoid known issues
This project is licensed under the MIT License - see the LICENSE file for details.
For questions or issues, please open an issue on GitHub.