Engineering a Seamless Digital Diagnostic & Booking Ecosystem for Silchar's Premier Pathology Centre
How we built Metro-City Diagnostics' full-stack web application from scratch, integrating Razorpay checkout, automated Google Sheets logging, WhatsApp intents, and sub-second mobile performance.
Client
Metro-City Diagnostics
Location
Silchar, India
Timeline
3 Weeks
Role
Full-Stack Developer & SEO Specialist
Team
2 people
Live Site
www.metrocitydiagnostics.comMetro-City Diagnostics is a leading pathology laboratory and diagnostic centre located in Meherpur, Silchar, Assam (Barak Valley). Prior to this project, patients faced friction in discovering available diagnostic packages (such as TruHealth and MM B2B checkups), viewing specialist doctor schedules, and booking home sample collections. We were hired to design and develop a fast, accessible, and comprehensive digital ecosystem that converts local search traffic into confirmed lab test orders and specialist doctor consultations.
Client Results
100% Core Web Vitals & Accessibility
Achieved 100/100 ratings in Accessibility, SEO, and Best Practices with a sub-1.2s mobile Largest Contentful Paint.
91% Asset Size Reduction
Compressed over 13.5 MB of raw PNG assets to under 1.1 MB of high-fidelity WebP files using custom Sharp scripts.
Resolved GSC Indexing & Canonical Errors
Fixed non-www to www canonical mismatch, clearing Google Search Console coverage errors and ensuring full page indexing.
Automated Zero-Server Order Pipeline
Eliminated manual appointment logging by handling payment verification and spreadsheet tracking automatically.
Lighthouse Audit
Google Search Console
Performance Overview
Core Web Vitals
The clinic required a modern web presence to compete in local search rankings while solving key operational challenges: 1. Patients in Barak Valley lacked a single trusted portal to check test pricing, fasting prep rules, and turnaround times. 2. Manual telephone booking created long response delays during peak clinic hours. 3. Google Search Console reported critical "Discovered - currently not indexed" errors caused by canonical non-www/www domain redirection conflicts. 4. Large raw media assets (~13.5 MB of uncompressed PNG images and video posters) severely degraded mobile loading speeds on 3G/4G networks. 5. The client needed a zero-database cost model with instant payment processing via Razorpay and automated order tracking without maintaining complex database servers.
- 01
Build a responsive Next.js 16 + React 19 web platform optimized for mobile viewports (70%+ traffic).
- 02
Integrate Razorpay Standard Web Checkout and Google Sheets Apps Script API for automated real-time transaction logging.
- 03
Implement a dual-tab booking system supporting both pathology lab tests (with home collection) and specialist doctor appointments.
- 04
Diagnose and resolve Google Search Console canonical redirection conflicts (www vs non-www) to ensure 100% indexing.
- 05
Achieve 100/100 Lighthouse ratings in Accessibility, Best Practices, and SEO through WCAG AA contrast adjustments, WebP asset compression, and heading structure fixes.
- 06
Provide silent background PDF receipt generation using jsPDF and instant WhatsApp Chrome Intent deep-linking for mobile users.
We engineered a serverless Next.js 16 application backed by a file-based CMS (`lib/content.ts`, `lib/labtests.json`, `lib/doctors.json`). For online bookings, we implemented server-side price verification in `/api/create-order` to prevent payment tampering, coupled with Razorpay checkout and an HMAC-SHA256 signature verification route (`/api/verify-payment`) that logs status (`PENDING`, `PAID`, `CANCELLED`) to a Google Sheet via a secure proxy webhook. To optimize performance and accessibility, we executed a 91% image compression pass using `sharp` (converting raw PNGs to high-fidelity WebPs), corrected theme color contrast variables (`--color-gold-600` and `--color-gold-700`), fixed heading outline jumps (h4 to h3), added WebVTT video captions, and implemented timezone-independent date formatters (`formatDate`) to eliminate React hydration errors.
Key Features
Dual-Tab Online Booking Engine
Interactive booking flow separating Lab Tests (with home sample collection address inputs) and Doctor Consultations with dynamic next-6-days calendar slot generation.
Razorpay & Google Sheets Sync
Secure server-verified Razorpay checkout flow with automated Google Sheets logging for real-time order status updates (PENDING, PAID, CONFIRMED).
Interactive Doctors & Services Directory
Filterable, searchable catalogs for 15+ specialist doctors and 40+ diagnostic tests/packages with tier-based color identities.
Silent PDF Invoice & Android WhatsApp Intent
Background PDF receipt download using jsPDF and specialized Android Chrome Intent URI scheme for direct WhatsApp app launch.
Facility Wings Lightbox Gallery
Interactive gallery with category filtering, full-screen lightbox image carousel, and infinite scrolling marquee.
Local Discovery Strategy
NAP Consistency
Metro-City Diagnostics | Co-operative, near Vivekananda, Meherpur, Birbal Bazar, Silchar, Assam 788015 | Phone: +91 99573 57278
Local Keywords
Target Areas
“The new Metro-City Diagnostics web application has transformed our patient operations. Online booking with direct Razorpay payments and automatic Google Sheets logging has drastically reduced manual scheduling calls at our front desk. The speed, elegant design, and local search rankings in Silchar are exceptional.”
Metro-City Diagnostics Admin
Managing Director · Metro-City Diagnostics
Want results like
this?
We build premium digital presences for local businesses that want to dominate their market.