Drmech Docs - Installation Guide

info

What comes with Dr Mech

Customer Application, Partner Application, and Admin Panel — all included.

Introduction

Welcome to Dr Mech, a powerful B2B on-demand vehicle service platform designed to streamline car and bike maintenance operations for businesses. The platform connects enterprises with verified professional mechanics and authorized service partners, enabling organizations to efficiently manage, schedule, and track vehicle servicing through a centralized, easy-to-use system.

Core Features

Pickup & Delivery Scheduling
Order Tracking
Service Partner Module
Custom Service Options
Advanced Search Option
Customizable Advertisement Banners
Customizable Multiple Services
Payment Integration
Partner Dashboard
Flexible Working Hours
Service Partner KYC Verification

check_circle

White-Label Solution

Dr Mech is delivered as a white-label platform, allowing businesses to customize branding, configurations, services, and operational workflows according to their business requirements.

Getting Started

lightbulb

Prerequisite Knowledge

Basic knowledge of mobile application deployment, server configuration, Firebase services, and third-party API integrations is recommended before installation and customization.

verified Version Requirements

Ensure the following software versions are installed before proceeding:

Backend Requirements

PHP: 8.3 or 8.4 (8.3 recommended)
Laravel: 11.x or later
MySQL: 8.0
Composer: 2.5 or later
Apache/Nginx: Latest stable version

Frontend Requirements

Node.js: 20.x LTS or later
npm: 10.x or later
React: 18.3.1
Vite: 5.x or later
Tailwind CSS: 3.4.x

Android Development

Android Studio: 2024.1.1 (Ladybug) or later
Java JDK: 17 or later (JDK 21 recommended)
Android SDK: API Level 35 (Android 15)
Build Tools: 36.0.0 or later
Gradle: 8.10.2 or later
React Native: 0.77.1 or later

iOS Development (macOS only)

Xcode: 16.x or later (from Mac App Store)
iOS SDK: iOS 17+
CocoaPods: 1.15.x or later
macOS: Sonoma 14.5 or later
React Native: 0.77.1 or later
Apple Developer Account: Required for distribution ($99/year)

warning Important: Using older versions may cause compatibility issues. Always use the recommended versions.

System Requirements

Operating System:

Windows 10/11 (64-bit) - Pro or Enterprise recommended
macOS Monterey (12.0) or later (Sonoma 14.5+ recommended)
Linux (Ubuntu 20.04 LTS, 22.04 LTS, or equivalent)

Minimum Hardware:

Processor: Intel i5 10th Gen (or AMD Ryzen 5) or better
RAM: 8 GB (minimum), 16 GB recommended for Android Studio
Storage: 2 GB free disk space for dependencies, SDKs, and build files
Internet: Broadband connection required for downloading dependencies

Software Requirements

Tool/Software	Minimum Version	Recommended Version	Purpose
Node.js	v16.x LTS	v20.x LTS or v22.x	React Native & npm scripts
npm	v8.x	v10.x or later	Package management
PHP	8.1	8.2 or 8.3	Laravel backend
Composer	2.5	2.7 or later	PHP dependency manager
MySQL	5.7	8.0	Database
Android Studio	2023.1	2024.1 (Ladybug)	Android APK/AAB build
Java JDK	11	17 or 21	Android compilation
Xcode (macOS only)	15.0	16.0 or later	iOS IPA build
CocoaPods	1.12	1.15 or later	iOS dependencies
Git	2.30	Latest	Version control (optional)
VS Code	1.80	Latest	Code editor (recommended)
Web Browser	Chrome 120, Firefox 120, Edge 120	Latest version	Testing & debugging

XAMPP Installation

Download XAMPP from apachefriends.org (version 8.2+ recommended)
Install XAMPP on your system with default settings
After installation, start Apache and MySQL services from the XAMPP control panel
Verify installation by visiting http://localhost in your browser

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
Run the installer and follow the setup wizard
Ensure Composer is added to your system PATH
Verify installation: composer --version (should show 2.5+)

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 v20.x or higher

        # Check npm version
        npm --version    # Should show 10.x or higher

        # Check PHP version
        php --version    # Should show 8.2 or higher

        # Check Composer version
        composer --version  # Should show 2.5 or higher

        # Check MySQL version
        mysql --version  # Should show 8.0 or higher

        # Check Java version (for Android)
        java --version   # Should show 17 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.

Complete Technology Stack

Dr Mech is built using modern and scalable technologies to power customer applications, partner applications, and administrative operations.

Category	Technology	Version	Purpose
Mobile Applications (Customer & Partner)
Framework	React Native	0.77.1	Cross-Platform Mobile Development
UI Library	React	19.x	Application User Interface
Navigation	React Navigation	Latest	Screen Navigation
State Management	Redux Toolkit	Latest	Application State Management
HTTP Client	Axios	Latest	API Communication
JavaScript Engine	Hermes	Latest	Performance Optimization
React Admin Panel
Framework	React	18.x	Admin Dashboard User Interface
Build Tool	Vite	Latest	Development & Production Build
Routing	React Router DOM	6.x	Client-side Routing
HTTP Client	Axios	Latest	Backend API Communication
Icons	Lucide React	Latest	Dashboard Icons
Charts	Chart.js + React ChartJS 2	Latest	Analytics & Reports
Notifications	React Toastify	Latest	Toast Notifications
Dependency Manager	Composer	2.x+	PHP Package Management
HTTP Client	Guzzle HTTP	Latest	External API Communication
Firebase SDK	Kreait Firebase PHP	Latest	Firebase Services Integration
SMS Gateway	Twilio SDK	Latest	SMS & OTP Services
Android Development Environment
Node.js	Node.js	18+	JavaScript Runtime
Android SDK	Android SDK	35	Android Development Platform
Build Tools	Android Build Tools	36.0.0	Application Compilation
Minimum SDK	Android SDK	24	Minimum Supported Android Version
Target SDK	Android SDK	35	Target Android Version
Gradle	Gradle	8.10.2	Build Automation
Kotlin	Kotlin	2.0.21	Android Native Support
Android NDK	NDK	27.1.12297006	Native Library Support
Java	JDK	17	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
Third-Party Integrations
Push Notifications	Firebase Cloud Messaging	Latest	Real-Time Notifications
Authentication	Firebase Authentication	Latest	OTP Verification
Storage	Firebase Storage	Latest	Image & Document Uploads
Payment Gateway	Razorpay / Stripe	Latest	Online Payment Processing
Maps & Location	Google Maps API	Latest	Location Services & Navigation

Hosting & Production Server Requirements

Apache 2.4+ or Nginx 1.18+
PHP 8.2 or Higher
MySQL 8.0+
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.

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.

hub Third Party Services

Dr Mech integrates with several third-party services to provide functionality such as maps, notifications, authentication, email delivery, and payment processing. These services are not included with the purchase package and must be configured using your own accounts and credentials where applicable.

Service	Purpose	Required
RouteMappy Maps	Maps, Routing, Address Search & Location Services	Yes
Firebase Cloud Messaging (FCM)	Push Notifications	Yes
Firebase Authentication	OTP Verification & Authentication	Optional
SMTP Mail Service	Email Notifications, Password Reset & Verification	Yes
Twilio SMS	SMS Notifications & OTP Delivery	Optional
Razorpay	Online Payment Processing	Optional
Stripe	Online Payment Processing	Optional
PayPal	Online Payment Processing	Optional

map RouteMappy Maps

Dr Mech utilizes RouteMappy as its 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

warning Important Notice

API keys, payment gateway accounts, SMS credits, email service providers, hosting services, domain registration, SSL certificates, and RouteMappy subscriptions or licensing fees are not included with the purchase package. Buyers are responsible for creating and maintaining their own third-party service accounts and subscriptions where applicable.

Project Dependencies Overview

DrMech consists of two mobile applications:

person

Customer App

For end-users to book car services

build

Partner App

For service providers to manage bookings

info

Common Base Version: React Native 0.85.3 with React 19.2.3

Core Libraries

These libraries provide the core framework functionality and handle state management, navigation, API communication, and date processing.

Package	Version	Customer	Partner	Purpose
react	19.2.3	check_circle	check_circle	UI Library
react-native	0.85.3	check_circle	check_circle	Cross-platform mobile framework
react-redux	^9.3.0	check_circle	check_circle	State management
redux	^5.0.1	check_circle	check_circle	State container
axios	^1.16.1	check_circle	check_circle	HTTP client for API calls
moment	^2.30.1	check_circle	check_circle	Date and time formatting

Navigation Libraries

These libraries handle screen navigation, routing, and tab management within the applications.

Package	Version	Customer	Partner	Purpose
@react-navigation/native	^7.2.4	check_circle	check_circle	Core navigation library
@react-navigation/native-stack	^7.15.1	check_circle	check_circle	Stack navigation
@react-navigation/bottom-tabs	^7.16.1	check_circle	check_circle	Bottom tab navigation
@react-navigation/drawer	^7.10.2	check_circle	check_circle	Drawer/side menu navigation
@react-navigation/stack	^7.9.2	check_circle	check_circle	Stack navigation (legacy)
react-native-screens	^4.25.2	check_circle	check_circle	Native screen optimization
react-native-safe-area-context	^5.5.2	check_circle	check_circle	Safe area handling

Maps and Location

These libraries enable map rendering and location tracking within the application.

Package	Version	Customer	Partner	Purpose
@maplibre/maplibre-react-native	^10.2.1	check_circle	check_circle	Map rendering
react-native-maps	^1.27.2	check_circle	check_circle	Alternative map rendering
@react-native-community/geolocation	^3.4.0	check_circle	check_circle	GPS location services
react-native-android-location-enabler	^3.0.1	check_circle	check_circle	Android location services
react-native-fused-location	^1.1.2	cancel	check_circle	Fused location provider (Partner only)

Firebase Services

Firebase is integrated to support real-time notifications and data synchronization.

Package	Version	Customer	Partner	Purpose
@react-native-firebase/app	^24.0.0	check_circle	check_circle	Firebase core
@react-native-firebase/database	^24.0.0	check_circle	check_circle	Real-time database
@react-native-firebase/messaging	^24.0.0	check_circle	check_circle	Push notifications
@notifee/react-native	^9.1.8	check_circle	cancel	Enhanced notifications (Customer only)

UI and Animation Libraries

These libraries enhance the user interface and animation experience.

Package	Version	Customer	Partner	Purpose
react-native-reanimated	^4.3.1	check_circle	check_circle	Smooth animations
react-native-gesture-handler	^2.31.2	check_circle	check_circle	Gesture-based interactions
lottie-react-native	^7.3.8	check_circle	check_circle	Animated illustrations
react-native-paper	^5.15.3	check_circle	check_circle	Material Design components
react-native-vector-icons	^10.3.0	check_circle	check_circle	Icon library
react-native-svg	^15.15.5	check_circle	check_circle	SVG rendering
react-native-linear-gradient	^2.8.3	check_circle	check_circle	Gradient backgrounds
react-native-reanimated-carousel	^4.0.3	check_circle	check_circle	Carousel/slider component
react-native-animatable	^1.4.0	check_circle	check_circle	Pre-built animations
react-native-drop-shadow	^1.0.3	check_circle	check_circle	Drop shadow effects
react-native-shadow-2	^7.1.2	cancel	check_circle	Advanced shadow effects (Partner only)

Device Features

These libraries enable the application to interact with native device capabilities.

Package	Version	Customer	Partner	Purpose
react-native-image-picker	^8.2.1	check_circle	check_circle	Image selection from camera/gallery
react-native-fs	^2.20.0	check_circle	check_circle	File system access
react-native-haptic-feedback	^3.0.0	check_circle	check_circle	Device vibration/haptic feedback
react-native-device-info	^15.0.2	check_circle	cancel	Device information (Customer only)
react-native-sound	^0.13.0	check_circle	cancel	Audio playback (Customer only)
@react-native-async-storage/async-storage	^3.1.0	check_circle	check_circle	Local data persistence
@react-native-community/netinfo	^12.0.1	check_circle	check_circle	Network connectivity monitoring
@react-native-community/datetimepicker	^9.1.0	check_circle	check_circle	Date/time picker component
@react-native-clipboard/clipboard	^1.16.3	check_circle	cancel	Clipboard access (Customer only)
@react-native-picker/picker	^2.11.4	check_circle	check_circle	Dropdown/picker component

Payment Integration

The application integrates multiple payment gateways to support secure online transactions.

Package	Version	Customer	Partner	Purpose
react-native-razorpay	^3.0.0	check_circle	check_circle	Razorpay payment gateway
flutterwave-react-native	^1.0.4	check_circle	check_circle	Flutterwave payment gateway

Additional Libraries

Additional utility libraries used across the applications.

Package	Version	Customer	Partner	Purpose
i18next	^26.3.1	check_circle	check_circle	Internationalization
react-i18next	^17.0.8	check_circle	check_circle	React i18next integration
react-native-webview	^13.16.1	check_circle	check_circle	Web content rendering
react-native-version-number	^0.3.6	check_circle	check_circle	App version information
react-native-worklets	^0.9.1	check_circle	check_circle	Reanimated worklets
react-native-get-random-values	^2.0.0	check_circle	cancel	Cryptographic random values (Customer only)
@react-native-masked-view/masked-view	^0.3.2	check_circle	cancel	Masked view component (Customer only)

Customer-Only Libraries

These libraries are specific to the Customer application.

Package	Version	Purpose
@kanelloc/react-native-animated-header-scroll-view	^1.0.0	Animated header scroll view
react-native-animated-loader	^1.0.0	Animated loading indicators
react-native-app-intro-slider	^4.0.4	Onboarding/intro slides
react-native-calendars	^1.1314.0	Calendar component for booking
react-native-gifted-chat	^3.3.3	Chat/messaging interface
react-native-internet-connection-alert	^0.1.9	Internet connection alerts
react-native-modal	^14.0.0-rc.1	Modal dialog components
react-native-pager-view	^8.0.2	Pager/swipe view
react-native-phone-input	^1.3.7	Phone number input with country codes
react-native-progress	^5.0.1	Progress bars and indicators
react-native-ratings	^8.1.0	Star rating component
react-native-raw-bottom-sheet	^3.0.0	Bottom sheet component
react-native-skeleton-placeholder	^5.2.4	Skeleton loading placeholders
react-native-ui-stepper	^1.2.4	UI stepper component
react-native-dialog	^9.3.0	Dialog boxes
react-native-dialog-input	^1.0.8	Input dialog boxes
react-native-easy-content-loader	^0.3.2	Content loading placeholders
react-native-toast-message	-	Toast notification messages

Dependency Summary

person Customer App:

Total Dependencies: 88 packages
Unique Libraries: 18 customer-only
Base Version: React Native 0.85.3

build Partner App:

Total Dependencies: 67 packages
Unique Libraries: 2 partner-only
Base Version: React Native 0.85.3

check_circle Shared Libraries person Customer Only build Partner Only

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'

How Customers Use the Application

1

Sign Up & Create Profile

Download the DrMech Customer App from the provided link
Tap on "Sign Up" or "Register" button
Enter your full name, email address, and mobile number
Create a secure password (minimum 8 characters)
Verify your account via OTP sent to your mobile number
Complete your profile by adding:
- Home address and preferred service locations
- Vehicle details (make, model, year, license plate)
- Service preferences and reminders

2

Login to Your Account

Open the app and tap "Login" or "Sign In"
Enter your registered mobile number and password
Alternatively, login using OTP sent to your mobile
Enable "Remember Me" for faster future logins
After successful login, you will see the home screen with available services

3

Browse Services & Book an Appointment

Browse available service categories from the home screen:
- Engine Repair
- Body Repair
- Tire Services
- Car Wash
- Battery Services
- Full Service
Select your desired service type and view details
Enter your vehicle details or select from saved vehicles
Describe any specific issues or requirements
Choose a convenient date and time for the appointment
Select your preferred service location (home/office pickup or drop-off)
Review the service estimate shown on screen
Tap "Confirm Booking" to schedule the service

4

Track Service Progress

After booking, you will receive a confirmation notification
View your service status in real-time:
- Pending - Service request received
- Accepted - Partner confirmed the service
- In Progress - Service being performed
- Completed - Service finished
Receive real-time updates on each service stage
View partner details:
- Partner name and workshop name
- Contact number for communication
Use Chat option to communicate with the partner

5

Make Payment & Provide Feedback

After service completion, review the final invoice
Choose your preferred payment method:
- Card Payment - Credit/Debit card
- UPI - Google Pay, PhonePe, Paytm
- Net Banking - Direct bank transfer
- Wallet - App wallet balance
Apply promo codes or referral discounts (if available)
Complete payment securely through the payment gateway
Rate your experience from 1 to 5 stars
Leave a written review about the service quality
View and manage your service history anytime from your profile

6

Service History & Follow-ups

Access detailed records of all past services in your profile
View service details:
- Service date and time
- Service type and description
- Partner name and workshop
- Invoice amount and payment status
Receive reminders for future maintenance based on service history
Receive promotional offers and service recommendations
Schedule follow-up services with one tap

lightbulb Pro Tip: Save your vehicle details once and use them for faster booking. Enable notifications to receive real-time service updates!

Partner App Workflow

1

Register & Set Up Business Profile

Download and install the DrMech Partner App
Open the app and tap "Register as Partner"
Enter your business details:
- Workshop name and address
- Contact number and email
- Business registration number
- GST number (if applicable)
Set up your service offerings:
- Select service categories you provide
- Set pricing for each service type
- Define service area and operating hours
Configure payment options:
- Bank account details for payouts
- UPI ID for instant payments
Upload required documents for verification
Submit your application for admin approval
You will receive notification once approved

2

Login to Partner App

Open the app and tap "Login" or "Sign In"
Enter your registered mobile number or email
Enter your password
Alternatively, login using OTP sent to your mobile
Upon successful login, you will see the partner dashboard

3

Manage Service Requests

View incoming service requests in real-time
Each request shows:
- Customer name and contact details
- Vehicle details (make, model, year)
- Service type and description
- Preferred date and time
- Service location
Review the request details carefully
Tap "Accept" to confirm the service
Tap "Reject" with reason if unable to accommodate
Use Chat option to communicate with customer if needed

4

Perform Service & Update Progress

Confirm the appointment and prepare for service
On service day, update the status:
- Preparing - Getting ready for service
- In Progress - Service being performed
Add notes or photos during service for customer transparency
If additional work is needed:
- Send recommendation to customer
- Provide estimate for additional service
- Get customer approval before proceeding
Mark service as Completed when finished
Provide service summary and recommendations to customer

5

Receive Payment & View Earnings

After service completion, payment is processed
If customer pays online, payment is automatically credited
Go to "Earnings" section to view:
- Daily Earnings - Completed services for today
- Weekly Summary - Weekly performance
- Transaction History - All past transactions
- Admin Commission - Platform fee deduction
View detailed breakdown of each completed service
Request withdrawal of your earnings to bank account

6

Customer Feedback & Follow-ups

View customer ratings and reviews after each service
Respond to customer feedback and resolve any issues
Use service history to:
- Track customer service patterns
- Identify repeat customers
- Build long-term relationships
- Send follow-up reminders for future services
Offer loyalty discounts to regular customers
Maintain high service quality for better ratings

info Note: Partners must complete document verification before accepting services. Keep your documents updated and maintain high service standards for better ratings!

Admin Panel Overview

The DrMech Admin Panel provides complete control over the platform. Below is the detailed menu structure and functionality.

Menu Section	Sub-Menu Items	Functionality
Dashboard
Dashboard	-	Overview of platform analytics, revenue, and statistics
App Configuration
App Versions	-	Manage and update app versions for customers and partners
Settings	-	General platform settings and configurations
Content Management
Banners	-	Create and manage promotional banners for app home screen
Financial Settings
Taxes	-	Configure tax rates (GST, service tax) applicable to services
Platform Management
Statuses	-	Manage service status options (Pending, Accepted, In Progress, Completed)
Referral Settings	-	Configure referral program rewards and settings
FCM Notifications	-	Configure Firebase Cloud Messaging for push notifications
Service Management
Service Types	-	Define service categories (Engine Repair, Body Repair, Tire, Wash, Battery, Full Service)
Service Categories	-	Manage sub-categories under each service type
Services	-	Manage all available services with pricing and descriptions
Service Requests	-	View and manage all customer service requests
Service Statuses	-	Track service progress status for all active services
Service Promo Codes	-	Create and manage promotional discount codes
App Settings
Customer App Settings	-	Configure customer app settings and features
Map Settings	-	Configure map integration and location services
Partner App Settings	-	Configure partner app settings and features
Customer Management
Customers	-	View and manage all registered customers
Customer Wallet History	-	View customer wallet transactions and balances
Partner Management
Partners Module	-	Manage all registered partners and their profiles
Documents	-	Review and verify partner documents
Earnings	-	View partner earnings and commission breakdown
Wallet Histories	-	View partner wallet transactions
Withdrawals	-	Manage partner withdrawal requests and payouts
Payment Management
Payments	-	View and manage all payment transactions
Payment Types	-	Configure accepted payment methods (Card, UPI, Wallet, Net Banking)
Payment Modes	-	Manage payment mode configurations
Content & Legal
Faq Categories	-	Organize frequently asked questions by categories
Faqs	-	Create and manage FAQs for customers and partners
Privacy Policies	-	Manage privacy policy content
Terms And Conditions	-	Manage terms and conditions content
Support
Customer Enquiries	-	View and respond to customer support enquiries

Key Admin Workflows

Partner Management

Review partner registrations
Verify uploaded documents
Approve/Reject partner applications
Monitor partner performance
Manage withdrawals and payouts

Service & Booking Management

Monitor all service requests
Track service completion status
Manage service categories and types
Configure pricing and promo codes
Generate service reports

Financial Management

View all payment transactions
Track revenue and commissions
Manage partner payouts
Configure tax settings
Generate financial reports

App Configuration

Update app versions
Configure FCM notifications
Manage banners and promotions
Set referral program
Configure map and location settings

admin_panel_settings

Access URL: http://yourdomain.com/admin Default Credentials: admin / admin

warning Security Note: Change default admin password immediately after first login!

System Requirements

Before installing, ensure your server meets these requirements:

Backend (Laravel)

PHP 8.3 or 8.4
Composer Latest Version
MySQL 5.7+

Frontend (React)

Node.js 18.x or above
npm 9.x or above (or Yarn)
Vite Supported Environment

info

Required Software: XAMPP / WAMP / LAMP, Composer, Node.js, Git (Optional), VS Code (Recommended)

Installation Steps

1
Extract Source Code

Extract the downloaded package. You will find two folders: Admin/ (Laravel backend) and Frontend/ (React).
2
Move to XAMPP

Copy both folders into xampp/htdocs/

info
Example: xampp/htdocs/Admin and xampp/htdocs/Frontend

Backend (Laravel) Configuration

3
Open Terminal in Admin Folder

cd C:\xampp\htdocs\Admin
4
Install Laravel Dependencies

Run Composer install:

composer install

If Composer is not installed, download from getcomposer.org
5
Copy Environment File

If .env doesn't exist, create from example:

cp .env.example .env (Linux/Mac) or copy .env.example .env (Windows)
6
Configure .env File

Open Admin/.env and update these values:
Application Settings

APP_NAME=YourAppName APP_ENV=local APP_DEBUG=true APP_URL=your-api-url IMG_URL=your-api-url/public/uploads/ APP_MODE=DEMO

Database Configuration

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=your_database_name DB_USERNAME=your_db_username DB_PASSWORD=your_db_password

Mail Configuration

MAIL_HOST=smtp.yourmail.com MAIL_PORT=587 MAIL_USERNAME=your_email@example.com MAIL_PASSWORD=your_email_password MAIL_ENCRYPTION=tls MAIL_FROM_ADDRESS="your_email@example.com" MAIL_FROM_NAME="${APP_NAME}"

RouteMappy (instead of Google Maps)

ROUTEMAPPY_API_KEY=your_routemappy_api_key ROUTEMAPPY_BASE_URL=https://api.routemappy.com/v1

RouteMappy provides mapping, directions, geocoding, and distance matrix services.
Firebase 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
1. Open the Firebase Console.
2. Select your Firebase Project.
3. Go to Project Settings → Service Accounts.
4. Click "Generate New Private Key".
5. 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.json

Step 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_id

check_circle

Firebase Connected

Once the JSON file is uploaded and the .env values are updated, the application will automatically connect to your Firebase project.

shield

Security 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.
Twilio SMS Configuration

TWILIO_SID=your_twilio_sid TWILIO_TOKEN=your_twilio_token TWILIO_FROM=+1234567890

Required only if SMS verification is enabled.

Mode Setting

MODE=DEMO

Set to LIVE for production mode.
7
Create Database

Open http://localhost/phpmyadmin and create a new database.

info
Example: your_database — Use the same name as DB_DATABASE in your .env file.
8
Import Database

Import the SQL file from Admin/database/database.sql using phpMyAdmin.

info
The SQL file contains all required tables and initial data.
9
Create Storage Link

php artisan storage:link

This command is required for image uploads to work properly.
10
Clear Cache

php artisan optimize:clear

Or run individually: php artisan config:clear, php artisan cache:clear, php artisan route:clear, php artisan view:clear
11
Start Laravel Server

php artisan serve

Laravel will run on http://127.0.0.1:8000

Frontend (React) Configuration

12
Open Frontend Folder

cd C:\xampp\htdocs\Frontend
13
Install Dependencies

npm install

info
Troubleshooting: If npm fails, delete node_modules and package-lock.json, then run npm install again.
14
Install Missing Packages (If Needed)

Sometimes npm may report missing packages. Install them individually:

npm install react-router-dom npm install chart.js npm install react npm install react-chartjs-2 npm install react-dom npm install react-toastify npm install axios npm install firebase npm install lucide-react
15
Frontend Environment Variables

If your project includes .env file, update these values:

VITE_APP_NAME=Your App Name VITE_API_ORIGIN=your-api-url
16
Start React Development Server

npm run dev

React will run on http://localhost:5173 (or the port shown in terminal).

Login Credentials

Use these default credentials to log in to the admin panel:

Username:	admin
Password:	admin
Access Level:	Super Administrator

shield

Security Alert: Change these credentials immediately after first login.

Common Installation Issues

Composer not found

Install Composer, restart Command Prompt, then run composer install.

PHP Artisan not working

Check PHP version with php -v. Ensure PHP is added to system PATH.

Vendor folder missing

Run composer install to install all dependencies.

Node Modules missing

Run npm install from the Frontend folder.

npm command not found

Install Node.js and restart your terminal.

Images not loading

Run php artisan storage:link and verify IMG_URL in .env.

Database connection error

Verify database name, username, password in .env, and ensure MySQL is running.

Firebase not working

Check Firebase JSON file, FIREBASE_DB, and Sender ID.

RouteMappy not loading

Verify ROUTEMAPPY_API_KEY and ensure the API key has necessary permissions.

SMS OTP not working

Verify Twilio SID, Token, Phone Number, and account balance.

Mail not sending

Verify SMTP credentials and ensure your mail provider allows SMTP access.

Production Checklist

Change APP_ENV=production
Set APP_DEBUG=false
Configure the correct APP_URL and IMG_URL
Replace all demo API keys with production keys
Configure RouteMappy production credentials
Configure Firebase production credentials
Configure Twilio production credentials
Configure SMTP email credentials
Set appropriate folder permissions for storage and bootstrap/cache
Run php artisan optimize
Verify database backups are enabled
Change the default admin password
Remove any demo data before going live

info

Project Type: React.js Single Page Application with Vite
Purpose: Dr. Mech - Car Care Service Landing Page
Features: Responsive design, video hero, services showcase, testimonials, FAQ, WhatsApp 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


    dr-mech-landing-page/

    ├── node_modules/          # Dependencies

    ├── public/                # Static assets

    │   └── vite.svg          # Vite favicon

    ├── src/

    │   ├── assets/           # Images, icons, videos

    │   │   ├── Accheck.webp       # AC Service image

    │   │   ├── BatteryCheck.webp  # Battery service image

    │   │   ├── Carwashing.webp    # Car wash image

    │   │   ├── contact.webp       # Contact section bg

    │   │   ├── Drmechlanding.webm # Hero video

    │   │   ├── Launderposter.webp # Video poster

    │   │   ├── logo.webp          # Company logo

    │   │   ├── Logo.webp          # Alternative logo

    │   │   ├── Mockup.webp        # App mockup

    │   │   └── Periodicservices.webp # Periodic service

    │   ├── Data/

    │   │   └── js data.js    # ALL content data

    │   ├── Landingpage/

    │   │   └── Landingpage.jsx  # Main component

    │   ├── Theme/

    │   │   └── js theme.js   # Theme configuration

    │   ├── App.css           # Global styles

    │   ├── App.jsx           # Root component

    │   ├── index.css         # Tailwind imports

    │   └── main.jsx          # Entry point

    ├── .gitignore            # Git ignore rules

    ├── eslint.config.js      # ESLint configuration

    ├── index.html            # HTML template

    ├── package-lock.json     # Locked dependencies

    ├── package.json          # Project dependencies

    ├── README.md             # Project documentation

    └── vite.config.js        # Vite configuration

Installation Steps

1
Extract the Project Files

Extract the downloaded ZIP file to your desired location.

info
Recommended: Extract to ~/Projects/dr-mech-landing-page/
2
Open Terminal in Project Folder

cd path/to/dr-mech-landing-page
3
Install Dependencies

Run npm install to install all required packages:

npm install
4
Start Development Server

Launch the development server:

npm run dev

The application will be available at http://localhost:5173

Content Customization

Edit Data File

Open src/Data/js data.js to modify all content. Here's what each section controls:

1. Navbar Data


    // Navbar configuration

    export const navbarData = {

      logo,  // Imported from assets

      menuLinks: [

            { id: 'features', label: 'Features' },

            { id: 'how-it-works', label: 'How It Works' },

            { id: 'testimonials', label: 'Testimonials' },

            { id: 'faq', label: 'FAQ' },

            { id: 'contact', label: 'Contact' }

      ],

      download: {

            label: 'Download App',

            url: 'https://play.google.com/store/apps/details?id=com.dr_mech_pro.customer'

      }

    };

2. Hero Data


    // Hero section configuration

    export const heroData = {

      video: ServiceVideo,      // Background video

      poster: launderPoster,    // Video thumbnail

      headingHighlight: 'Next-Gen Vehicle Care,',

      headingMain: 'One Tap Away.',

      description: 'Manage all your car and bike services with a smart app...',

      buttons: [

            { label: 'Download on Play Store', icon: 'fab fa-google-play', href: '...' },

            { label: 'Explore the App', icon: 'fas fa-arrow-right', href: '...' }

      ]

    };

3. Features Data


    // Features section

    export const featuresData = {

      heading: 'Powerful Features',

      subheading: 'Dr Mech is loaded with smart tools...',

      items: [

            {

              title: 'Multi-Service Booking',

              description: 'Book multiple vehicle services in one go...',

              icon: 'fa-tasks'

            },

            // ... more features

      ]

    };

4. Services Data


    // Services configuration

    export const servicesData = {

      heading: 'Our Services',

      subheading: 'Reliable car and bike maintenance services...',

      items: [

            {

              title: 'AC Service & Repair',

              description: 'Keep your vehicle cool with expert AC diagnostics...',

              image: ACServiceImg,

              points: ['AC Gas Refill', 'Cooling Performance Check', 'AC Filter Replacement']

            },

            // ... more services

      ]

    };

5. How It Works Data


    // How it works steps

    export const howItWorksData = {

      heading: 'How Dr Mech Works',

      subheading: 'Dr Mech simplifies car and bike servicing...',

      steps: [

            { icon: 'fa-mobile-alt', title: 'Book via App', desc: 'Choose your vehicle...' },

            // ... more steps

      ]

    };

6. Testimonials Data


    // Testimonials

    export const testimonialsData = {

      heading: 'What Our Users Say',

      subheading: 'Hear from customers and vendors who love using Dr mech.',

      testimonials: [

            {

              id: 1,

              name: 'Ravi Mehta',

              role: 'Customer',

              rating: 5,

              text: 'Dr mech made my car service hassle-free!...'

            },

            // ... more testimonials

      ]

    };

7. App Section Data


    // App section (Why choose us / Mobile app)

    export const appSection = {

      appScreen,  // Mockup image

      title: 'Experience Our Mobile App',

      description: 'Download the Dr mech app for a seamless booking experience...',

      features: [

            { icon: 'fas fa-clipboard-list', title: 'Order History', description: '...' },

            // ... more features

      ],

      buttons: [

            { type: 'google', labelTop: 'Get it on', labelBottom: 'Google Play', link: '...' },

            { type: 'apple', labelTop: 'Download on the', labelBottom: 'App Store', link: '#' }

      ]

    };

8. FAQ Data


    // FAQ section

    export const faqData = {

      heading: 'Frequently Asked Questions',

      subheading: 'Find answers to common questions about Dr mech.',

      faqs: [

            {

              question: 'How do I book a car or bike service on Dr mech?',

              answer: 'Download the Dr mech app, register your vehicle...'

            },

            // ... more FAQs

      ]

    };

9. Contact Data


    // Contact section with WhatsApp

    export const contactData = {

      bgImage,  // Background image

      heading: "Need Help? We're Just a Message Away",

      subheading: 'Stuck with a booking or have questions...',

      whatsapp: {

            number: 'Your Number',

            message: 'Your Message'

      },

      buttonLabel: 'Contact Us'

    };

10. Footer Data


    // Footer configuration

    export const Footer = {

      companyInfo: {

            name: 'Dr Mech',

            description: 'Seamless car and bike service at your fingertips...',

            socialLinks: [

              { icon: 'fab fa-facebook-f', url: '#' },

              // ... more social links

            ]

      },

      quickLinks: [

            { name: 'Features', href: '#features' },

            // ... more links

      ],

      services: ['AC Service & Repair', 'Car Wash & Detailing', ...],

      downloadApp: {

            text: 'Get the Dr Mech app for iOS and Android...',

            stores: [

              { label: 'Google Play', url: '...', icon: 'fab fa-google-play' },

              // ... more stores

            ]

      },

      footerBottom: {

            copyright: '© 2025 Dr Mech. All rights reserved.',

            policies: [

              { name: 'Privacy Policy', url: '#' },

              // ... more policies

            ]

      }

    };

Theme Customization

Open src/Theme/js theme.js to customize colors and fonts:


    // src/Theme/js theme.js


    const theme = {

      colors: {

            primary: '#FFC423',          // Brand Yellow

            primaryDark: '#e0ac00',      // Darker hover shade

            primaryLight: '#ffe68c',     // Light highlight

            primaryMuted: '#FFC42333',   // Muted for backgrounds

            black: '#1A1A1A',            // Text color

            white: '#FFFFFF',

            gray: '#F7F7F7',             // Background

            grayDark: '#CCCCCC',         // Borders

            textDefault: '#1A1A1A',

            textLight: '#666666',

            success: '#10a84b',

            danger: '#FF4D4D',

            info: '#2D9CDB',

            overlay: 'rgba(0, 0, 0, 0.1)'

      },

      font: {

            base: "'Poppins', sans-serif",

            heading: "'Poppins', sans-serif"

      }

    };


    export default theme;

palette

Color Guide:
• #FFC423 - Primary Yellow (Brand Color)
• #1A1A1A - Text Color
• #F7F7F7 - Background Gray

Image Replacement Guide

All images are stored in src/assets/ folder:

File Name	Purpose	Used In
logo.webp / Logo.webp	Company logo	Navbar, Footer
Drmechlanding.webm	Hero background video	Hero Section
Launderposter.webp	Video poster/thumbnail	Hero Section
Mockup.webp	App mockup/phone image	App Section
Accheck.webp	AC Service image	Services Section
BatteryCheck.webp	Battery service image	Services Section
Carwashing.webp	Car wash service image	Services Section
Periodicservices.webp	Periodic service image	Services Section
contact.webp	Contact section background	Contact Section

image

How to replace: Replace the file in src/assets/ with your own image. Keep the same filename to avoid updating imports, or update the import path in js data.js.

Available Scripts

Command	Description
`npm run dev`	Start development server at localhost:5173
`npm run build`	Build production-ready files in `dist/` folder
`npm run preview`	Preview the production build locally
`npm run lint`	Run ESLint to check code quality

Deployment Guide

1. Build for Production

npm run build

This creates a dist/ folder with optimized files.

2. Deploy to Hosting

Vercel: npx vercel --prod
Netlify: Drag and drop the dist/ folder
GitHub Pages: Deploy with npm run build and commit
AWS S3: Upload the dist/ folder to S3 bucket
Traditional Hosting: Upload via FTP to public_html

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.

❌ Images not loading

Check image paths in src/Data/js data.js. Ensure images are in src/assets/ folder.

❌ Video not playing

Check if Drmechlanding.webm exists in src/assets/. Ensure the file is not corrupted.

❌ Port 5173 already in use

Run npm run dev -- --port 3000 to use a different port.

❌ CSS not updating

Clear browser cache (Ctrl+Shift+Delete) or use incognito mode.

check_circle

Ready to deploy? After completing the checklist, run npm run build and upload the dist/ folder to your hosting provider.

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 Drmech_customer/android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.Drmech.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 Drmech Customer app has been successfully updated in your system. Follow the same process for other applications.

Changing App Name

folder_open Drmech/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

Android Configuration

folder_open Drmech/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.

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

Track the evolution of the Dr Mech platform through major releases, feature additions, improvements, and optimizations.

new_releases

Version 2.0.0

Latest Release

calendar_today August 2025

directions_car
Vehicle Management Module
Added support for multiple customer vehicles with vehicle history tracking and default vehicle selection.
map
RouteMappy Maps Integration
Integrated RouteMappy for address search, location services, route optimization, and service area management.
dark_mode
Dark & Light Theme Support
Added complete dark mode and light mode support across customer and partner applications.
payments
Additional Payment Gateways
Added support for Paystack and Flutterwave payment processing.

Version 1.3.0

July 2025

✓ React Native version upgrade
✓ Admin panel performance improvements
✓ Improved booking workflow
✓ Service request optimization
✓ UI and responsiveness enhancements
✓ Minor bug fixes and stability improvements

Version 1.2.0

February 2025

✓ Improved login and registration flow
✓ Better internet connectivity handling
✓ Haptic feedback support
✓ Enhanced notification management
✓ UI refinements and performance improvements
✓ Bug fixes and security updates

Version 1.1.0

September 2024

✓ Service status management improvements
✓ Customer wallet enhancements
✓ Partner earnings tracking
✓ Referral system improvements
✓ Enhanced admin reporting tools
✓ General bug fixes

Version 1.0.0

March 2024

✓ Initial Release
✓ Customer Mobile Application
✓ Partner Mobile Application
✓ Admin Panel
✓ Service Booking & Scheduling
✓ Service Categories & Management
✓ Wallet & Payment Management
✓ Push Notifications
✓ FAQ & CMS Management

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.json file
Place the file in: Drmech_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

Clients must update the bundle identifier to match their application package.

Example: com.clientname.Drmech

Android

Update in:

folder_open android/app/build.gradle

applicationId "com.clientname.Drmech"

Rename the Java package directory:

folder_open android/app/src/main/java/com/clientname/Drmech

Generate a signing keystore:

keytool -genkey -v \
    -keystore Drmech.keystore \
    -alias Drmech \
    -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=Drmech.keystore
MYAPP_UPLOAD_KEY_ALIAS=Drmech
MYAPP_UPLOAD_STORE_PASSWORD=yourpassword
MYAPP_UPLOAD_KEY_PASSWORD=yourpassword

Generate APK

cd android
./gradlew assembleRelease

APK location: android/app/build/outputs/apk/release/app-release.apk

Generate Play Store Bundle

cd android
./gradlew bundleRelease

Output: android/app/build/outputs/bundle/release/app-release.aab

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.

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.

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/Drmech/GoogleService-Info.plist

Steps in Xcode:

Open the iOS project in Xcode.
Drag and drop the GoogleService-Info.plist file 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.

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/Drmech.xcworkspace
Select the main application target.
Go to the General tab.
Update the Bundle Identifier field.

Example: com.clientname.taxiapp

Ensure that the Bundle Identifier matches exactly with the one used in the Firebase configuration file, otherwise services may not work correctly.

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/Drmech/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)

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.

To publish your application to the App Store, you must generate a release build using Xcode.

Steps:

Open the project in Xcode: ios/Drmech.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.

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"

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/Drmech/Images.xcassets/AppIcon.appiconset

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 driver locations, trip routes, and navigation paths within the app.

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 Drmech/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

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.

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.

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.

info
Note: You must have 2-Step Verification enabled to generate an App Password.
Step 3: Generate App Password

While still in the Security section:
1. Find the "App passwords" option (under 2-Step Verification)
2. Click "create"
3. 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).

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 devices

Confirm 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:\Drmech_customer

Install project dependencies:

npm install

Execute the application:

npx react-native run-android

FAQ & Troubleshooting

1. Installation Dependencies Failed (`npm install` or `yarn install`)

Cause: Missing or outdated Node.js version, unstable internet connection, or running commands from the wrong directory.

Solution:

Ensure Node.js is installed and updated to the recommended version.
Open terminal inside the project root directory.
Run:

npm install

If the issue persists:

rm -rf node_modules package-lock.json
npm install

2. Module Not Found Error

Cause: Missing dependencies, incorrect import paths, or incomplete project extraction.

Solution:

Verify all project files are extracted correctly.
Check import paths.
Reinstall dependencies:

npm install

Restart the development server.

3. Firebase Configuration Issues

Cause: Firebase project setup is incomplete or configuration files are missing.

Solution:

Verify Firebase project settings.
Download and configure:
- google-services.json (Android)
- GoogleService-Info.plist (iOS)
Ensure Firebase Cloud Messaging (FCM) is enabled.
Verify package names and bundle identifiers match Firebase configuration.

4. Environment Variables Not Configured

Cause: Missing or incomplete environment configuration.

Solution:

Copy the sample environment file.
Rename it to .env.
Configure all required values.

Example:

API_URL=https://your-api-url.com
APP_NAME=DrMech

Restart the application after updating environment variables.

5. Android Device Not Detected

Cause: USB debugging is disabled or device drivers are not installed.

Solution:

Enable Developer Options.
Enable USB Debugging.
Connect the device using a supported USB cable.
Verify detection:

adb devices

Accept the authorization prompt on the device.

6. License or Purchase Code Validation Issues

Cause: Invalid, missing, or incorrectly entered Envato purchase code.

Solution:

Login to your Envato account.
Navigate to Downloads.
Download the License Certificate & Purchase Code.
Copy the purchase code and enter it correctly.

7. Application Not Loading After Installation

Cause: Missing configuration, incorrect API URL, or application initialization errors.

Solution:

Verify API configuration.
Check environment variables.
Verify backend server is running.
Review console logs for detailed errors.
Clear application cache and rebuild.

8. Admin Panel Database Import Issues

Cause: Incorrect database credentials or failed SQL import.

Solution:

Create a new database.
Import the provided SQL file.
Update database credentials in the backend configuration.
Verify database connection settings.
Restart the backend server.

9. Push Notifications Not Working

Cause: Firebase Cloud Messaging (FCM) is not configured properly.

Solution:

Verify Firebase project configuration.
Confirm FCM Server Key is configured.
Ensure notification permissions are granted on the device.
Test notifications from:

Admin Panel → Settings → FCM Notifications

Verify device internet connectivity.

10. RouteMappy Map Not Displaying

Cause: RouteMappy configuration is incomplete or map services are unavailable.

Solution:

Verify RouteMappy configuration settings.
Check internet connectivity.
Confirm location permissions are enabled.
Verify map settings from:

Admin Panel → App Configuration → Map Settings

Contact RouteMappy support if API access or licensing assistance is required.

11. Partner Registration Remains Pending

Cause: Partner account is awaiting administrator approval.

Solution:

Login to Admin Panel.
Navigate to:

Partners Module → Documents

Review uploaded documents.
Approve or reject the registration.
The partner will receive a notification after approval.

12. Payment Gateway Not Working

Cause: Payment credentials are incorrect or payment methods are disabled.

Solution:

Verify payment gateway credentials.
Confirm gateway status is enabled.
Check configuration under:

Payments → Payment Types
Payments → Payment Modes

Test using sandbox credentials before going live.

13. OTP Verification Not Received

Cause: SMS service provider configuration is incomplete or delayed.

Solution:

Verify SMS gateway credentials.
Confirm mobile number format is correct.
Check SMS provider balance and status.
Retry OTP after a few minutes.

14. Customer or Partner Unable to Login

Cause: Incorrect credentials, inactive account, or account suspension.

Solution:

Verify registered mobile number or email.
Reset password using the Forgot Password option.
Ensure account status is active in Admin Panel.
Verify OTP services are functioning properly.

15. Images or Banners Not Uploading

Cause: File size exceeds server limits or unsupported file format.

Solution:

Upload supported image formats (JPG, PNG, WEBP).
Reduce image size.
Verify upload permissions on the server.
Check storage availability.

16. Service Requests Not Appearing for Partners

Cause: Partner service area, categories, or status configuration is incorrect.

Solution:

Verify partner account is approved.
Check assigned service categories.
Confirm service area coverage.
Ensure partner status is active.
Verify booking status configuration.

support_agent Need Additional Help?

If you encounter any issues that are not covered in this documentation, please contact our support team.

Support Email:

sales@menpanitech.com

Support Hours:

Monday – Friday

Response Time: Within 24–48 Business Hours

Please include the following information when contacting support:

Purchase Code
Application Version
Server Information
Error Screenshot (if available)
Detailed Issue Description

This will help us provide faster and more accurate assistance.

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

Overview

What comes with Dr Mech

Introduction

Core Features

White-Label Solution

Getting Started

Prerequisite Knowledge

verified Version Requirements

Backend Requirements

Frontend Requirements

Android Development

iOS Development (macOS only)

System Requirements

Operating System:

Minimum Hardware:

Software Requirements

XAMPP Installation

Composer Installation

Verify Your Installation

Complete Technology Stack

Hosting & Production Server Requirements

Important Note

hub Third Party Services

map RouteMappy Maps

warning Important Notice

Project Dependencies Overview

Customer App

Partner App

Core Libraries

Navigation Libraries

Maps and Location

Firebase Services

UI and Animation Libraries

Device Features

Payment Integration

Additional Libraries

Customer-Only Libraries

Dependency Summary

Build Configuration

Gradle Plugin Configuration

How Customers Use the Application

Sign Up & Create Profile

Login to Your Account

Browse Services & Book an Appointment

Track Service Progress

Make Payment & Provide Feedback

Service History & Follow-ups

Partner App Workflow

Register & Set Up Business Profile

Login to Partner App

Manage Service Requests

Perform Service & Update Progress

Receive Payment & View Earnings

Customer Feedback & Follow-ups

Admin Panel Overview

Key Admin Workflows

Partner Management

Service & Booking Management

Financial Management

App Configuration

System Requirements

Backend (Laravel)

Frontend (React)

Installation Steps

Extract Source Code

Move to XAMPP

Backend (Laravel) Configuration

Open Terminal in Admin Folder

Install Laravel Dependencies

Copy Environment File

Configure .env File

Application Settings

Database Configuration

Mail Configuration

RouteMappy (instead of Google Maps)

Firebase Configuration

Step 1: Download Firebase Service Account

Step 2: Upload the JSON File

Step 3: Update the .env File

Twilio SMS Configuration