#.Overview
This case study examines the development of a comprehensive digital solution designed to increase voluntary blood donation in Panama. The project tackled a critical public health challenge: only 7% of blood donors in Panama are voluntary donors, with the remaining 93% being replacement donors (those donating specifically for a known patient).
This shortage creates a persistent deficit in blood banks and poses risks to public health.
#.The Challenge
The Panamanian health system faces a recurring blood shortage crisis, with authorities frequently alerting the public about critically low supplies. Despite various campaigns to promote blood donation, many challenges persist:
- Lack of understanding about donation requirements
- Complicated appointment scheduling processes
- No effective reminder system for recurring donations
- Fragmented information about donation centers
- No digital verification system for donations
- Absence of a centralized platform to request donors in emergency situations
Additionally, the technical implementation required developing a solution that would work across multiple platforms while maintaining a consistent user experience, strong security measures, and compliance with Panamanian health and data protection regulations.
#.Solution Design Process
#.Initial Concept and Planning
The project began with a thorough analysis of the current blood donation ecosystem in Panama. After identifying key pain points, we established high-level requirements using the MoSCoW prioritization technique (Must have, Should have, Could have, Won’t have), allowing us to focus on delivering maximum value while maintaining flexibility for future iterations.
We adopted an agile development methodology, with one-week sprints, and set up a structured project management approach using Jira Software. This allowed for continuous refinement of requirements and better adaptation to emerging needs throughout the development process.
#.Architecture Design
The solution architecture was designed as a comprehensive ecosystem with several interconnected components:
- Backend Layer: Developed with Laravel (PHP framework) connected to a PostgreSQL database
- Web Application: Responsive design built with React and Inertia.js
- Mobile Applications: Cross-platform development with React Native for both iOS and Android
- Administration Panel: Built with Laravel Backpack for managing all system resources
This architecture ensured data centralization while providing multiple access points for users through different platforms.
#.Design System Creation: Plaqueta DS
A critical early phase was the development of a custom design system named “Plaqueta DS” to ensure consistency across all platforms. The process included:
- Design Token Definition: Creating a set of key-value pairs defining design attributes like colors, spacing, typography, etc.
- Token Transformation Pipeline: Implementing style-dictionary (developed by Amazon’s engineering team) to transform JSON tokens into consumable files for different platforms
- Component Development: Building platform-specific components that maintained visual consistency while respecting each platform’s native patterns
- Cross-Platform Implementation: Developing two versions of the design system - one for React Native (mobile) and one for React DOM (web)
The design system was published as an NPM package for easy consumption across different projects. This approach allowed for a single source of truth for design elements, ensuring that any changes to design tokens would automatically propagate to all platforms.
#.Mockup and Prototyping
Before full-scale development, we created detailed mockups for key screens:
- Login/registration flows
- Home screen for both guest and authenticated users
- Appointment scheduling interfaces
- Donation center maps
- User profile and history screens
These mockups guided the implementation and ensured alignment with the established design system, facilitating a consistent user experience across platforms.
#.Technology Stack
The project leveraged a diverse technology stack:
#.Backend
- Framework: Laravel 10+
- Database: PostgreSQL
- Caching: Redis
- Queue System: Laravel Horizon with Redis
- API Documentation: OpenAPI/Swagger
- Authentication: JWT, OAuth (Google, Apple)
- Email Service: Resend API
#.Frontend (Web)
- Framework: React with TypeScript
- Integration with Backend: Inertia.js
- CSS Framework: Tailwind CSS
- Component Library: DaisyUI
- Maps: Leaflet with OpenStreetMap
#.Mobile
- Framework: React Native with Expo
- Language: TypeScript
- Component Library: Tamagui
- Maps: React Native Maps (Apple Maps on iOS, Google Maps on Android)
- Push Notifications: Expo Notifications with Firebase Cloud Messaging
#.DevOps & Infrastructure
- Version Control: Git with GitLab
- CI/CD: GitLab CI/CD
- Server: Nginx on Ubuntu Server 23.10
- SSL/TLS: Let’s Encrypt with Certbot
- Deployment Automation: Laravel Envoy
#.Development Process
#.Implementation of Core Features
The development followed an incremental approach, prioritizing features based on their value to users:
- User Management: Registration, authentication (including social login with Google and Apple accounts), and profile management
- Donation Centers: Interactive maps showing all available donation centers with custom markers distinguishing between public and private centers
- Appointment Scheduling: Calendar-based appointment booking with state machine-controlled workflow
- Donation Tracking: Recording and verification of completed donations
- Emergency Donor Requests: Platform for patients or relatives to request donors for specific needs
- Digital Verification: QR-based system for validating donations, useful for employers granting time off
#.Technical Highlights
Several advanced technical approaches were implemented:
#.State Machine for Appointment Management
A finite state machine was implemented to control the workflow of appointments, ensuring they followed a predefined path:
Received→Processed→Under Review→Approved→Completed/Cancelled- Each transition triggered appropriate notifications and system actions
#.Asynchronous Processing with Queues
Background processing was implemented for operations that didn’t require immediate user interaction:
- Appointment validation
- Notification sending (both email and push)
- Statistical calculations
- State transitions
#.Security Implementation
Comprehensive security measures were put in place:
- Rate limiting to prevent abuse (100 requests per minute for API, 30 requests per minute for authentication endpoints)
- CAPTCHA implementation on login and registration forms
- Custom validation rules for Panamanian ID format, password strength, and donation timing requirements
- Two-factor authentication for critical actions like account deletion
- Penetration testing against OWASP top vulnerabilities
#.Performance Optimizations
Multiple techniques were employed to ensure optimal performance:
- Redis caching for statistics and frequently accessed data
- CDN for static assets
- Lazy loading for heavy components in the mobile application
- FlashList implementation for better list rendering performance
- Skeleton loaders to reduce layout shifts
- Hermes engine for React Native to reduce startup time
#.Testing Strategy
A comprehensive testing approach was implemented:
- Automated Tests: Unit and functional tests with PHPUnit for backend code
- End-to-End Testing: Using Laravel Dusk with ChromeDriver and Selenium
- Real Device Testing: Testing on multiple physical devices with different operating systems, screen densities, and resolutions
- Security Audits: Penetration testing and vulnerability assessment
- Manual Testing: Testing on multiple physical devices with different operating systems, screen densities, and resolutions
- Performance Testing: Testing the application’s performance with tools like Lighthouse and Web Vitals
#.Key Features
#.For Donors
- User registration with email/password or social accounts (Google, Apple)
- Interactive map of donation centers
- Appointment scheduling with automatic reminders
- Digital donation certificates with QR verification
- Personal donation history tracking
- Notifications for donation eligibility (based on 90-day waiting period)
#.For Donation Centers
- Administrative panel for managing appointments
- Appointment approval workflow
- Donor verification system
- Statistical dashboard
#.For Patients or Relatives
- Platform to request donors for specific patients
- Contact management for emergency situations
#.For Employers
- Digital verification system for donation certificates
- QR code scanning for validating employee donations
#.Results and Impact
The proof of concept successfully demonstrated:
- A functional, multi-platform solution that adheres to Panamanian regulations
- Streamlined appointment scheduling process
- Digital verification system for donations
- Improved information accessibility about donation centers and requirements
- A foundation for gamification to encourage recurring donations
The architecture proved to be extensible, as demonstrated by the additional development of a desktop application using Tauri and Rust for on-site appointment verification.
#.Conclusion
This project represents a comprehensive approach to addressing the blood donation shortage in Panama through technology. By focusing on user experience across multiple platforms while maintaining security, privacy, and performance, the solution removes barriers to donation and provides a foundation for increasing voluntary donations.
The modular architecture and API-centric design ensure that the system can evolve with changing needs and potentially integrate with other health services in the future. The proof of concept successfully validated the technical approach and demonstrated the potential for significant positive impact on public health in Panama.
What sets this project apart is its holistic approach - not just creating another appointment system, but addressing the entire donation ecosystem from information accessibility to appointment scheduling, donor recruitment, verification, and recurring donation encouragement, all while maintaining compliance with local regulations and prioritizing user privacy and security.