< 1.2s
Gemini API ResponseOptimized prompt payload with zero temperature for clinical accuracy
24
Diagnostic ModalsGranular symptom, pathology, and therapy popups across 6 conditions
100%
Domain GatingStrict lexical whitelist rejecting out-of-scope health queries
3 Pillars
Wellness MatrixUnified ecosystem: Clinical Education · Dietetics · Active Fitness
0ms
Zero-Build LatencyPure vanilla web execution without runtime framework overhead
3,000ms
Anti-Spam WindowClient-side request lock preventing API quota exhaustion
The Operational Mandate
Context & High-Stakes Constraints
Access to structured preventive healthcare education and reliable medical guidance remains a significant barrier for many everyday internet users. Too often, individuals either self-diagnose through scattered, unverified web articles or hesitate to consult medical experts due to logistical hurdles. FitSmart was built to solve this challenge by uniting four essential pillars under one lightweight, frictionless digital roof: comprehensive disease prevention, evidence-based nutrition science, athletic conditioning routines, and a direct AI-powered virtual medical consultant.
Core Mandate: Create an accessible, zero-compilation web platform that delivers actionable lifestyle medicine guidelines and real-time AI triage without intimidating users with medical jargon.
02PREVENTIVE HEALTHCARE INTERFACES
The FitSmart Digital Wellness Hub in Action
Explore the key portals of FitSmart — uniting real-time AI doctor triage, evidence-based clinical pathology breakdowns, functional superfood dietetics, and athletic conditioning.
🔒fitsmart.local/index.html
01 / 05Official Brand Presentation
Official Project Showcase & Wellness Flyer
Official launch flyer and comprehensive interface showcase for FitSmart — an all-in-one AI-driven preventive healthcare and athletic wellness platform.
◆ Comprehensive Digital Health Ecosystem◆ Cross-Platform Responsive Interface System◆ Preventive Lifestyle & Fitness Guidance
03CAPABILITIES & WORKFLOW
Core Capabilities & Clinical Assessment Workflow
FitSmart bridges the gap between complex medical literature and everyday lifestyle choices through an accessible, highly structured client architecture.
Gemini Pro AI Medical Assistant
Direct REST integration with Google Gemini Pro API featuring deterministic temperature parameters, animated thinking states, and error fallback handling.
Clinical Disease & Diagnostic Hub
24 modular interactive popups detailing etiology, diagnostic symptoms, clinical treatments, and lifestyle prevention for 6 critical diseases.
Nutritional Science & Superfoods
Comprehensive dietary guidelines indexing 16+ nutrient profiles from cruciferous greens to antioxidant superfoods and cardiovascular omega-3 proteins.
Discipline-Specific Athletic Engine
Dynamic activity guides detailing sports conditioning (Basketball, Soccer, Badminton) and calisthenics routines with zero external runtime dependencies.
8 Mission-Critical Modules
Each module is engineered with robust transactional boundaries, modular isolation, and comprehensive audit trails.
MODULE // 01 OF 08AI Consultation
Google Gemini Pro AI Health Copilot
Interactive floating drawer assistant delivering real-time health consultations powered by Google's Gemini Pro generative LLM (v1/models/gemini-pro:generateContent).
- Direct asynchronous fetch calls with strict x-goog-api-key authentication
- Configured with zero temperature (0) for deterministic, hallucination-resistant clinical advice
- Visual 'Thinking...' loading state with asynchronous DOM lifecycle rendering
- Automatic error fallback alerting users during upstream Google API maintenance
AI Clinical Consultation & Lifestyle Decision Lifecycle
From user symptom inquiry to actionable preventive recommendations — each consultation passes through strict client-side domain verification and deterministic LLM inference.
Stage 01User Ingestion & Safety
Symptom Ingestion & Safety Gating
User submits a health inquiry via the floating consultation drawer. The client filter checks the prompt against the 11-keyword clinical whitelist and verifies the 3000ms cooldown lock.
Keyword Whitelist Validation → Cooldown Check
Stage 02Gemini Pro Generative AI
Deterministic Gemini Pro Processing
The query is transmitted over HTTPS to Google's Gemini Pro REST API with temperature set to 0.0. The engine generates structured, non-hallucinatory preventive recommendations and lifestyle tips.
POST /gemini-pro:generateContent (temperature: 0)
Stage 03DOM Sanitization & Triage
Actionable Guidance & Triage Routing
The generated response is injected into the chat stream via sanitized textContent nodes. For critical symptoms, users are advised to seek in-person professional medical evaluation.
Sanitized DOM Injection & Triage Advisory
Medical Safety Disclaimer & Anti-Abuse Safeguard
FitSmart functions strictly as an educational and preventive wellness resource. The platform combines deterministic AI system instructions, keyword whitelist filtering, and explicit medical disclaimers to ensure algorithmic advice is never treated as a replacement for emergency clinical diagnosis.
04SYSTEM ANATOMY & ARCHITECTURE
Modular Client-Side Architecture & Gemini AI BaaS
Engineered with a clean separation between semantic HTML5 views, modular CSS styling sheets, a centralized vanilla JavaScript controller, and Google's Generative AI REST endpoint.
Pattern: Modular Vanilla SPA + Generative AI BaaS
Protocol: HTTPS REST (JSON / Google Generative Language)
Client Presentation Layer
HTML5 + CSS3 + FontAwesomeMulti-page semantic layout comprising 6 specialized portals (index, penyakit, konsumsi, aktifitas, login, register) with responsive Flexbox/Grid structures.
Interactive Controller & Modal Engine
Vanilla JavaScript (ES6+)Centralized script.js managing 24 modal popup states, mobile hamburger drawer toggling, chat lifecycle rendering, and smooth scroll anchors.
Health Domain Safety & Rate Limiter
Client-Side GuardrailsKeyword whitelist verification across 11 health terms coupled with a 3000ms asynchronous mutex lock (isRequestInProgress) to prevent API spam.
AI Integration Layer
Google Gemini Pro REST APIAsynchronous fetch pipeline communicating directly with generativelanguage.googleapis.com, configured with zero temperature and 8,192 max output tokens.
Static Asset & Typography Layer
SVG Illustrations & Web FontsLocally served SVG vectors, disease iconography, and embedded brand typography ensuring instant zero-latency visual rendering.
Curated Technology Stack
A modern engineering stack combining high-throughput user interfaces, modular backend architecture, and resilient data layers.
Frontend & UI Architecture
HTML5Semantic Structure across 6 Health Portals
CSS3Responsive Layouts, Modals & Glassmorphic Effects
JavaScript (ES6+)Async/Await Fetch, DOM Lifecycle & Event Controller
FontAwesome 6Vector Iconography & Navigation Glyphs
Google Fonts (Poppins)High-Readability Typography Hierarchy
AI Engine & Safety Protocols
Google Gemini Pro APIGenerative LLM for Health Consultations
REST API EndpointDirect HTTPS POST Request Dispatcher
Domain Keyword WhitelistClient-Side Health Lexical Filter (11 terms)
3000ms Anti-Spam MutexRequest Cooldown & Rate Limiting Guard
Tooling & Deployment
VS Code Live ServerLocal Development Server (Port 5501)
Git & GitHubVersion Control & Open-Source Collaboration
Vercel / Static HostingGlobal CDN Edge Static Distribution
Codebase Structure & Data Models
Clear boundary separation between system components, paired with modular schemas and structured repositories.
📁 Pages/ (Specialized Health Portals)
├──index.html — Main landing portal with hero & platform overview
├──penyakit.html — Disease encyclopedia & 24 clinical diagnostic modals
├──konsumsi.html — Dietary guidelines, macronutrients & superfood profiles
├──aktifitas.html — Athletic conditioning & customized workout routines
├──login.html — Authentication portal UI for returning users
├──register.html — User registration & onboarding interface
Database Entities & Schema Models
Data Model: MedicalCondition
Defines pathological entities with title, classification (Metabolic, Cardiovascular, Infectious, Gastrointestinal, Respiratory), symptoms, clinical therapies, and preventive lifestyle habits.
Data Model: NutritionProfile
Stores food classifications, macronutrient breakdowns (protein, carbs, healthy fats), micronutrients (vitamins, sulforaphane, omega-3), and recommended dietary portions.
Data Model: ExerciseRoutine
Represents athletic regimens categorized by discipline (Basketball, Football, Badminton, Calisthenics), target muscle groups, intensity levels, and injury prevention notes.
Data Model: AIConsultationSession
Manages transient user consultation state: sanitized query, domain validity check, Google Gemini Pro response payload, and rate-limiting timestamp.
05SECURITY, API & PRODUCTION IMPACT
Hardened Perimeter & Medical Safety Standards
Multi-layered client-side security architecture combining lexical domain whitelisting, rate-limiting cooldown timers, and sanitized DOM injection.
API Endpoints & Routing Architecture
AI Consultation (Google Generative Language)
POST/v1/models/gemini-pro:generateContentAsynchronously dispatches user health prompt to Google Gemini Pro model with temperature: 0 and max_output_tokens: 8192
Health Portals & Clinical Navigation
GET/Pages/penyakit.htmlServes comprehensive clinical encyclopedia and 24 interactive diagnostic modal views
GET/Pages/konsumsi.htmlDelivers comprehensive dietary guides, superfood nutritional charts, and meal recommendations
GET/Pages/aktifitas.htmlServes athletic conditioning guides for basketball, football, badminton, and bodyweight calisthenics
Enterprise Security & Governance Standards
Domain Keyword Whitelisting
Restricts all AI prompt submissions to 11 explicit Indonesian health terminology keywords, immediately rejecting irrelevant, malicious, or jailbreak prompts.
3000ms Anti-Flooding Mutex
State-variable lock (isRequestInProgress = true) prevents multiple rapid-fire requests from triggering Google API rate-limit errors or quota exhaustion.
Sanitized Text DOM Injection
AI model responses are injected strictly via messageElement.textContent, mitigating Cross-Site Scripting (XSS) risks from untrusted generative tokens.
Encrypted HTTPS Transport
All client-to-API communication flows across TLS 1.3 encrypted HTTPS channels directly to Google Generative Language endpoints.
Engineering Challenges & Production Results
How critical technical bottlenecks were overcome and verified under real production conditions.
Challenge // 01
Enforcing strict medical topic boundaries in a client-side environment without backend proxies. Solved by designing an efficient substring keyword validator that screens incoming prompts across clinical terms ('sehat', 'dokter', 'penyakit', 'nutrisi', 'olahraga'), immediately routing out-of-scope queries to a polite guidance fallback.
Challenge // 02
Managing 24 independent diagnostic modal dialogs across 6 distinct disease categories without introducing UI state clutter. Engineered independent show/hide controller functions with backdrop overlay coordination, allowing users to inspect deep symptom profiles without page reloads.
Challenge // 03
Balancing real-time AI responsiveness with rate-limit protection. Implemented an asynchronous mutex flag (isRequestInProgress) and automated cooldown timers to ensure clean, non-overlapping API transactions.