Medical Education Platform
IASS
A bilingual digital academy for aesthetic medicine, bringing courses, medical books, articles, institutional content, and API-driven learning catalogs into one structured platform.
Role
Frontend Developer
Technology
01 / Overview
IASS — International Academy of Aesthetic Science and Skills — is a bilingual medical education platform focused on aesthetic medicine, anatomy, safety, and clinical protocols. The frontend organizes courses, books, articles, academy information, and founder content into a scalable learning experience.
02 / The challenge
The platform needed to present several content types coming from backend APIs while preserving consistent localization, pricing, media, category, author, and routing behavior. Medical content also required a credible visual system, strong SEO, resilient loading, and clear separation between features.
03 / The solution
I organized the application by feature domains and kept route files thin. Server-rendered locale and theme preferences shape the initial HTML, shared API clients and normalizers convert inconsistent backend data into stable view models, and the home experience falls back to parallel course, book, and article endpoints when the combined endpoint is incomplete.
04 / Techniques and where they were applied
Not only what was used, but where and why.
Technique
Feature-based architecture
Where it was applied
Home, courses, books, and articles own their components, APIs, types, and data logic, while app routes remain small composition files.
Technique
Server-rendered localization
Where it was applied
The root layout reads locale cookies, sets lang and dir, loads Cairo/Inter, and provides localized messages through next-intl.
Technique
Typed API abstraction and normalization
Where it was applied
Shared apiFetch and normalizers convert multilingual text, media, money, categories, IDs, and mixed backend field names into predictable frontend models.
Technique
Resilient fallback loading
Where it was applied
The home page requests /home first, then loads courses, books, and articles in parallel when catalog sections are missing or the endpoint fails.
Technique
Controlled server-state policy
Where it was applied
The global TanStack Query client defines retry, stale time, and focus behavior so interactive catalog screens share consistent caching rules.
Technique
Structured SEO system
Where it was applied
Localized metadata, canonical values, Open Graph, Twitter cards, and Organization/Website JSON-LD are mounted in the root and page layers.
05 / Key features
The core capabilities built into IASS.
Arabic and English interfaces with server-rendered direction
Courses, medical books, articles, academy, founder, and statistics sections
API-driven catalog with localized prices, media, categories, authors, and routes
Theme preferences and a clinical visual interaction layer
TanStack Query configuration for client-side server state
Organization and Website JSON-LD with localized metadata
06 / Related insights
A deeper explanation of the engineering decisions behind this kind of product.
8 min read
How I Structure Scalable Frontend Applications
A practical approach to frontend architecture using feature ownership, typed boundaries, explicit async states, reusable UI foundations, and release-focused quality checks.
Read article7 min read
Building a Typed API Layer with TypeScript
How a reusable TypeScript API layer can separate transport details from product screens, unify errors, support pagination, and make React and React Native features easier to maintain.
Read article7 min read
Frontend Engineering for Operational Systems
Lessons from building interfaces for hospital operations, legal case management, dashboards, and workflow-heavy products where clarity and failure handling matter more than visual novelty.
Read article