Shafadoc — Doctor Appointment Booking Platform

Shafadoc — Doctor Appointment Booking Platform
A full appointment-booking platform for hospitals and doctors, built solo end-to-end in Next.js — a public SEO-optimized website and a data-heavy admin panel, both shipped by one developer.
Project Overview
// section.overview
A booking platform connecting patients, doctors, and hospitals
Shafadoc is a two-sided appointment-booking platform built entirely in Next.js — a public-facing website where patients search doctors and hospitals and book appointments, and an admin panel where staff manage doctors, schedules, content, and hospital locations. As the sole frontend developer, I owned both halves: a public site rendered with a mix of SSR, ISR, and SSG depending on page volatility for strong SEO and fast load times, and an operationally dense admin panel built around AG Grid for large tabular datasets, CKEditor for rich content management, and React Leaflet for visualizing hospital and doctor locations on interactive maps.

Key Screens
// section.key.screens








Project Problem
// section.problem
One developer, two demanding surfaces to ship and maintain
Stakeholder Needs
// section.stakeholder.needs
Strong Search Engine Visibility
The public website needed to rank well for doctor and hospital searches, which meant server-rendered, crawlable pages and a properly generated sitemap.
Fast Page Loads Across the Site
Patients searching for doctors needed near-instant page loads, even on content-heavy pages like doctor profiles and hospital listings.
A Capable Admin Panel for Non-Technical Staff
Hospital staff needed to manage large volumes of doctors, schedules, and appointments through tables and forms that stayed fast and usable at scale.
Rich Content Management
Doctor bios, hospital descriptions, and articles needed a rich-text editing experience staff could use without touching code.
Location-Based Discovery
Patients needed to visually locate nearby hospitals and doctors on a map, not just browse a flat list.
Maintainable Architecture for the Long Term
Since one developer would own the codebase indefinitely, the architecture needed to stay clean and extensible as features were added over time.
Customer Needs
// section.customer.needs
Design Process
// section.design.process
ARCHITECTURE PLANNING
Mapping page types to SSR, ISR, and SSG rendering strategies
Public Website Build
SEO-optimized pages, sitemap generation, performance tuning
Admin Panel Core
AG Grid tables for doctors, hospitals, and appointments
Content & Location Tools
CKEditor integration and React Leaflet map views
Booking Logic
Nested scheduling, sub-users, and appointment flows
Optimization Pass
Performance and maintainability review across both surfaces
Launch
Production deployment, solo-maintained going forward
The Solution
// section.solution
SEO-Optimized Rendering Strategy
[01]Pages were rendered using a deliberate mix of SSR, ISR, and SSG based on how often each page's data changes, paired with a generated sitemap — giving strong SEO without giving up performance.
Scalable Admin Data Tables
[02]AG Grid powers the admin panel's core tables — doctors, hospitals, appointments — handling large datasets with sorting, filtering, and inline editing without performance drop-off.
Rich Content Editing for Non-Technical Staff
[03]CKEditor integration lets hospital staff edit doctor bios, hospital descriptions, and articles directly, with no developer involvement required.
Interactive Location Mapping
[04]React Leaflet renders hospital and doctor locations on interactive maps across both the public site and admin panel, making location-based discovery visual instead of list-based.
Learning & Reflections
// section.learning.reflections
Choosing the Right Rendering Strategy Per Page
Not every page needed the same rendering approach. Matching SSR, ISR, or SSG to each page's actual data volatility was key to getting both SEO and performance right at the same time.
AG Grid at Scale Needs Careful Configuration
Handling large admin datasets smoothly meant going beyond default AG Grid setup — tuning column virtualization and data-fetching patterns to keep large tables responsive.
Rich Text Editors Need Guardrails
Giving non-technical staff a CKEditor instance meant thinking carefully about sanitization and consistent output, so content stayed safe and visually consistent across the site.
Solo Ownership Forces Architectural Discipline
Without a team to share the maintenance load, keeping nested business logic — schedules, sub-users, multi-role appointments — clean and predictable was essential to staying productive alone.
SEO Is a Frontend Architecture Decision, Not an Afterthought
Building the sitemap and rendering strategy in from the start, rather than retrofitting it, made the site's SEO performance far more reliable.
Map Integrations Reward Early Data Modeling
Getting hospital and doctor location data modeled consistently early on made the React Leaflet integration straightforward instead of a late-stage scramble.
Next Project
Solar & Wind Energy Management

Front-End Developer

Let's Talk
Ready to build something great together?
I'm currently available for new opportunities and exciting projects.
Feel free to reach out — I usually reply within 24 hours.