Provider Search

Interactive healthcare provider directory with map-based search, filtering, and detailed provider profiles.

2025-01 - PresentCompleted

Interactive healthcare provider directory with map-based search, filtering, and detailed provider profiles.

Next.jsReactTypeScriptMapbox GLTailwind CSSshadcn/ui

Overview

The Provider Search module is an interactive demonstration of a healthcare provider directory system. Users can search for doctors, specialists, and healthcare facilities using a dynamic map interface with comprehensive filtering options.

Key Features

An interactive Mapbox GL map displays provider locations with clustering for dense areas. Users can click markers to view provider details or use the search panel to filter results.

Comprehensive Search Criteria

Required Fields:

  • Provider Type — Search for Individual providers (doctors, specialists) or Facilities (clinics, hospitals)
  • Plan Year — Select 2025 or 2026 coverage year
  • Health Plan — Searchable dropdown with HMO and PPO plans
  • Location — Enter an address or use "Locate Me" for current position
  • Distance — Filter by proximity (5, 10, 25, 50, or 100 miles)

Advanced Search (Optional):

  • Provider name or NPI lookup
  • PCP-only filter
  • Accepting new patients filter
  • Out-of-network option
  • Specialty and facility/group filters

Provider Cards & Details

Search results display as cards showing key information: name, specialty, languages, location, phone, and status flags (PCP, Accepting New Patients). Clicking a card opens a detailed panel with:

  • Full contact information
  • Hospital admitting privileges
  • Board certifications
  • Google Reviews integration
  • Map zoom to exact location

Export Options

Export search results to XLSX, PDF, or print directly from the browser.

Healthcare Context

Provider directories are essential tools for health plan members to find in-network healthcare providers. This demo showcases a modern, user-friendly approach to provider search that improves upon traditional directory experiences with:

  • Visual map-based exploration
  • Real-time search and filtering
  • Mobile-responsive design
  • Accessibility compliance

Technical Implementation

Built with Next.js, React, and TypeScript using Mapbox GL for mapping. The interface uses shadcn/ui components and Tailwind CSS for styling, with full dark mode support.

Key Features

  • Interactive Mapbox GL map with provider markers
  • Search by provider type, health plan, location, and distance
  • Advanced filters: specialty, NPI, PCP, accepting patients
  • Provider cards with detailed information
  • Export to XLSX, PDF, or print
  • Geolocation support for current location search