SehatLink

Inspiration

Healthcare in rural Pakistan is deeply unequal. In districts like Tharparkar and Lasbela, it’s common to find a single doctor trying to care for more than 12,000 residents.

But here is the real tragedy: critical medical jobs stay empty simply because the hiring system is stuck in the past. Hospitals still rely on outdated newspaper ads and paper gazettes that doctors never see, meaning there is no clear way to know where the help is actually needed.

We built SehatLink to fix this disconnect. By mapping out exactly where the shortages are and modernizing how these jobs are posted, we help guide medical talent straight to the communities that need them most.

What it does

SehatLink is a localized, bilingual (English/Urdu) dual-portal ecosystem designed to optimize healthcare recruitment:

The Doctor Portal: Pairs a live job board with an interactive Regional Healthcare Deficit Map. Doctors can browse a clean, dedicated job listing feed where high-impact rural roles are automatically flagged with critical alert badges. By clicking pulsing, color-coded crisis pins on the map, users can instantly view a region's deficit profile and apply to open roles in two clicks. Best of all, the entire interface effortlessly translates from English to Urdu with a single toggle switch, providing instant localization without any layout distortion or page reloads.

The Employer Portal: Features an AI-assisted workspace where hospital administrators can drag and drop raw paper recruitment notices, official gazettes, or newspaper classified ads. The integrated parser extracts unstructured text layout data to auto-fill job forms instantly, shifting vacancies from print to live web feeds in seconds.

How we built it

We engineered SehatLink using a clean, production-ready frontend architecture designed to scale:

Frontend Foundations: Built with React and TypeScript for absolute type-safety, using Tailwind CSS for a highly accessible, high-contrast light mode UI.

State & Localization Management: Implemented a global React Context pipeline to handle instant, lightweight bilingual (English/Urdu) translation lookups and smooth portal-switching without any page reload.

AI-Ready Document Pipeline: Created an asynchronous file-drop processing system to model multi-modal AI text extraction. The frontend architecture captures raw document files, handles processing states, and maps unstructured data directly into our form fields—making the app plug-and-play ready for a live Gemini API integration.

Modular Code Architecture: Separated core systems into an isolated, feature-based directory structure (/features/doctor and /features/employer) to ensure the codebase remains clean, maintainable, and ready for team collaboration.

Challenges we ran into

Geographic Pin Responsiveness: One of our main technical hurdles was ensuring absolute coordinate stability for our geographic deficit pins over a freehand doodle PNG layout map. Because the image scales dynamically across different devices, fixed pixel placements would break. We solved this by locking the map element inside a strict aspect-ratio container and utilizing relative percentage strings (top and left bounds) to keep the interaction markers perfectly anchored.

Designing for Unstructured Data Inputs: Since the platform is built to eventually ingest raw, messy OCR data from paper gazettes, we had to architect a robust frontend state machine that could safely handle unpredictable or slow loading states during document uploads. Building a reliable simulation loop that gracefully transitions from an uploaded file to auto-filled form states without breaking the UI component required careful asynchronous state management.

Accomplishments that we're proud of

• Designed and compiled a lightweight, reactive local localization system capable of structural dictionary lookups on the go.

• Developed a modular, enterprise-grade file architecture rather than a monolithic code pile, making the platform ready for parallel developer tracking.

• Created an incredibly fluid simulation loop for our multimodal AI parsing system that perfectly models real-world user workflows.

What we learned

We deeply strengthened our understanding of how to leverage AI as a force multiplier for rapid product development. By utilizing generative AI tools to accelerate our Figma blueprints and layout brainstorming, we managed to bypass days of traditional wireframing and jump straight into high-fidelity engineering.

This rapid design cycle allowed us to spend more time focusing on critical UX/DX challenges: minimizing onboarding friction for busy medical professionals, optimizing multi-step form entry points, and learning how to abstract complex global application states behind clean, accessible, single-responsibility component interfaces.

What's next for SehatLink

The next phase is shifting from prototype to production. We plan to integrate live multi-modal Generative AI endpoints (e.g using the Gemini API) to drive our document parsing dropzone, replacing our current mock loop with live automated processing of raw image uploads. We also aim to connect directly with regional provincial health gazettes via web-scraping pipelines to feed real-time crisis coordinates directly into our interactive deficit map grid.

Built With

• claude
• claude-(development)-deployment-&-version-control:-github
• css
• figma
• gemini-api-(target-architecture/simulation)
• geminiapi
• github
• react
• tailwind
• tailwind-css-ai-tools-&-models:-figma-ai-(design)
• typescript
• vercel