info
What comes with WeCare
Backend, Admin Panel, Customer App, Doctor App, Delivery Partner App, Vendor App, and Landing Page — all included.
Introduction
WeCare is an end-to-end digital healthcare platform connecting patients, doctors, hospitals, pharmacies, and delivery partners in one ecosystem. It comprises a Laravel backend with a Filament admin panel, four React Native mobile apps (customer, doctor, vendor, delivery partner), and a React Landing Page. Patients can book doctor appointments, consult via secure Agora video calls, receive digital prescriptions, manage medical reports and pill reminders, and order medicines with doorstep delivery. The platform supports wallets, earnings and withdrawals, commissions, promo codes, health forums, ratings, FCM notifications, English/Arabic languages, and payments through Stripe, PayPal, Razorpay, Paystack, and Flutterwave — bringing the complete healthcare journey right into the user's hand.
What's Included in the WeCare Project
- Backend — wecare-admin
- Customer App — wecare_customer
- Doctor App — wecare_doctor
- Delivery Partner App — wecare_partner
- Vendor App — wecare_vendor
- Landing Page — frontend
WeCare — Overall Features
WeCare is a complete digital healthcare ecosystem with a Laravel + Filament backend powering four React Native apps and a React Landing Page.
Core Services
- Doctor appointments — in-clinic bookings with time slots, rescheduling & ratings
- Online consultations — secure Agora video calls with doctors & nurses
- Nurse care at home — nurse bookings & remote consultations
- Lab tests — search labs, add tests to cart, order & track
- Pharmacy/e-commerce — medicine catalog, cart, checkout & doorstep delivery
- Health packages — curated checkup packages
Patient Experience
- OTP-based auth, smart GPS location & address book
- Family member profiles, digital prescriptions, EMR/medical records, pill reminders
- In-app chat, push notifications, blogs, FAQs, promo codes, wallet
Business & Finance
- Multi-gateway payments: Stripe, PayPal, Razorpay, Paystack, Flutterwave, M-Pesa
- Wallets, earnings, commissions & withdrawal management for doctors/vendors/hospitals
- Stock management for pharmacies, delivery partner logistics
Management
- Admin panel (Filament): full control over 60+ modules, CMS pages, banners, app settings, FCM broadcasts, Excel imports
- Hospital/receptionist module for patient history & departments
- Bilingual support (English / Arabic)
check_circle
White-Label Solution
The application is built as a white-label solution, allowing customization of branding, configuration, and backend services for each client.
Getting Started
warning
Third-Party Services Not Included
WeCare integrates with various third-party services to provide enhanced functionality. Please note that third-party services are not included in the base package and require separate paid subscriptions or licenses. Below is a breakdown of all third-party services used:
Video / Communication
- Agora (RTC + RTM) — Video consultations, token generation (agora-access-token-generator), real-time messaging — Backend, Customer & Doctor apps
- Twilio — SMS / OTP delivery — Backend
- Pusher — Real-time chat event broadcasting (chat_pusher route) — Backend
Firebase Suite
- FCM (Firebase Cloud Messaging) — Push notifications to all 4 mobile apps (kreait/laravel-firebase, larafirebase, @react-native-firebase/messaging, notifee, react-native-push-notification)
- Firebase Realtime Database — Live data sync (FIREBASE_DB, @react-native-firebase/database)
Payment Gateways
- Stripe — cartalyst/stripe
- PayPal — dedicated controller + RN screen
- Razorpay — razorpay/razorpay + react-native-razorpay
- Flutterwave — flutterwave-react-native (all 4 apps)
- Paystack — react-native-paystack-webview
- M-Pesa — MPESA_PASS_KEY, MPESA_SHORT_CODE
Maps & Location
- RouteMappy — Maps, routing, address search & location services
- MapLibre — alternative map rendering (customer app)
- Geolocation services — @react-native-community/geolocation, Android location enabler
Infrastructure
- AWS S3 — file/storage (AWS_* config keys)
- SMTP mail server — transactional emails (MAIL_* config)
- Redis / Memcached — cache/session drivers (optional, configured in .env)
Admin Panel Extras
- DomPDF — PDF generation (invoices/prescriptions)
- Maatwebsite Excel — Excel import/export
Important: Clients are responsible for procuring and managing their own third-party service accounts and subscriptions. WeCare provides the integration framework only; service credentials, API keys, and associated costs are the client's responsibility.
lightbulb
Prerequisite Knowledge
Note: It's necessary to have a basic knowledge in both server side and mobile app development.
Basic knowledge in mobile application and installation
Basic knowledge about Google Cloud and Firebase
hub Third Party Services
hub Third Party Services
WeCare integrates with several third-party services to provide functionality such as video consultations, maps, notifications, real-time chat, authentication, email delivery, payment processing, and file storage. These services are not included with the purchase package and must be configured using your own accounts and credentials where applicable.
| Service | Purpose | Required |
|---|---|---|
| Agora (RTC + RTM) | Video consultations, token generation, real-time messaging | Yes |
| Twilio | SMS / OTP delivery | Optional |
| Pusher | Real-time chat event broadcasting | Yes |
| Firebase Cloud Messaging (FCM) | Push notifications to all 4 mobile apps | Yes |
| Firebase Realtime Database | Live data sync | Yes |
| RouteMappy Maps | Maps, routing, address search & location services | Yes |
| MapLibre | Alternative map rendering (customer app) | Optional |
| AWS S3 | File storage for documents, prescriptions, and media | Yes |
| SMTP Mail Service | Transactional emails, notifications, password reset | Yes |
| Stripe | Online payment processing | Optional |
| PayPal | Online payment processing | Optional |
| Razorpay | Online payment processing | Optional |
| Flutterwave | Online payment processing | Optional |
| Paystack | Online payment processing | Optional |
| M-Pesa | Online payment processing | Optional |
videocam Agora (RTC + RTM)
WeCare utilizes Agora for secure video consultations between patients and doctors, as well as real-time messaging capabilities. Agora provides high-quality real-time engagement features including video calls, voice calls, and interactive streaming.
- Website: https://www.agora.io/
- Pricing: Free tier available with paid upgrades for higher usage
- Integration: Backend, Customer & Doctor apps
info
Note:
Agora is a paid service that requires a separate subscription or license for production use.
cloud Firebase Services
WeCare uses Google Firebase for push notifications (FCM) and real-time database features. A Firebase project is required to enable these features across all mobile applications.
- FCM (Firebase Cloud Messaging): Push notifications to all 4 mobile apps
- Firebase Realtime Database: Live data synchronization
- Website: https://firebase.google.com/
- Pricing: Free tier available with paid upgrades for higher usage
map RouteMappy Maps
WeCare utilizes RouteMappy as its primary mapping and location service provider. RouteMappy offers customizable mapping capabilities including route calculation, address search, navigation support, service area management, and location-based functionality.
If you require RouteMappy Maps for your application, please contact the RouteMappy team directly.
- Website: https://routemappy.com/
- Email: sales@menpanitech.com
info
Note:
RouteMappy is a paid map service that requires a separate subscription or license.
payments Payment Gateways
WeCare supports multiple payment gateways for online payments. Choose one or more based on your business requirements and region. All gateways are fully integrated and ready for configuration.
storage Infrastructure Services
WeCare requires various infrastructure services for file storage, email delivery, and caching to ensure optimal performance and reliability.
- AWS S3: File storage for documents, prescriptions, profile images, and media (AWS_* config keys)
- SMTP Mail Server: Transactional emails, notifications, and password reset (MAIL_* config)
- Redis / Memcached: Cache and session drivers (optional, configured in .env)
info
Note:
AWS S3 is a paid service with costs based on storage and data transfer usage.
admin_panel_settings Admin Panel Extras
The WeCare admin panel includes additional libraries for document generation and data management.
- DomPDF: PDF generation for invoices, prescriptions, and reports
- Maatwebsite Excel: Excel import and export functionality for data management
warning Important Notice
API keys, payment gateway accounts, SMS credits, email service providers, hosting services, domain registration, SSL certificates, video call service subscriptions, map service subscriptions, and cloud storage costs are not included with the purchase package. Buyers are responsible for creating and maintaining their own third-party service accounts and subscriptions where applicable.
dns Environmental Setup
verified Version Requirements
Ensure the following software versions are installed before proceeding:
Backend Requirements
- PHP: ^8.1 (Laravel 10) — 8.2.12 (XAMPP) / 8.4 system
- Composer: 2.x — 2.7.1
- MySQL/MariaDB: 10.x — 10.4.32 (XAMPP)
Frontend Requirements
- Node.js: >=18 — v20.20.2
- npm: >=9 — 10.8.2
- XAMPP (Apache): any — /opt/lampp
warning
Important:
Using older versions may cause compatibility issues. Always use the recommended versions.
System Requirements
Operating System:
- Windows 10/11 (64-bit)
- macOS Monterey or later
- Linux (Ubuntu 20.04+ or equivalent)
Minimum Hardware:
- Processor: Intel i5 (or AMD equivalent)
- RAM: 8 GB (minimum), 16 GB recommended
- Storage: 500 MB–2 GB of free disk space for dependencies and build files
- Internet: Broadband connection required for downloading dependencies
Software Requirements
| Tool | Version | Notes |
|---|---|---|
| Node.js | v18.x or higher (LTS) | Required to run React and npm scripts |
| npm | v9.x or later | Comes with Node.js |
| PHP | v8.1 or higher | Required for Laravel backend |
| Composer | v2.x or later | PHP dependency manager |
| MySQL/MariaDB | v10.x | Database server |
| Git | Optional | Recommended for version control |
| Code Editor | VS Code (recommended) | For editing and running code |
| Browser | Latest Chrome, Firefox, or Edge | For testing the app |
XAMPP Installation
- Download XAMPP from apachefriends.org
- Install XAMPP on your system
- After installation, start Apache and MySQL servers from the XAMPP control panel
info
Alternative Local Servers:
- Laragon (Windows) - Faster and lighter alternative
- MAMP (macOS/Windows) - Easy to use
- Docker (All platforms) - Containerized environment
- Valet (macOS) - Laravel native development
Composer Installation
- Download Composer from getcomposer.org
- Install Composer on your system
terminal
Verify Your Installation
Run these commands in your terminal/command prompt to confirm all required tools are properly installed:
# Check Node.js version
node --version # Should show v18.x or higher
# Check npm version
npm --version # Should show 9.x or higher
# Check PHP version
php --version # Should show 8.1 or higher
# Check Composer version
composer --version # Should show 2.x or higher
# Check MySQL version
mysql --version # Should show 10.x or higher
check_circle
Success Indicator:
If all commands show the correct versions (or higher), your environment is ready for installation.
error
Troubleshooting:
If any command returns "not found" or shows an older version, please install or update the corresponding software before proceeding.
memory Technology Stack
Complete Technology Stack
WeCare is built using modern and scalable technologies to power customer applications, doctor applications, vendor applications, delivery partner applications, and administrative operations.
code Core Technology Versions
Before installing and running the application, ensure the following technologies and tools are installed with the recommended versions.
React Native
0.77
React
19
Node.js
18+
PHP
8.1+
Laravel
10
Filament
3
MySQL/MariaDB
10.4
React Navigation
7
Tailwind CSS
4
Vite
8
Android SDK
35
iOS Deployment
13+
| Category | Technology | Version | Purpose |
|---|---|---|---|
| Backend — wecare-admin | |||
| Language | PHP | ^8.1 | Server-Side Language |
| Framework | Laravel | 10 | Server-Side Framework |
| Admin Panel | Filament + Filament-Shield | 3 | Admin Dashboard & Roles/Permissions |
| API Auth | Laravel Sanctum | Latest | API Authentication |
| Database | MySQL / MariaDB | 10.4 | Data Storage (Eloquent ORM) |
| Realtime | Pusher | Latest | Chat Broadcast |
| Dependency Manager | Composer | 2.x+ | PHP Package Management |
| Key Backend Libraries | |||
| Firebase SDK | kreait/laravel-firebase + larafirebase | Latest | FCM Push & Realtime Database |
| SMS Gateway | twilio/sdk | Latest | SMS & OTP Services |
| Payment Gateways | cartalyst/stripe · razorpay/razorpay | Latest | Online Payment Processing |
| Video Consultation | agora-access-token-generator | Latest | Agora Token Generation |
| Excel & PDF | maatwebsite/excel · barryvdh/laravel-dompdf | Latest | Excel Import/Export & PDF Generation |
| HTTP Client | guzzlehttp/guzzle | Latest | External API Communication |
| Mobile Apps — Customer / Doctor / Partner / Vendor | |||
| Framework | React Native | 0.77 | Cross-Platform Mobile Development |
| Language | JavaScript / TypeScript | JSX · TS | Customer (JS) · Doctor/Partner/Vendor (TS) |
| State Management | Redux + React-Redux | Latest | Application State Management |
| Navigation | React Navigation | 7 | Native-Stack, Drawer, Bottom-Tabs |
| Video/Voice | Agora RTC + RTM | Latest | Video Consultations (react-native-agora, agora-rn-uikit) |
| Chat | react-native-gifted-chat | Latest | In-App Messaging |
| Maps & Location | react-native-maps, MapLibre | Latest | Location Services & Navigation |
| Places Autocomplete | Google Places Autocomplete | Latest | Address Search |
| Geolocation | react-native-geolocation | Latest | GPS Location Services |
| Push Notifications | @react-native-firebase/messaging | Latest | FCM Push Notifications |
| Notification Handling | notifee · react-native-push-notification | Latest | Local & Push Notification Management |
| Payments (In-App) | Razorpay · Paystack WebView · Flutterwave | Latest | In-App Payment Processing |
| UI Library | React Native Paper | Latest | Material Design Components |
| Icons & Animations | vector-icons · Lottie · Reanimated | Latest | UI Enhancements |
| Image Loading | React Native Fast Image | Latest | Optimized Image Loading |
| Internationalization | i18next | Latest | English / Arabic Language Support |
| JavaScript Engine | Hermes | Latest | Performance Optimization |
| Android Development Environment | |||
| Node.js | Node.js | 18+ | JavaScript Runtime |
| Android SDK | Android SDK | 35 | Android Development Platform |
| Build Tools | Android Build Tools | 35.0.0 | Application Compilation |
| Minimum SDK | Android SDK | 24 | Minimum Supported Android Version |
| Target SDK | Android SDK | 35 | Target Android Version |
| Gradle | Gradle | 8.7.2 | Build Automation |
| Kotlin | Kotlin | 2.0.21 | Android Native Support |
| Android NDK | NDK | 27.1.12297006 | Native Library Support |
| Java | JDK | 17 (Recommended) | Android Development Environment |
| iOS Development Environment | |||
| iOS Deployment Target | iOS | 13+ | Minimum Supported iOS Version |
| Xcode | Xcode | Latest | iOS Development Environment |
| CocoaPods | CocoaPods | Latest | iOS Dependency Management |
| Swift | Swift | Latest | iOS Native Language |
| Landing Page — frontend | |||
| Framework | React | 19 | Frontend Framework |
| Build Tool | Vite | 8 | Build & Development Server |
| CSS Framework | Tailwind CSS | 4 | Styling & UI Design |
| Routing | React Router DOM | 7 | Client-Side Routing |
| HTTP Client | Axios | Latest | API Communication |
| Icons | lucide-react | Latest | Icon Library |
| Linting | oxlint | Latest | Code Quality & Linting |
| Tooling & QA | |||
| Backend Testing | PHPUnit · Pint | Latest | Testing & Code Style |
| Backend Tooling | Laravel Tinker · Sail | Latest | Development Utilities |
| Mobile Bundling | Metro bundler · Babel | Latest | JavaScript Bundling & Transpilation |
| Mobile Linting | ESLint + Prettier | Latest | Code Quality & Formatting |
| Mobile Testing | Jest + React Test Renderer | Latest | Unit & Component Testing |
| Web Linting | oxlint + .oxlintrc | Latest | Frontend Code Quality |
| Server | XAMPP | Apache + MariaDB | Local Development Server |
Hosting & Production Server Requirements
- Apache 2.4+ or Nginx 1.18+
- PHP 8.1 or Higher
- MySQL 5.7+ / MariaDB 10.4+
- SSL Certificate (HTTPS) Recommended
- Cron Job Support
- Minimum 4 GB RAM (8 GB Recommended)
- Minimum 10 GB Available Storage
Important:
Shared hosting, VPS, cloud servers, and dedicated servers are supported as long as the above requirements are met.
warning
Third-Party Services Not Included
WeCare integrates with various third-party services that require separate paid subscriptions. These include:
- Agora — Video consultations and real-time messaging
- Firebase Services — Push notifications (FCM) and Realtime Database
- Payment Gateways — Stripe, PayPal, Razorpay, Flutterwave, Paystack, M-Pesa
- Map Services — RouteMappy for location tracking and navigation
- SMS Services — Twilio for OTP and notifications
- Cloud Hosting — AWS S3 for file storage, SMTP for email
- Pusher — Real-time chat event broadcasting
Important: Clients are responsible for procuring and managing their own third-party service accounts, API keys, and subscriptions.
info
Important Note
Install all required SDKs, development tools, and dependencies using the recommended versions before beginning the installation process. Version mismatches may result in build or runtime issues.
Pro Tip: Use Node Version Manager (NVM) for Node.js version management and Android Studio SDK Manager for maintaining Android SDK compatibility.
view_module Project Dependencies
Project Dependencies Overview
WeCare consists of four mobile applications, a backend, and a Landing Page:
person
Customer App
For patients to book consultations
medical_services
Doctor App
For doctors to manage patients
storefront
Vendor App
For pharmacies & labs
delivery_dining
Partner App
For delivery partners
dns
Backend
Laravel 10 + Filament 3 Admin Panel
language
Landing Page
React 19 + Vite 8 + Tailwind 4
info
Common Base Version: React Native 0.77.1 with React 18.3.1
Node Engine: >= 18 (v20+ recommended)
PHP Version: ^8.1
Backend Dependencies (Composer)
These are the Composer packages required for the WeCare backend (wecare-admin).
| Package | Version | Purpose |
|---|---|---|
| laravel/framework | ^10.0 | Core Laravel framework |
| filament/filament | ^3.2 | Admin panel & dashboard |
| bezhansalleh/filament-shield | ^3.9 | Roles & permissions for Filament |
| laravel/sanctum | ^3.2 | API authentication |
| kreait/laravel-firebase | ^5.10 | Firebase FCM & RTDB integration |
| kreait/firebase-php | ^7.9 | Firebase PHP SDK |
| kutia-software-company/larafirebase | ^1.3 | FCM push notifications |
| twilio/sdk | ^7.16 | SMS & OTP delivery |
| cartalyst/stripe | ^2.4 | Stripe payment integration |
| razorpay/razorpay | ^2.9 | Razorpay payment gateway |
| yasserbelhimer/agora-access-token-generator | ^1.0 | Agora video token generation |
| maatwebsite/excel | ^3.1.48 | Excel import/export |
| barryvdh/laravel-dompdf | ^2.1 | PDF generation (invoices/prescriptions) |
| guzzlehttp/guzzle | ^7.2 | HTTP client for API calls |
| laravel/tinker | ^2.8 | REPL for Laravel |
Core Libraries
These libraries provide the core framework functionality and handle state management, API communication, and date processing across all mobile apps.
| Package | Version | Customer | Doctor | Vendor | Partner | Purpose |
|---|---|---|---|---|---|---|
| react | 18.3.1 | check_circle | check_circle | check_circle | check_circle | UI Library |
| react-native | 0.77.1 | check_circle | check_circle | check_circle | check_circle | Cross-platform mobile framework |
| axios | ^1.8.4 | check_circle | check_circle | check_circle | check_circle | HTTP client for API calls |
| redux | ^5.0.1 | check_circle | check_circle | check_circle | check_circle | State management |
| react-redux | ^9.2.0 | check_circle | check_circle | check_circle | check_circle | React-Redux integration |
| moment | ^2.30.1 | check_circle | check_circle | check_circle | check_circle | Date and time formatting |
| i18next | ^24.2.3 / ^25.6.0 | check_circle | check_circle | check_circle | check_circle | Internationalization |
| react-i18next | ^15.4.1 | check_circle | check_circle | check_circle | check_circle | React i18next integration |
| geofire-common | ^6.0.0 | check_circle | check_circle | check_circle | check_circle | Geo-location queries |
| react-native-get-random-values | ^1.11.0 | check_circle | check_circle | check_circle | check_circle | Random values for crypto |
Navigation Libraries
These libraries handle screen navigation, routing, and tab management within the applications.
| Package | Version | Customer | Doctor | Vendor | Partner | Purpose |
|---|---|---|---|---|---|---|
| @react-navigation/native | ^7.1.6 | check_circle | check_circle | check_circle | check_circle | Core navigation library |
| @react-navigation/native-stack | ^7.3.10 | check_circle | check_circle | check_circle | check_circle | Stack navigation |
| @react-navigation/bottom-tabs | ^7.3.10 | check_circle | check_circle | check_circle | check_circle | Bottom tab navigation |
| @react-navigation/drawer | ^7.3.9 | check_circle | check_circle | check_circle | check_circle | Drawer navigation |
| react-native-screens | 4.10.0 | check_circle | check_circle | check_circle | check_circle | Native screen optimization |
| react-native-safe-area-context | ^5.3.0 / ^5.4.0 | check_circle | check_circle | check_circle | check_circle | Safe area handling |
| react-native-gesture-handler | 2.25.0 | check_circle | check_circle | check_circle | check_circle | Gesture-based interactions |
| react-native-reanimated | 3.17.5 / 3.18.0 | check_circle | check_circle | check_circle | check_circle | Declarative animations |
Maps and Location
These libraries enable map rendering and location tracking within the applications.
| Package | Version | Customer | Doctor | Vendor | Partner | Purpose |
|---|---|---|---|---|---|---|
| react-native-maps | 1.20.1 | check_circle | check_circle | check_circle | check_circle | Map component |
| @maplibre/maplibre-react-native | ^10.2.0 | cancel | cancel | cancel | check_circle | MapLibre GL (Partner only) |
| @react-native-community/geolocation | ^3.4.0 | check_circle | check_circle | check_circle | check_circle | GPS location services |
| react-native-google-places-autocomplete | ^2.5.7 | check_circle | check_circle | check_circle | check_circle | Address autocomplete |
| react-native-android-location-enabler | ^2.0.1 | check_circle | check_circle | check_circle | check_circle | Location enabler dialog |
Video & Communication
These libraries enable video consultations, real-time messaging, and chat functionality.
| Package | Version | Customer | Doctor | Vendor | Partner | Purpose |
|---|---|---|---|---|---|---|
| react-native-agora | ^4.5.2 / ^4.5.3 | check_circle | check_circle | cancel | cancel | Agora video SDK (Customer & Doctor) |
| agora-rn-uikit | ^5.0.2 | check_circle | check_circle | cancel | cancel | Agora UI kit (Customer & Doctor) |
| agora-react-native-rtm | ^1.5.1 | check_circle | cancel | cancel | cancel | Agora RTM (Customer only) |
| react-native-gifted-chat | ^2.8.0 | check_circle | check_circle | check_circle | check_circle | In-app messaging |
Firebase Services
Firebase is integrated to support real-time notifications, data synchronization, and push messaging.
| Package | Version | Customer | Doctor | Vendor | Partner | Purpose |
|---|---|---|---|---|---|---|
| @react-native-firebase/app | ^21.14.0 | check_circle | check_circle | check_circle | check_circle | Firebase core |
| @react-native-firebase/database | ^21.14.0 | check_circle | check_circle | check_circle | check_circle | Real-time database |
| @react-native-firebase/messaging | ^21.14.0 | check_circle | check_circle | check_circle | check_circle | Push notifications (FCM) |
| @notifee/react-native | ^9.1.8 | check_circle | check_circle | check_circle | check_circle | Enhanced local notifications |
| react-native-push-notification | ^8.1.1 | check_circle | check_circle | check_circle | check_circle | Local & push notifications |
| @react-native-community/push-notification-ios | ^1.11.0 | check_circle | check_circle | check_circle | check_circle | iOS push notification support |
UI and Animation Libraries
These libraries enhance the user interface and animation experience.
| Package | Version | Customer | Doctor | Vendor | Partner | Purpose |
|---|---|---|---|---|---|---|
| react-native-paper | ^5.13.1 | check_circle | check_circle | check_circle | check_circle | Material Design components |
| react-native-vector-icons | ^10.2.0 | check_circle | check_circle | check_circle | check_circle | Icon library |
| lottie-react-native | ^7.2.2 | check_circle | check_circle | check_circle | check_circle | Animated illustrations |
| react-native-elements | ^3.4.3 | check_circle | check_circle | check_circle | check_circle | UI component library |
| react-native-linear-gradient | ^2.8.3 | check_circle | check_circle | check_circle | check_circle | Gradient backgrounds |
| react-native-fast-image | ^8.6.3 | check_circle | check_circle | check_circle | check_circle | Optimized image loading |
| react-native-reanimated-carousel | ^4.0.2 | check_circle | check_circle | check_circle | check_circle | Carousel/slider component |
| react-native-toast-message | ^2.2.1 | check_circle | check_circle | check_circle | check_circle | Toast notification messages |
| react-native-haptic-feedback | ^2.3.3 | check_circle | check_circle | check_circle | check_circle | Device haptic feedback |
| react-native-drop-shadow | ^1.0.3 | check_circle | check_circle | check_circle | check_circle | Drop shadow effects |
Payment Integration
The application integrates payment gateways to support secure online transactions.
| Package | Version | Customer | Doctor | Vendor | Partner | Purpose |
|---|---|---|---|---|---|---|
| react-native-razorpay | ^2.3.0 | check_circle | check_circle | check_circle | check_circle | Razorpay payment gateway |
| react-native-paystack-webview | ^5.0.1 | check_circle | check_circle | check_circle | check_circle | Paystack payment gateway |
| flutterwave-react-native | ^1.0.4 | check_circle | check_circle | check_circle | check_circle | Flutterwave payment gateway |
Device Features
These libraries enable the application to interact with native device capabilities.
| Package | Version | Customer | Doctor | Vendor | Partner | Purpose |
|---|---|---|---|---|---|---|
| @react-native-async-storage/async-storage | ^2.1.2 | check_circle | check_circle | check_circle | check_circle | Local data persistence |
| react-native-image-picker | ^8.2.0 / ^8.2.1 | check_circle | check_circle | check_circle | check_circle | Image selection from camera/gallery |
| react-native-fs | ^2.20.0 | check_circle | check_circle | check_circle | check_circle | File system access |
| rn-fetch-blob | ^0.12.0 | check_circle | check_circle | check_circle | check_circle | File download & upload |
| @react-native-community/netinfo | ^11.4.1 | check_circle | check_circle | check_circle | check_circle | Network connectivity monitoring |
| react-native-permissions | ^5.3.0 / ^5.4.0 | check_circle | check_circle | check_circle | check_circle | Permission handling |
| react-native-webview | ^13.13.5 | check_circle | check_circle | check_circle | check_circle | Web content rendering |
| @react-native-clipboard/clipboard | ^1.16.2 | check_circle | check_circle | check_circle | check_circle | Clipboard access |
| react-native-keyboard-controller | ^1.17.0 / ^1.17.3 | check_circle | check_circle | check_circle | check_circle | Keyboard handling |
| react-native-restart | ^0.0.27 | check_circle | check_circle | check_circle | check_circle | App restart functionality |
| react-native-sound | ^0.11.2 | check_circle | check_circle | check_circle | check_circle | Audio playback |
| react-native-image-base64 | ^0.1.4 | check_circle | check_circle | check_circle | check_circle | Image to base64 conversion |
Landing Page Dependencies
These are the dependencies for the WeCare Landing Page (frontend).
| Package | Version | Purpose |
|---|---|---|
| react | ^19.2.8 | Frontend framework |
| react-dom | ^19.2.8 | React DOM rendering |
| react-router-dom | ^7.18.2 | Client-side routing |
| axios | ^1.19.0 | HTTP client for API calls |
| lucide-react | ^1.33.0 | Icon library |
| tailwindcss | ^4.3.3 | CSS framework |
| @tailwindcss/vite | ^4.3.3 | Tailwind Vite integration |
| vite | ^8.2.0 | Build tool & dev server |
| @vitejs/plugin-react | ^6.0.4 | Vite React plugin |
| oxlint | ^1.75.0 | Code linting |
Dependency Summary
person
Customer App:
- Total Dependencies: 60+ packages
- Base Version: React Native 0.77.1
- Node Engine: >= 18
medical_services
Doctor App:
- Total Dependencies: 60+ packages
- Base Version: React Native 0.77.1
- Node Engine: >= 18
storefront
Vendor App:
- Total Dependencies: 60+ packages
- Base Version: React Native 0.77.1
- Node Engine: >= 18
delivery_dining
Partner App:
- Total Dependencies: 60+ packages
- Base Version: React Native 0.77.1
- Node Engine: >= 18
dns
Backend:
- Total Dependencies: 15+ Composer packages
- Base Version: Laravel 10
- PHP: ^8.1
language
Landing Page:
- Total Dependencies: 10+ packages
- Base Version: React 19 + Vite 8
- Node Engine: >= 18
check_circle Shared Libraries
person Customer Only
medical_services Doctor Only
storefront Vendor Only
delivery_dining Partner Only
person Customer Application Guide
How Patients Use the Application
1
Splash → Phone Check → OTP Verify → Register/Login
- Download the WeCare Customer App
- App launches with Splash Screen, then prompts for Phone Number
- Enter your mobile number – an OTP will be sent via SMS
- Verify the OTP, then complete registration with full name, email, password
- For returning users, login via OTP or password
2
Enable Location / Select Address
- GPS Location is automatically detected for accurate service
- Google Places Autocomplete for manual address search
- Save frequent addresses to Favourites for quick selection
3
Dashboard Overview
- Banners – Promotional offers and health campaigns
- Quick Access Categories – Doctors, Nurses, Labs, Pharmacies
- Browse available Health Packages and Blogs
4
Book a Doctor Appointment
- Search Doctors by name, specialty, or hospital
- View Doctor Profile – qualifications, experience, ratings, fees
- Select Date & Time Slot from available schedule
- Add Patient Details – for yourself or family member
- Choose Consultation Mode: In-clinic or Agora Video Call
- Pay via Stripe, PayPal, Razorpay, Paystack, Flutterwave, or Wallet
- Appointment confirmed – receive notification
- After consultation, receive Digital Prescription
- Rate the Doctor after the visit
5
Order Medicines & Lab Tests
- Browse Pharmacy – search medicines by name or category
- Browse Lab Tests – search diagnostic tests by name
- Add items to Cart with quantity selection
- Apply Promo Code for discounts
- Checkout and pay via multiple gateways
- Order is sent to Vendor (Pharmacy/Lab)
- Vendor prepares the order and hands over to Delivery Partner
- Track order status in real-time
- Rate the vendor and delivery partner
6
Additional Features
- In-App Chat – Communicate with doctors/nurses
- Pill Reminders – Set medication reminders
- Wallet – View balance, top-up, transaction history
- Family Member Profiles – Manage profiles for family
- Medical Records – View EMR/health history
- Notifications – Receive real-time updates
- Blogs & FAQs – Health information and support
lightbulb
Pro Tip: Enable notifications to receive appointment reminders and order updates. Save your frequent addresses and family profiles for faster booking.
medical_services Doctor Application Guide
Doctor App Workflow
1
Splash → OTP Login/Register → Upload Documents
- Download the WeCare Doctor App
- Enter your mobile number and verify via OTP
- Complete registration with personal details (name, email, password)
- Upload KYC Documents for verification:
- Medical License / Registration Certificate
- Qualification Certificates
- Profile Photo
- Identity Proof (Aadhaar, PAN, etc.)
- Submit for Admin Approval – account becomes active upon approval
2
Complete Profile & Settings
- Qualification & Experience – Add medical qualifications and years of practice
- Clinic Address – Set consultation location details
- Bank Details – Add bank account for withdrawals
- Set Timings – Configure consultation hours
- Time Slots – Define appointment slot durations
- Leaves – Mark unavailable dates
- Booking Settings – Configure fees and booking preferences
3
Go Online / Offline
- Use the online/offline toggle on the home screen
- When Online, you become visible to patients and can receive booking requests
- Set your consultation mode (In-clinic / Video / Home Visit)
4
Receive Consultation Requests
- Booking Requests – In-clinic appointments
- Consultation Requests – Video or home visit consultations
- Each request shows patient details, date/time, and consultation type
- Review patient history and medical records
5
Accept or Reject Request
- Review patient details and consultation type
- Tap "Accept" to proceed or "Reject" if not available
- Once accepted, the patient is notified and consultation is confirmed
6
Conduct Consultation
- In-Clinic – Physical examination at clinic/hospital
- Agora Video Call – Secure video consultation via integrated Agora SDK
- Home Visit – Visit patient at their location
- Access Patient History / EMR during consultation
- Use In-App Chat for communication
7
Write Prescription
- Record Subjective Information – symptoms, complaints
- Record Objective Information – examination findings
- Add Assessment – diagnosis and observations
- Create Plan – treatment plan and recommendations
- Prescribe Medicines with dosage details (morning, afternoon, evening, night)
- Digital prescription is saved and shared with patient
8
Earnings & Withdrawals
- Consultation fees are credited to Doctor Wallet
- View Earnings – daily, weekly, monthly reports
- Request Withdrawal from wallet
- Admin approves withdrawal request
- Amount is transferred to registered Bank Account
9
Additional Features
- Calendar View – See all appointments and consultations
- Patient Chat – Communicate with patients securely
- Ratings – View patient ratings and feedback
- Blogs & FAQs – Access health information
- Notifications – Receive real-time updates
- Nurse Mode – Full nurse booking, consultations, and earnings
info
Note: Maintain high service standards for better ratings and more consultations. Keep your profile updated and availability accurate.
delivery_dining Delivery Partner Application Guide
Delivery Partner App Workflow
1
Splash → OTP Login/Register
- Download the WeCare Delivery Partner App
- Enter your mobile number and verify via OTP
- Complete registration with personal details (name, email, password)
- Upload KYC Documents for verification:
- Driving License
- Vehicle RC
- Insurance
- Profile Photo
- Submit for Admin Approval – account becomes active upon approval
2
Home Dashboard
- View available orders in your area
- Check online/offline toggle to receive orders
- View earnings summary and order history
3
Receive Order Request
- Order request appears with order details
- Shows: vendor location, customer address, item summary
- Review order information before accepting
4
Accept Order
- Tap "Accept" to take the delivery or "Reject" if not available
- Once accepted, order is assigned to you
- View pickup location and customer address
5
Navigate to Pickup
- In-app navigation to vendor/pharmacy location
- Real-time GPS tracking and polyline route
- Arrive at vendor location and confirm arrival
6
Pickup & Update Status
- Collect the order from vendor/pharmacy
- Mark status as "Picked Up"
- Proceed to customer delivery address
7
Deliver & Complete Order
- Navigate to customer address using maps & geolocation
- Mark status as "On The Way" during transit
- At destination, mark order as "Delivered"
- Delivery is complete – earnings credited to wallet
8
My Orders & History
- Active Orders – Current deliveries in progress
- Completed Orders – Delivery history
- Cancelled Orders – Orders you rejected or cancelled
9
Profile & Earnings
- Profile Management – Update personal details, photo, documents
- Earnings – View total earnings, daily/weekly summary
- Wallet – Current balance and transaction history
- Withdrawals – Request payout to bank account
- Notifications – Receive real-time order alerts
- Blogs & FAQs – Access support information
info
Note: Keep the app online and GPS enabled to receive delivery requests. Maintain good ratings for more order opportunities.
storefront Vendor Application Guide
Vendor App Workflow (Pharmacy/Lab)
1
Splash → Phone Check → OTP Verify → Register
- Download the WeCare Vendor App
- Enter your mobile number and verify via OTP
- Complete registration with store details (owner name, store name, email, password)
- Upload KYC Documents for verification:
- Business License / Registration
- Store/Shop Photo
- Identity Proof (Aadhaar, PAN, etc.)
- Profile Photo
- Submit for Admin Approval – account becomes active upon approval
2
Set Shop Address & Manage Catalog
- Shop Address – Set store location for customer visibility
- Manage Catalog – Add/Edit products with:
- Categories & Sub-categories
- Product name, description, and images
- Price and marked price
- Discount and tax settings
- Stock quantity management
- Unit measurements
- Stock Movements – Track inventory changes
3
Receive Customer Orders
- Customer places order – notification is received
- View order details – items, quantity, customer address, payment
- Review order for availability
4
Accept & Process Order
- Tap "Accept" to confirm or "Reject" if unavailable
- Update order status:
- "Confirmed" – Order is validated
- "Packed" – Order is ready for pickup
- Hand over order to Delivery Partner
- Order status updates to "In Transit"
5
Order Completion & Earnings
- Delivery partner marks order as "Delivered"
- Order is marked as "Completed"
- Commission is deducted (platform fee)
- Earnings are credited to Vendor Wallet
- Customer can rate the vendor
6
Promo Codes & Withdrawals
- Promo Codes – Create discount codes for products
- Wallet – View balance and transaction history
- Withdrawal Request – Request payout to bank account
- Admin approves withdrawal – amount transferred
7
Additional Features
- Order History – View all past orders with details
- Ratings – View customer ratings and feedback
- Notifications – Receive real-time order updates
- Profile Management – Update store details and documents
- Excel Import – Bulk import products via Excel
- Stock Management – Track inventory and stock movements
info
Note: Keep your catalog updated and stock accurate. Quick order processing leads to better ratings and more orders.
admin_panel_settings Admin Panel Guide
Admin Panel Overview
The WeCare Admin Panel (built with Filament 3) provides complete control over the platform. Below is the detailed menu structure and functionality.
sync End-to-End Loop
- Customer books/orders → Payment gateway charges
- Admin/commission engine splits money
- Doctor consults / Vendor packs
- Delivery Partner delivers → Ratings collected
- Earnings settle into wallets → Withdrawal requests
- Admin approves → Payout → FCM notifications + chat keep everyone connected
| Menu Section | Sub-Menu Items | Functionality |
|---|---|---|
| Dashboard | ||
| Dashboard | - | Overview of platform analytics, active consultations, orders, revenue, and key metrics |
| Bookings | ||
| Booking Requests | - | View and manage all doctor appointment bookings (in-clinic) |
| Booking Request Statuses | - | Manage booking lifecycle statuses (Pending, Accepted, Completed, etc.) |
| Consultation Requests | - | Monitor video and home visit consultation requests |
| Consultation Request Statuses | - | Configure statuses for consultation requests |
| CMS | ||
| Sections | - | Manage landing page content sections |
| Section Items | - | Manage items within each CMS section |
| Content | ||
| App Modules | - | Enable/disable modules (Customer, Doctor, Vendor, Delivery) |
| Banners | - | Manage promotional banners across modules |
| Module Banners | - | Module-specific banner management |
| Blogs | - | Create and manage health blogs/articles (EN/AR) |
| FAQs | - | Manage frequently asked questions |
| FAQ Categories | - | Manage FAQ categories |
| FCM Notifications | - | Broadcast push notifications to customers, doctors, vendors, partners |
| Forum Questions | - | Moderate patient forum questions |
| Forum Answers | - | Moderate doctor answers in health forum |
| Insurances | - | Manage insurance provider list |
| Languages | - | Configure supported languages (EN/AR) |
| Privacy Policies | - | Update privacy policy content (EN/AR) |
| Terms & Conditions | - | Manage terms and conditions per user type |
| Services | - | Define and display services offered on the platform |
| Symptoms | - | Manage symptoms by specialist category |
| Doctors | ||
| Doctor Availabilities | - | View and manage doctor schedules |
| Doctor Timings | - | Configure doctor working hours |
| Doctor Leaves | - | Manage doctor leave requests |
| Doctor Documents | - | Review and approve doctor KYC documents |
| Doctor Booking Settings | - | Configure doctor fees and booking preferences |
| Doctor Bank Details | - | Manage doctor bank account information |
| Doctor Specialist Categories | - | Manage doctor specialty categories |
| Financial | ||
| Commission Settings | - | Configure platform commission rates |
| Doctor Commissions | - | View doctor commission transactions |
| Doctor Earnings | - | Track doctor earnings |
| Doctor Wallet Histories | - | Track doctor wallet transactions |
| Doctor Withdrawals | - | Process doctor withdrawal requests and payouts |
| Hospital Earnings | - | Track hospital earnings |
| Hospital Wallet Histories | - | Track hospital wallet transactions |
| Vendor Earnings | - | Track vendor earnings from orders |
| Vendor Wallet Histories | - | Track vendor wallet transactions |
| Vendor Withdrawals | - | Process vendor withdrawal requests |
| Customer Wallet Histories | - | Track customer wallet transactions |
| Payment Modes | - | Configure accepted payment methods (Stripe, PayPal, Razorpay, etc.) |
| Payment Types | - | Define payment type classifications |
| Taxes | - | Define taxes applicable to services and products |
| Hospitals | ||
| Hospitals | - | Manage all registered hospitals and their details |
| Hospital Bank Details | - | Manage hospital bank account information |
| Hospital Departments | - | Manage hospital departments |
| Hospital Doctors | - | Manage doctors associated with hospitals |
| Hospital Facilities | - | Manage hospital facilities and amenities |
| Hospital Fee Settings | - | Configure hospital fee structures |
| Hospital Galleries | - | Manage hospital image galleries |
| Hospital Insurances | - | Manage accepted insurances per hospital |
| Hospital Patients | - | Manage walk-in patient records |
| Hospital Patient Histories | - | View patient treatment history |
| Hospital Pharmacies | - | Manage pharmacies associated with hospitals |
| Hospital Services | - | Manage services offered by hospitals |
| Medical | ||
| Customer Medical Reports | - | View patient medical report responses |
| Customer Prescriptions | - | View all patient prescriptions |
| Customer Prescription Items | - | View prescribed medicines with dosage details |
| Customer Test Reports | - | Manage patient lab test reports |
| Medical Report Questions | - | Build EMR questionnaire forms (EN/AR) |
| Medical Report Answers | - | Manage answer options for medical questions |
| Pill Reminders | - | View and manage patient pill reminders |
| Orders | ||
| Orders | - | View and manage all pharmacy/lab orders |
| Order Items | - | View order line items (products, quantity, price) |
| Order Statuses | - | Manage order statuses (Pending, Confirmed, Packed, Delivered, etc.) |
| Order Histories | - | View order status change history |
| Order Commissions | - | View order commission transactions |
| Payment Responses | - | View payment gateway callback logs |
| Pharmacy | ||
| Categories | - | Manage product categories (EN/AR) |
| Sub Categories | - | Manage product sub-categories (EN/AR) |
| Products | - | Manage medicine/lab product catalog |
| Import Excel | - | Bulk import products via Excel |
| Stock Movements | - | Track product stock changes |
| Unit Measurements | - | Manage product units (mg, ml, tablets, etc.) |
| Vendor Documents | - | Review and approve vendor KYC documents |
| Vendor Promo Codes | - | Manage vendor-specific promo codes |
| Vendor Ratings | - | View vendor ratings and feedback |
| Settings | ||
| Customer App Setting | - | Configure customer app settings (currency, payment keys, radius, etc.) |
| Doctor App Setting | - | Configure doctor app settings (commission, timings, etc.) |
| Vendor App Setting | - | Configure vendor app settings (commission, order radius, etc.) |
| Delivery Boy App Setting | - | Configure delivery partner app settings |
| Hospital App Setting | - | Configure hospital app settings (commission, etc.) |
| System | ||
| Promo Types | - | Manage promo code types |
| Statuses | - | Manage global system statuses |
| User Types | - | Manage system user roles |
| Users | ||
| Customers | - | View and manage all registered patients/customers |
| Doctors | - | View and manage all registered doctors |
| Vendors | - | View and manage all registered vendors (pharmacies/labs) |
| Delivery Boys | - | View and manage all delivery partners |
| Filament Shield (Roles & Permissions) | ||
| Roles | - | Manage system roles (Super Admin, Admin, Manager, etc.) |
| Roles & Permissions | - | Assign granular permissions to each role |
| Users | - | Manage admin and sub-admin accounts |
admin_panel_settings
Access URL:
http://yourdomain.com/admin
Default Credentials: admin / admin
warning
Security Note: Change default admin password immediately after first login!
android Android Configuration
Build Configuration
File Location: android/build.gradle
| Configuration | Value |
|---|---|
| Build Tools Version | 35.0.0 |
| Minimum SDK Version | 24 |
| Compile SDK Version | 35 |
| Target SDK Version | 35 |
| Android NDK Version | 27.1.12297006 |
| Kotlin Version | 2.0.21 |
Gradle Plugin Configuration
Gradle Plugins
classpath("com.android.tools.build:gradle:8.7.2")
classpath("com.facebook.react:react-native-gradle-plugin")
classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
classpath 'com.google.gms:google-services:4.4.2'
admin_panel_settings Admin Configuration
info
PHP Version Requirement
This admin panel requires PHP 8.4. Please ensure you have the correct version installed before proceeding.
php --version # Should show PHP 8.4.x
Installation Steps
-
1
Unzip the Source Folder
Extract the downloaded source files to your working directory.
-
2
Copy to XAMPP
Copy the admin folder and paste it inside
XAMPP → htdocs. Rename your project folder (e.g., Wecare_admin).infoVerify XAMPP & Composer: Ensure XAMPP and Composer are already installed. If not, download them from apachefriends.org and getcomposer.org. -
3
Open Command Prompt
Navigate to your project folder:
cd C:\xampp\htdocs\Wecare_admin -
4
Install Dependencies
Run the following command to install all PHP dependencies:
composer installWhen finished, verify the
vendorfolder has been created in your project. -
5
Create Database
Follow these steps in phpMyAdmin:
- Open
http://localhost/phpmyadminin your browser - Click "New"
- Enter your database name (e.g.,
Wecare_admin) - Click "Create"
- Open
-
6
Import Database
Import the SQL file located at
admin/db_file/Wecare_admin.sqlusing phpMyAdmin:- In phpMyAdmin, select your newly created database
- Click the "Import" tab
- Choose the
Wecare_admin.sqlfile from your project - Click "Go"
-
7
Generate Application Key
Run the following command to generate a unique application key:
php artisan key:generateinfoKey Generate: This command generates a unique application key that is used for encryption and security purposes. -
8
Configure .env File
If
.envfile is not visible, enable "show hidden files" in your system settings. Update the.envfile in your project root with the following settings:Application Settings
APP_URL=ENTER_YOUR_URL_HERE APP_ASSET_URL=ENTER_YOUR_URL_HERE/public/upload APP_ENV=production APP_DEBUG=falseDatabase Configuration
DB_DATABASE=your_database_name DB_USERNAME=your_db_username DB_PASSWORD=your_db_passwordTwilio SMS Settings
TWILIO_SID=your_twilio_sid TWILIO_TOKEN=your_twilio_token TWILIO_FROM=your_twilio_numberRazorpay Payment Gateway
RAZORPAY_KEY=your_razorpay_key RAZORPAY_SECRET=your_razorpay_secretFirebase Configuration
Firebase is required for push notifications, real-time database features, and other Firebase services. Before using the application, configure your own Firebase project.
Step 1: Download Firebase Service Account
- Open the Firebase Console.
- Select your Firebase Project.
- Go to Project Settings → Service Accounts.
- Click "Generate New Private Key".
- A JSON file will be downloaded (Example:
your-app-name-firebase-adminsdk.json).
Step 2: Upload the JSON File
Copy the downloaded Firebase JSON file into the following directory:
Admin/config/your-app-name.jsonStep 3: Update the .env File
FIREBASE_FILE=your-app-name.json FIREBASE_DB=https://your-project.firebaseio.com FCM_SERVER_KEY=your_fcm_server_key FCM_SENDER_ID=your_fcm_sender_idcheck_circleFirebase Connected
Once the JSON file is uploaded and the
.envvalues are updated, the application will automatically connect to your Firebase project.shieldSecurity Notice
Never share your Firebase Service Account JSON file or upload it to a public Git repository. This file contains sensitive credentials with administrative access to your Firebase project.
warningImportant: Replace all placeholder values with your actual credentials before running the application.
-
9
Run Migrations
Run the following command to create the database tables:
php artisan migrate -
10
Seed the Database
Run the following command to seed the database with default data:
php artisan db:seed --forceinfoThe--forceflag is used to run the seeder in production environments. For local development, you can omit it. -
11
Generate Shield Permissions
Run the following command to generate all Shield permissions:
php artisan shield:generate --all --option=permissions --panel=adminAfter generating permissions, run this command to assign the super admin role to your admin user:
php artisan tinker --execute=" \$role = DB::table('roles')->where('name','super_admin')->first(); \$perms = DB::table('permissions')->pluck('id')->toArray(); \$rows = array_map(fn(\$id) => ['permission_id'=>\$id,'role_id'=>\$role->id], \$perms); DB::table('role_has_permissions')->insertOrIgnore(\$rows); DB::table('model_has_roles')->insertOrIgnore(['role_id'=>1,'model_type'=>'App\\\Models\\\User','model_id'=>1]); echo 'Done: Admin assigned to super_admin role'; "infoShield: This generates all necessary permissions and assigns the super_admin role to the admin user (ID: 1). -
12
Optimize the Application
Run the following command to optimize the application for production:
php artisan optimize -
13
Serve Application
php artisan serveThe application will be available at
http://127.0.0.1:8000 -
14
Access Admin Panel
Open
http://127.0.0.1:8000in your browser.infoDemo Mode: The admin panel opens in demo mode by default. For full access, setAPP_ENV=productionandAPP_DEBUG=falsein your.envfile.
terminal Quick Command Reference
Run these commands in sequence to set up your admin panel:
# Step 1: Install dependencies
composer install
# Step 2: Generate application key
php artisan key:generate
# Step 3: Run migrations
php artisan migrate
# Step 4: Seed the database
php artisan db:seed --force
# Step 5: Optimize the application
php artisan optimize
# Step 6: Generate Shield permissions
php artisan shield:generate --all --option=permissions --panel=admin
# Step 7: Assign super admin role to admin user
php artisan tinker --execute="
\$role = DB::table('roles')->where('name','super_admin')->first();
\$perms = DB::table('permissions')->pluck('id')->toArray();
\$rows = array_map(fn(\$id) => ['permission_id'=>\$id,'role_id'=>\$role->id], \$perms);
DB::table('role_has_permissions')->insertOrIgnore(\$rows);
DB::table('model_has_roles')->insertOrIgnore(['role_id'=>1,'model_type'=>'App\\\Models\\\User','model_id'=>1]);
echo 'Done: Admin assigned to super_admin role';
"
# Step 8: Start the server
php artisan serve
Login Credentials
Use these default credentials to log in to the admin panel:
| Email: | admin@gmail.com |
| Password: | admin |
| Access Level: | Super Administrator |
shield
Security Alert: Change these credentials immediately after first login.
language Landing Page Configuration
info
Project Type: React.js Single Page Application with Vite
Purpose: WeCare - Healthcare Platform Landing Page
Features: Dynamic CMS-driven sections, responsive design, hero section, services showcase, FAQ, testimonials, admin panel integration, app download links
Purpose: WeCare - Healthcare Platform Landing Page
Features: Dynamic CMS-driven sections, responsive design, hero section, services showcase, FAQ, testimonials, admin panel integration, app download links
System Requirements
Before installing, ensure your system meets these requirements:
Development Environment
- Node.js 18.x or above
- npm 9.x or above (or Yarn)
- VS Code (Recommended)
- Git (Optional)
Browser Support
- Chrome 90+
- Firefox 88+
- Edge 90+
- Safari 14+
- Mobile Browsers
Project Structure
frontend/
├── .env # VITE_API_URL, VITE_UPLOAD_URL (local overrides)
├── index.html # HTML shell (root div)
├── package.json # deps: react 19, vite 8, tailwind, lucide-react
├── vite.config.js # build config (@ alias, dev server :5173)
└── src/
├── main.jsx # React entry point
├── App.jsx # ★ Section composition in render order
├── index.css # Tailwind directives
├── api/
│ └── client.js # fetch wrapper (base URL from env)
├── hooks/
│ ├── useLandingPage.js # ★ fetches GET /api/landing-page → {data, loading, error}
│ └── useApi.js # generic request hook
├── assets/ # static local images
└── components/
├── Header.jsx # fixed nav; transparent→white on scroll
├── HeroSection.jsx # CMS hero + background image layer
├── WhyWeCare.jsx # benefit cards grid
├── HealthcareSolutions.jsx # tabbed solutions w/ image panel
├── HowItWorks.jsx # step flow
├── KeyFeatures.jsx # feature grid
├── Testimonials.jsx # patient quotes (+ StarRating)
├── FAQ.jsx # accordion ← cms faq items
├── StarRating.jsx # shared star widget
├── FinalCTA.jsx # conversion banner
└── Footer.jsx # brand + social links
Installation Steps
info Prerequisite
The WeCare Backend must be running before setting up the landing page. Ensure the backend is accessible at http://localhost:8000.
-
1
Navigate to Frontend Directory
cd frontend -
2
Install Dependencies
Run npm install to install all required packages (React 19, Vite 8, Tailwind, lucide-react):
npm install -
3
Configure Environment Variables
Create
.envfile in thefrontend/folder:VITE_API_URL=http://localhost:8000/api
VITE_UPLOAD_URL=http://localhost:8000/uploads/warning Important: .env is read at startup — restart Vite after any change. For production builds, point these at your live domain; unset values fall back to the production URLs baked into components. -
4
Start Development Server
Launch the development server:
npm run dev -- --hostThe application will be available at
http://localhost:5173(LAN-accessible with--host)
Verify Installation
check_circle
Landing Page:
http://localhost:5173 → page renders all sections (Hero, Why WeCare, Solutions, How It Works, Key Features, Testimonials, FAQ, CTA, Footer)
check_circle
API Endpoint:
curl http://localhost:8000/api/landing-page → HTTP 200 with "result" payload
check_circle
Admin Panel:
Log into
http://localhost:8000/admin → CMS menu lists Sections & Section Items
check_circle
Dynamic Content:
Edit any heading → save → refresh site → change visible (proves dynamic wiring)
Admin Panel Guide — Managing Landing Page Content
admin_panel_settings
Access:
Default Admin Credentials: Username:
http://localhost:8000/adminDefault Admin Credentials: Username:
admin | Password: admin
Menu Reference
| Menu | Path | What It Controls |
|---|---|---|
| Sections | CMS → Sections | Block-level settings: heading, subheading, badge text, button text/URL, images, sort order, Active toggle |
| Section Items | CMS → Section Items | Content inside each block: cards, steps, testimonials, FAQ Q&As, feature grids |
| FAQ (legacy) | FAQ → FAQ | The legacy faqs table — no longer used by the landing page (still used by mobile apps) |
| Banners | Content → Banners | Mobile app banners — not used by landing page |
Quick Reference
EDIT BLOCK TEXT
→ CMS → Sections → [block] → save
ADD/EDIT CARD
→ CMS → Section Items → pick section → fill → save
REORDER
→ change Sort Order numbers
HIDE CARD
→ Active OFF (keeps data)
HIDE SECTION
→ Sections → Active OFF
IMAGES
→ always use upload widget (≤ 4 MB)
SEE CHANGES
→ refresh browser tab
Which Menu Edits Which Section
| Landing Section | Admin Menu |
|---|---|
| Hero (heading, badge, bg image, CTAs) | CMS → Sections → hero |
| Why WeCare cards | CMS → Sections → why_wecare + Section Items under it |
| Healthcare Solutions tabs | CMS → Sections → healthcare_solutions + Section Items |
| How It Works steps | CMS → Sections → how_it_works + Section Items |
| Key Features grid | CMS → Sections → key_features + Section Items |
| Testimonials | CMS → Sections → testimonials + Section Items |
| FAQ accordion | CMS → Sections → faq + Section Items (title = question, description = answer) |
| Final CTA banner | CMS → Sections → final_cta |
| Footer social links | CMS → Sections → social + Section Items |
check_circle
Everything appears on the site on next refresh — no code changes or deployment needed.
Production Build
To build the landing page for production deployment:
cd frontendnpm run build
This outputs static files to dist/ folder ready for deployment.
Available Scripts
| Command | Description |
|---|---|
npm run dev |
Start development server at localhost:5173 |
npm run dev -- --host |
Start development server with LAN accessibility |
npm run build |
Build production-ready files in dist/ folder |
npm run preview |
Preview the production build locally |
Common Issues & Solutions
❌ Node modules missing
Delete node_modules and package-lock.json, then run npm install again.
❌ npm command not found
Install Node.js from nodejs.org and restart your terminal.
❌ API connection failed
Check if VITE_API_URL in .env matches your backend URL. Ensure backend is running on http://localhost:8000.
❌ Images not loading
Check VITE_UPLOAD_URL in .env. Ensure images are uploaded via admin panel.
❌ Port 5173 already in use
Run npm run dev -- --port 3000 to use a different port.
❌ .env changes not applying
Restart the Vite dev server after any .env changes.
Deployment Checklist
check_circle
All images are uploaded via admin panel
check_circle
Content is updated in the admin panel (Sections & Section Items)
check_circle
Theme colors match your brand
check_circle
Links (social media, app stores) are correct
check_circle
.env file is configured with production URLs
check_circle
Run
npm run build to create production build
check_circle
Upload
dist/ folder to hosting provider
rocket_launch
Ready to deploy? After completing the checklist, run
npm run build and upload the dist/ folder to your hosting provider.
phone_android Mobile App Configuration
Step 1: Install Node.js
Download and install Node.js from your browser by visiting the official website: https://nodejs.org/en/download
# Verify Node.js installation
node -v
npm -v
Step 2: Install Android Studio
Download and install Android Studio on your system from: https://developer.android.com/studio
Customer App Configuration
Step 1: Copy App Folder
Copy the customer folder and paste it into your desired
location.
info
Note: If you rename the app folder, you must update the bundle ID.
Step 2: Change the Bundle ID
For Android, open:
folder_open Wecare_customer/android/app/src/main/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.Wecare.customer">
...
</manifest>
Change the package attribute to your new bundle ID, for
example:
package="com.mycompany.mycustomerapp"
For iOS, open:
folder_open ios/CustomerApp.xcodeproj
Update the Bundle Identifier under the app's target settings in Xcode.
check_circle
The bundle ID for the Wecare Customer app has been successfully updated in your system. Follow the same process for other applications.
app_registration App Name & Icon
Changing App Name
folder_open Wecare/android/app/src/main/res/values/strings.xml
<!-- In strings.xml -->
<string name="app_name">Your App Name</string>
Changing App Icon
- Replace all icon files in
res/mipmap-*directories - Update adaptive icons in
res/mipmap-anydpi-v26 - Rebuild your app
package Package Name
Android Configuration
folder_open Wecare/android/app/build.gradle
// In app/build.gradle
android {
defaultConfig {
applicationId "com.yourcompany.yourapp"
}
}
warning
Warning: Changing package name after release will be treated as a new app by Google Play.
construction Custom Work
If you need additional features, modifications, or integrations in this application, we offer custom development services to tailor the app to your specific needs.
For any custom work requests, please get in touch with us:
- language Website: https://menpanitech.com/
- mail Email: sales@menpanitech.com
info
Note: Custom work may involve additional costs and development time depending on the complexity of the requested changes.
history Version History
history Version History
Track the evolution of the Wecare platform through major releases, feature additions, improvements, and optimizations.
Version 1.0.0 (Initial Release)
-- ✓ Initial app release
- ✓ Core functionality implemented
local_fire_department Firebase Configuration
Admin Panel Configuration
Project Setup
- Go to Firebase Console and create a new project
- Create a web app in your Firebase project
Database Configuration
- Navigate to your project dashboard and create the Database
Service Account Setup
- Go to Settings → Project settings → Advanced permissions settings
- Click on "Service Accounts" under Firebase Admin SDK section
- Click "Actions" → "Manage Keys" → "Add Key" → "Create new key"
- Select JSON format and click "Create"
.env Configuration
FIREBASE_CREDENTIALS=firebase.json
FIREBASE_DATABASE_URL=https://your-project-id.firebaseio.com
folder
Place the JSON file in:
/admin/config/firebase.json
Mobile App Configuration
Android Setup
- Select your existing project in Firebase Console
- Click Settings icon → Project settings → Add app → Android
- Download
google-services.jsonfile - Place the file in:
Wecare_customer/android/app
info
If you haven't created a Firebase project yet, follow the Admin Configuration steps above first.
Required Firebase Services
admin_panel_settings
Authentication
database
Realtime Database
cloud
Cloud Firestore
notifications
Cloud Messaging
analytics
Analytics
location_on
Geo Locations
fingerprint Bundle ID
Clients must update the bundle identifier to match their application package.
Example: com.clientname.Wecare
Android
Update in:
folder_open android/app/build.gradle
applicationId "com.clientname.Wecare"
Rename the Java package directory:
folder_open android/app/src/main/java/com/clientname/Wecare
key Keystore Configuration
Generate a signing keystore:
keytool -genkey -v \
-keystore Wecare.keystore \
-alias Wecare \
-keyalg RSA \
-keysize 2048 \
-validity 10000
Place the keystore file inside:
folder_open android/app/
Update the signing configuration in:
folder_open android/gradle.properties
MYAPP_UPLOAD_STORE_FILE=Wecare.keystore
MYAPP_UPLOAD_KEY_ALIAS=Wecare
MYAPP_UPLOAD_STORE_PASSWORD=yourpassword
MYAPP_UPLOAD_KEY_PASSWORD=yourpassword
rocket_launch Android Release Build
Generate APK
cd android
./gradlew assembleReleaseAPK location:
android/app/build/outputs/apk/release/app-release.apk
Generate Play Store Bundle
cd android
./gradlew bundleReleaseOutput: android/app/build/outputs/bundle/release/app-release.aab
phone_iphone iOS Configuration
iOS development requires a macOS system with Apple Xcode installed. Xcode provides all necessary tools, simulators, and SDKs required to build and run the application on iOS devices.
Ensure that you have the latest version of Xcode installed from the Mac App Store and have accepted all license agreements before proceeding.
download Install iOS Dependencies
The iOS project uses CocoaPods to manage native dependencies. You must install all required pods before running the application.
Follow the steps below:
cd ios
pod install
cd ..
This command installs all required native libraries and links them with your iOS project.
local_fire_department iOS Firebase Setup
Firebase is used for push notifications and other backend services. You need to download and configure the Firebase iOS configuration file.
Step 1: Download Configuration File
GoogleService-Info.plist
Step 2: Add File to Project
Place the downloaded file inside the following directory:
folder_open ios/Wecare/GoogleService-Info.plist
Steps in Xcode:
- Open the iOS project in Xcode.
- Drag and drop the
GoogleService-Info.plistfile into the Project Navigator. - Select "Copy items if needed" when prompted.
- Ensure the file is added to the main application target.
This configuration enables Firebase services such as push notifications and analytics.
fingerprint iOS Bundle Identifier
The Bundle Identifier uniquely identifies your application in the Apple ecosystem. It must match the identifier configured in Firebase and Apple Developer account.
Steps:
- Open the project in Xcode:
ios/Wecare.xcworkspace - Select the main application target.
- Go to the General tab.
- Update the Bundle Identifier field.
Example: com.clientname.Yourapp
Ensure that the Bundle Identifier matches exactly with the one used in the Firebase configuration file, otherwise services may not work correctly.
image iOS App Icons
Application icons are used across the app, App Store, and device home screen. You need to replace the default icons with your branding assets.
App Icon Path:
folder_open ios/Wecare/Images.xcassets/AppIcon.appiconset
Replace all icon sizes inside this folder with your custom icons while maintaining the required dimensions.
iOS App Logo
Replace the main logo used inside the application UI:
folder_open src/assets/logo.png
Recommended size: 500 × 500 PNG (transparent background preferred)
play_arrow Run iOS Application
Before running the application, make sure the Metro bundler is running.
Step 1: Start Metro Server
npm start
Step 2: Run iOS App
npx react-native run-ios
This command will build the app and launch it in the iOS Simulator. Alternatively, you can open the project in Xcode and run it directly on a simulator or a physical device.
rocket_launch iOS Release Build
To publish your application to the App Store, you must generate a release build using Xcode.
Steps:
- Open the project in Xcode:
ios/Wecare.xcworkspace - Select Generic iOS Device as the build target.
- From the top menu, select Product → Archive.
- Once the archive is created, open the Organizer window.
- Validate and upload the build to App Store Connect.
After uploading, you can manage your app release from App Store Connect.
api API Configuration
Application API configuration is located in:
folder_open src/config/const.js
Update the following values with client server details:
- BASE_URL
- API_URL
- IMG_URL
- SOCKET_URL (if applicable)
Example:
export const BASE_URL = "https://api.clientdomain.com"
export const API_URL = "https://api.clientdomain.com/v1"
export const IMG_URL = "https://cdn.clientdomain.com"
palette Branding Configuration
Application Logo
Replace the logo file located at:
folder_open src/assets/logo.png
Recommended format: 500 × 500 PNG
Android Launcher Icons
Replace launcher icons in:
folder_open android/app/src/main/res/
Folders:
- mipmap-mdpi
- mipmap-hdpi
- mipmap-xhdpi
- mipmap-xxhdpi
- mipmap-xxxhdpi
iOS App Icons
Replace icons in:
folder_open ios/Wecare/Images.xcassets/AppIcon.appiconset
map Map Provider
The application uses MapLibre for map rendering and location-based services.
Map Library Used
@maplibre/maplibre-react-native
Capabilities
layers
Vector Tile Rendering using RouteMappy tiles
map
Real-time map display for ride tracking
navigation
Location-based services for navigation and route
visualization
bolt
High-performance map rendering optimized for mobile
devices
These features enable the application to display locations, trip routes, and navigation paths within the app.
route RouteMappy
warning
Third‑Party Paid Service
RouteMappy is a paid maps service and is not included with the Wecare purchase package. You must obtain your own API key from RouteMappy. All subscription costs, licensing fees, and setup are the responsibility of the buyer.
Admin Panel Configuration
Step 1: Enter Your RouteMappy API Key
In the place of enter_map_key in your .env
file, add your RouteMappy API key as shown below:
MAP_KEY=enter_map_key
info
If you need RouteMappy Maps for your application, feel free to contact us. It functions as a customizable map solution, available for purchase.
- Website: https://routemappy.com/
- Email: sales@menpanitech.com
Mobile Application Configuration
Step 1: Add Your API Key
Edit the following file:
folder_open Wecare/src/config/Constants.js
export const ROUTEMAPPY_API_KEY = 'enter_your_routemappy_key';
info
If you need RouteMappy Maps for your application, feel free to contact us. It functions as a customizable map solution, available for purchase.
- Website: https://routemappy.com/
- Email: sales@menpanitech.com
payments Payment Integration
Library Used
- react-native-razorpay
- flutterwave-react-native
Features
lock
Secure online payments
directions_car
Ride fare payments
credit_card
Multiple payment methods (Cards, UPI, Net Banking,
Wallets)
Configuration
Payment credentials must be configured on the backend server to enable transaction processing.
Required credentials typically include:
- Payment Gateway API Key
- Secret Key
- Webhook configuration for transaction validation
These credentials are used by the backend API to securely communicate with the payment gateway.
warning
Important Warning
Sensitive credentials such as secret keys must never be stored in the mobile application. All payment validation and transaction verification should be handled securely through the backend server.
notifications FCM Configuration
Modern FCM v1 Setup (OAuth 2.0)
This guide covers the modern Firebase Cloud Messaging v1 API. It uses OAuth 2.0 for secure authentication and provides more features than the deprecated legacy API.
warning
Important
The legacy FCM HTTP API (using Server Keys) is deprecated and will be removed. Always use the Firebase Cloud Messaging HTTP v1 API for all new implementations.
Step 1: Generate Service Account Credentials
-
Access Firebase Console
Go to Firebase Console and select your project.
Navigate to Project Settings (gear icon) → Service accounts tab.
-
Generate a new private key
Click "Generate new private key" in the Firebase Admin SDK section.
Confirm by clicking "Generate key" in the popup.
A JSON file (
your-project-id-firebase-adminsdk.json) will be downloaded automatically. This file contains your service account credentials.shield Security Keep this file secure. It contains sensitive credentials that provide full access to your Firebase services. Never commit this file to a public repository or share it with unauthorized users.
Step 2: Server-Side Configuration
Place the Service Account File
Copy the downloaded JSON file to your project's secure configuration directory:
folder
Recommended Location:
/admin/config/firebase-service-account.json
Configure Environment Variables
Update your backend .env file with the following
configuration:
# Firebase Cloud Messaging v1 Configuration
FIREBASE_PROJECT_ID=your-project-id
FCM_DRIVE_PATH=/path/to/firebase-service-account.json
info
Note
The FCM_DRIVE_PATH points to your Firebase Service Account JSON file, and
FIREBASE_PROJECT_ID is your Firebase project identifier, which can be found in the
Firebase Console.
Step 3: Sending Notifications with v1 API
Here's a secure implementation example for sending push notifications using the FCM v1 API with OAuth 2.0 authentication:
// FCM v1 API Notification Sender
// Uses OAuth 2.0 authentication with service account
use Google\Cloud\Firestore\FirestoreClient;
use Google\Cloud\Core\ServiceBuilder;
// Initialize Firebase with service account
$firestore = new FirestoreClient([
'keyFilePath' => env('FCM_DRIVE_PATH'),
'projectId' => env('FIREBASE_PROJECT_ID')
]);
// Construct the FCM v1 endpoint
$url = "https://fcm.googleapis.com/v1/projects/" . env('FIREBASE_PROJECT_ID') . "/messages:send";
// Get OAuth 2.0 access token
$token = $firestore->getCredentialsFetcher()?->fetchAuthToken();
$accessToken = $token['access_token'];
// Construct the notification payload (v1 format)
$data = [
"message" => [
"token" => "device_registration_token_here",
"notification" => [
"title" => "Notification Title",
"body" => "Notification Message Body"
],
"data" => [
"key1" => "value1",
"key2" => "value2"
],
"android" => [
"priority" => "high"
],
"apns" => [
"headers" => [
"apns-priority" => "10"
]
]
]
];
// Send the notification
$options = [
'http' => [
'header' => "Authorization: Bearer $accessToken\r\n" .
"Content-Type: application/json\r\n",
'method' => 'POST',
'content' => json_encode($data)
]
];
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
Troubleshooting
Common Issues:
-
Authentication Failed (401):
Verify the service account JSON file path is correct and the file has proper read permissions. Ensure the project ID matches.
-
Invalid Token (404):
The device registration token may be invalid or expired. Request a new token from the client app.
-
Permission Denied (403):
The service account needs the "Firebase Cloud Messaging Admin" role in IAM settings.
check_circle
Success
The modern FCM HTTP v1 API provides enhanced security, improved reliability, and supports all the latest Firebase Cloud Messaging features.
mail Gmail Configuration
Step-by-Step Configuration
-
Step 1: Access Gmail Account Settings
Log in to your Gmail account and click on your profile picture in the top right corner. Select "Manage your Google Account" from the dropdown menu.
-
Step 2: Enable Security Verification
Navigate to the "Security" tab in the left sidebar.
Under "Signing in to Google," enable 2-Step Verification if not already active.
infoNote: You must have 2-Step Verification enabled to generate an App Password.
-
Step 3: Generate App Password
While still in the Security section:
-
Find the "App passwords" option (under 2-Step Verification)
-
Click "create"
-
Copy the 16-character password shown
-
.env File Configuration
Add these configurations to your .env file:
MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=youremail@gmail.com
MAIL_PASSWORD=your_generated_app_password
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=youremail@gmail.com
MAIL_FROM_NAME="${APP_NAME}"
warning
Important Security Notes:
- Never use your main Gmail password in the .env file
- Always use the generated App Password
- Keep your .env file secure and never commit it to version control
- If compromised, revoke the app password immediately from Google Security settings
Troubleshooting
Common Issues:
-
Authentication Failed:
Verify 2-Step Verification is enabled and you're using an App Password.
-
Connection Timeout:
Check if your server/firewall allows outbound connections on port 587.
-
Daily Limit Exceeded:
Gmail has sending limits (500 emails/day for free accounts).
devices Device Configuration
Application Deployment Guide
info
Advisable: Copy the source files to D: or E: drive rather than C: drive.
Environment Setup
- Connect your device via USB
- Verify connection:
adb devicesConfirm the device appears in the list.
check_circle
Prerequisites
- Android Studio with SDKs installed
- Active emulator/device visible via adb
- Developer options enabled on physical devices
Build & Run Process
- Launch Command Prompt
- Navigate to project directory:
cd D:\Wecare_customer- Install project dependencies:
npm install- Execute the application:
npx react-native run-androidhelp_outline FAQ & Troubleshoot
help_outline Frequently Asked Questions & Troubleshooting
This section covers common issues and solutions encountered during setup, deployment, and daily use of the WeCare platform.
error
1. Dependencies Installation Failed (npm install)
Cause: Incorrect Node.js version, network issues, or corrupted cache.
Solution:
- Make sure Node.js 18+ is installed and active.
- Navigate to the correct project directory (Customer App, Doctor App, Vendor App, or Partner App).
- Run:
npm install
- If the problem persists, clear the cache:
rm -rf node_modules package-lock.json
npm cache clean --force
npm install
error 2. Module Not Found / Import Error
Cause: Missing packages or incorrect import paths after an update.
Solution:
- Ensure all source files are correctly extracted.
- Reinstall dependencies with
npm install. - Check that the imported module name matches the installed package.
- Restart the Metro bundler:
npx react-native start --reset-cache
error 3. Firebase Configuration Issues
Cause: Firebase project not properly linked or config files missing.
Solution:
- Download
google-services.json(Android) andGoogleService-Info.plist(iOS) from your Firebase console. - Place them in the correct folders:
- Android:
android/app/ - iOS: root of the Xcode project (via Xcode)
- Android:
- Verify that Firebase Cloud Messaging (FCM) is enabled for push notifications and real-time alerts.
- Check that the package name / bundle ID matches the Firebase project settings.
- For Admin Panel: Place the service account JSON file in
admin/config/and update.envwithFIREBASE_FILEandFIREBASE_DB.
error 4. Environment Variables Not Configured
Cause: The .env file is missing or contains wrong values.
Solution:
- For the admin backend, copy
.env.exampleto.envand fill in database, mail, map, and payment keys. - For the mobile apps, update the API base URL and any service keys in the environment configuration files.
- For the landing page, create
.envin thefrontend/folder withVITE_API_URLandVITE_UPLOAD_URL. - Restart the development server after any changes.
Example (Admin .env):
APP_URL=http://your-server-url
DB_DATABASE=wecare_db
FCM_SERVER_KEY=your_key
AGORA_APP_ID=your_agora_app_id
error 5. Android Device Not Detected
Cause: USB debugging disabled or missing drivers.
Solution:
- Enable Developer Options and USB Debugging on your Android device.
- Connect via a data‑capable USB cable.
- Run
adb devicesin a terminal and accept the authorization prompt on the phone.
adb devices
error 6. Application Stuck on Splash Screen / Not Loading
Cause: Backend URL misconfigured, invalid JSON response, or network restrictions.
Solution:
- Double‑check the API base URL in the mobile app configuration (
src/config/Constants.js). - Make sure the Laravel backend is running (
php artisan serve). - Check browser console or React Native debug logs for errors.
- Clear app cache and restart the bundler.
error 7. Admin Panel Database Import Fails
Cause: Incorrect database credentials or large SQL file timeout.
Solution:
- Create a fresh database via phpMyAdmin or command line.
- Import the provided
.sqlfile using phpMyAdmin's Import tab or via command line:
mysql -u root -p wecare_db < wecare_admin.sql
- Update
.envwith correct DB credentials and restart the backend.
error 8. Push Notifications Not Working
Cause: FCM server key missing, or notification channels not set up.
Solution:
- Go to Admin Panel → Content → FCM Notifications and verify the FCM Server Key is entered.
- Ensure the customer/doctor/vendor/partner app has granted notification permissions.
- Check that
@react-native-firebase/messagingis correctly linked. - Test from the admin panel using the "Broadcast Notification" feature.
- Verify
google-services.json(Android) andGoogleService-Info.plist(iOS) are properly placed.
error 9. Map Not Displaying / Location Issues
Cause: Map provider (RouteMappy) API key invalid, or location permissions denied.
Solution:
- Verify the map API key in Admin → Settings → Map Settings and in the mobile app configuration.
- Ensure location permissions are enabled for the app (device settings).
- Check that the device has an active internet connection.
- Restart the app after changing permissions.
- Contact RouteMappy team at sales@menpanitech.com for map service queries.
error 10. Doctor/Vendor Registration Stays Pending
Cause: The admin has not yet reviewed the user's documents.
Solution:
- Login to Admin Panel → Doctors or Vendors and locate the pending user.
- Click on the user, review the uploaded KYC and documents.
- Approve the account; they will receive a notification immediately.
error 11. Payment Gateway Not Working (Stripe/PayPal/Razorpay/Paystack/Flutterwave/M-Pesa)
Cause: API keys are incorrect or set to live mode without proper activation.
Solution:
- Go to Admin Panel → Payment Methods → Payment Methods and ensure the gateway is enabled.
- Double‑check the API keys in the
.envfile (e.g.,STRIPE_KEY,PAYPAL_*,RAZORPAY_KEY,FLUTTERWAVE_PUBLIC_KEY,MPESA_*). - Use test/sandbox keys first to verify the flow.
- Check that the webhook URL (if required) is correctly configured in the payment gateway dashboard.
error 12. OTP Not Received During Login
Cause: SMS gateway (Twilio) misconfiguration or insufficient balance.
Solution:
- Verify Twilio SID, Token, and sender number in the
.envfile. - Check your Twilio account balance and trial limitations.
- Make sure the phone number is entered with the correct country code.
- Retry after a short delay; carrier delays can occasionally occur.
error 13. Agora Video Call Not Working
Cause: Agora App ID or App Certificate missing/invalid.
Solution:
- Verify
AGORA_APP_IDandAGORA_APP_CERTIFICATEin the.envfile. - Ensure the Agora token generator (
agora-access-token-generator) is properly configured in the backend. - Check that the Customer and Doctor apps have the correct Agora App ID in their configuration.
- Verify network connectivity for video streaming.
error 14. Landing Page Not Showing Dynamic Content
Cause: API endpoint misconfigured or CMS sections not created.
Solution:
- Check
VITE_API_URLinfrontend/.envpoints tohttp://localhost:8000/api(or your live backend). - Log into Admin Panel → CMS → Sections and ensure sections are created and set to Active.
- Add content under CMS → Section Items for each section.
- Refresh the landing page after making changes.
error 15. Banners or Images Not Uploading in Admin
Cause: File size too large, unsupported format, or permission issues on the uploads folder.
Solution:
- Use JPG, PNG, or WebP images under 2 MB.
- Ensure the
storagefolder has write permissions andphp artisan storage:linkhas been executed. - In the Admin .env, check that
APP_ASSET_URLis set correctly.
error 16. Doctor Consultation Requests Not Appearing
Cause: Doctor is offline, consultation mode mismatch, or timing conflicts.
Solution:
- Confirm the doctor has set their status to Online in the doctor app.
- Check that the doctor's consultation mode matches the patient's request (In-clinic / Video / Home Visit).
- Verify that the doctor's available timings and leaves are correctly configured.
- In Admin Panel → Doctors → Doctor Availabilities, check the schedule.
error 17. Customer Unable to Order Medicines
Cause: Pharmacy vendor out of stock or order radius exceeded.
Solution:
- Check that the pharmacy vendor has stock available for the requested product.
- Verify the customer's location is within the vendor's delivery radius.
- In Admin Panel → Vendors, check the vendor's online status and order availability.
error 18. iOS Build Fails with "No such module" Error
Cause: CocoaPods not installed or outdated.
Solution:
- Navigate to the iOS directory:
cd ios && pod install
- If issues persist, update CocoaPods:
sudo gem install cocoapods - Open the
.xcworkspacefile (not.xcodeproj) in Xcode.
error 19. Filament Shield Permissions Not Working
Cause: Shield permissions not generated or super_admin role not assigned.
Solution:
- Run the Shield generation command:
php artisan shield:generate --all --option=permissions --panel=admin
- Assign super_admin role to the admin user via Tinker.
error 20. Pusher Real-time Chat Not Working
Cause: Pusher credentials missing or incorrect.
Solution:
- Verify
PUSHER_APP_*credentials in the backend.envfile. - Ensure the mobile apps have the correct Pusher configuration.
- Check that the Pusher cluster matches your app's configuration.
- Enable
broadcastinginconfig/app.php.
support_agent Need Additional Help?
If you encounter any issues not covered here, our support team is ready to assist.
Support Email:
Support Hours:
Monday – Friday
Response Time: Within 24–48 Business Hours
When contacting support, please include:
- Purchase Code
- Application Version
- Server Details (PHP version, database type)
- Error Screenshots or log snippets
- Steps to Reproduce the issue
This information helps us resolve your problem faster.
support_agent Contact Us
support_agent
Need Help?
If you encounter an error that is not listed above, please feel free to contact our support team for further assistance. We’re here to help.
Custom Development Services
If you need any custom work, additional features, or modifications to this application, our team is ready to help you build and scale your project efficiently.
What We Can Help With
code
Custom feature development based on your business needs
palette
UI/UX design improvements and branding customization
integration_instructions
Third-party API integrations (payment, SMS, maps, etc.)
speed
Performance optimization and scalability improvements
cloud_upload
Full project setup and deployment assistance
rocket_launch
Building large-scale applications from scratch
Hire Us
You can hire our development team for complete project development, from idea to deployment, including frontend, backend, and server setup.
call
Phone Number
+91 9150 441 443
language
Website
https://menpanitech.com/
mail
Email
sales@menpanitech.com
info
Important Note
Custom development services may involve additional cost and timeline depending on the scope and complexity of the project.
We’re happy to collaborate and bring your ideas to life