VivaMais | ExpoStacker

LIVE PRODUCT

vivamais.expostacker.com.br

live preview

VivaMais — Digital platform for clinics

Use now Architecture

Tech stack: HTML5 CSS JavaScript Node.js Cloudflare Pages SEO

37
Generated pages: 6
Specialties: 5
Booking steps

Client

VivaMais

Sector

Healthtech and Medical Clinics

Timeline

1 sprint de iteracao continua · 2026-09

Live product

Use now

Results

Client-reported results during rollout

37 Generated pages

Baseline: Home + 6 specialties + 6 professionals + booking + portal + admin + 8 articles + institutional

Fonte: Build output

6 Specialties with own page

Baseline: Cardiology, Dermatology, Orthopedics, Pediatrics, Gynecology, General Practice

Fonte: specialties.json

6 Professionals with full profile

Baseline: Photo, bio, practice areas, CRM-DEMO, insurance, availability

Fonte: doctors.json

8 Insurance plans accepted

Baseline: Unimed, Bradesco Saude, SulAmerica, Amil, Notredame, Hapvida, Porto Seguro, Private

Fonte: insurance.json

5 Booking steps

Baseline: Specialty -> Professional -> Date -> Time -> Patient data

Fonte: booking.js

8 Editorial articles

Baseline: Categories by specialty + Wellness, with contextual CTAs

Fonte: articles.json

Client-reported data

The challenge

VivaMais is a demo digital platform for medical clinics. It is not an institutional landing page: it is a complete product with 37 pages generated from structured data, a 5-step booking flow with contextual deep links, a patient portal with appointments and documents, an admin dashboard with agenda and analytics, smart search, a blog with 8 articles and full technical SEO. All static, no backend, with clearly identified fictional data.

Clinicas medicas de medio e grande porte precisam de uma presenca digital que va alem de uma landing page. O desafio e demonstrar uma plataforma completa: agendamento digital com fluxo contextual, portal do paciente com documentos e exames, painel administrativo com agenda e analytics, busca inteligente, conteudo editorial para SEO e arquitetura de informacao profunda por especialidade e por profissional.

The approach

We built a static generator in Node.js that reads structured JSON data (9 files: clinic, specialties, doctors, insurance, appointments, patients, documents, articles and analytics) and generates 37 HTML pages with shared templates. The design system uses CSS with custom tokens (colors, spacing, shadows, radii), Inter typography and inline SVG iconography. Vanilla JavaScript manages client-side state with localStorage for booking, portal session and admin CRUD. Technical SEO includes sitemap without priority/changefreq (per 2026 standard), robots.txt, schema.org JSON-LD (MedicalClinic, Organization, WebSite, MedicalSpecialty, Physician, Article, Blog, AboutPage, LocalBusiness, BreadcrumbList), canonical, Open Graph, Twitter Cards and noindex on private pages.

The solution

The platform is organized in 5 main areas: patient experience (home, specialties, professionals, booking), patient portal (dashboard, appointments, documents, exams, profile), admin dashboard (KPIs, agenda, appointments, professionals, specialties, insurance, analytics), content (blog with 8 articles) and institutional pages (about, FAQ, location, privacy, terms, cookies, 404).

Premium home with smart search, specialties, professionals, how it works (5 steps), insurance, facilities, health content and FAQ
6 specialty pages with description, when to seek care, services, professionals, schedule and contextual FAQ
6 professional pages with photo, bio, practice areas, CRM-DEMO, insurance, availability and contextual booking CTA
5-step booking flow: specialty, professional, date, time and patient data — with validation, LGPD consent and confirmation
Contextual deep links: specialty -> doctor -> booking with full context pre-filled
Insurance -> specialty -> booking with pre-selected insurance via query param
Patient portal with dashboard, next appointment, KPIs, recent documents, exams, profile and preferences
Admin dashboard with KPIs, agenda (day/week/month), appointments, professionals, specialties, insurance, patients and analytics
CSS/SVG-only charts (no chart libs) for analytics and KPIs
Blog with 8 articles, categories by specialty, filters, search and contextual CTAs
Global search across specialties, professionals and articles with real-time results
Technical SEO: sitemap, robots, schema.org JSON-LD, canonical, OG, Twitter Cards, noindex on private pages
WCAG 2.2 AA accessibility: skip link, focus-visible, ARIA, 44px touch targets, validated contrast, prefers-reduced-motion
Identified demo data (CRM-DEMO, RQE-DEMO, Demo badge, footer disclaimer)
.ics calendar export on booking confirmation
Responsive from 360px to 1920px with functional calendar and admin on mobile

Timeline

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

Iteracao 1

Fundacao

Design system with CSS tokens
9 structured JSON data files
Build script in Node.js
Shared templates (head, navbar, footer, icons)

Iteracao 2-3

Experiencia do paciente

Premium home with smart search
6 deep specialty pages
6 professional pages with full profiles
5-step booking flow with deep links

Iteracao 4-5

Portal e Admin

Patient portal with dashboard, appointments, documents and exams
Admin dashboard with KPIs, agenda and analytics
Agenda with day/week/month views
Local CRUD with localStorage

Iteracao 6

Conteudo e polish

Blog with 8 articles and categories by specialty
Legal pages, about, FAQ, location and 404
Technical SEO: sitemap, robots, schema.org, canonical, OG
WCAG 2.2 AA accessibility and microinteractions

Methodology

Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.

Product engineering: structured data -> static generation -> full UX

Design system with CSS tokens before components

Contextual deep links as product architecture

Identified demo data (credibility via software)

Technical SEO per 2026 standard

WCAG 2.2 AA accessibility with validated contrast

Architecture

Paciente

Home, especialidades, profissionais, agendamento, portal

VivaMais

37 paginas estaticas geradas por Node.js

Admin

Dashboard, agenda, consultas, analytics

9 JSONs estruturados

CSS design system

JavaScript vanilla + localStorage

Schema.org JSON-LD

Cloudflare Pages

→ Node.js static generator: reads 9 JSONs and produces 37 HTML pages with shared templates
→ CSS design system with tokens (colors, spacing, shadows, radii) — no frameworks
→ Vanilla JavaScript with client-side state in localStorage for booking, portal and admin
→ Contextual deep links via query params (specialty, doctor, insurance, date, time) connect specialties, professionals and booking
→ Technical SEO: sitemap.xml, robots.txt, schema.org JSON-LD, canonical, OG, Twitter Cards, noindex on private pages
→ Static deploy on Cloudflare Pages with CI/CD via GitHub Actions

Conceptual diagram — does not reflect real implementation

Tech stack

Technical choices and what was left out.

Frontend

Semantic HTML5

Why: 37 pages with ARIA landmarks and accessible structure.

Rejected alternative: JSX/React

CSS with design tokens

Why: Custom design system with no external dependencies.

Rejected alternative: Tailwind CSS

Vanilla JavaScript

Why: Booking, portal, admin and search without frameworks.

Rejected alternative: React/Vue

Build

Node.js

Why: Static generator that reads JSON and produces 37 HTML pages.

Rejected alternative: Astro

Structured JSON

Why: 9 data files as the single source of truth.

Rejected alternative: Headless CMS

Infrastructure

Cloudflare Pages

Why: Global static deploy with SSL and CDN.

Rejected alternative: Netlify

GitHub Actions

Why: Automatic CI/CD on every push to main.

Rejected alternative: Manual deploy

SEO and data

Schema.org JSON-LD

Why: MedicalClinic, Physician, Article, BreadcrumbList and others.

Rejected alternative: Microdata

Sitemap + robots

Why: Sitemap without priority/changefreq, robots with disallow on private pages.

Rejected alternative: SEO plugin

Decision log

What I chose, what I rejected, and why.

Static generator in Node.js instead of a framework

Why: A custom generator reads structured JSON and produces static HTML without runtime cost. Frameworks like Next.js or Astro would add unnecessary complexity for a project that does not need SSR or API routes.

Rejected alternatives: Astro (static output), Next.js (static export), Eleventy

Vanilla JavaScript with localStorage instead of a backend

Why: Booking, portal and admin use localStorage to persist client-side state. This demonstrates the full UX of a real product without infrastructure cost, keeping everything static and deployable on Cloudflare Pages.

Rejected alternatives: Supabase (Postgres + Auth), Firebase, REST API on Cloudflare Workers

Contextual deep links instead of a generic wizard

Why: When the user comes from the Cardiology page and clicks Dr. Ana, the booking opens with specialty and doctor pre-filled and jumps to step 3. This demonstrates product architecture, not just a loose form.

Rejected alternatives: Wizard always starting at step 1, single form without context

Identified demo data instead of fake data presented as real

Why: All doctors use CRM-DEMO-XXX, the footer says 'Demo environment — fictional data' and no patient numbers, Google ratings or testimonials are presented as real. Credibility comes from the software, not from invented numbers.

Rejected alternatives: Presenting fictional metrics as real (15 years, 50k patients, 4.9 Google)

Security and access

Privacy and demo data

No real data is processed — everything is fictional and client-side
Explicit LGPD consent in the booking form
Portal and admin session in localStorage (no tracking cookies)
Private pages (admin, portal, 404) with noindex, nofollow
Sitemap excludes private pages from indexing
Privacy policy makes clear it is a demo environment
CRM-DEMO and RQE-DEMO identify data as non-real

Lessons learned

Not everything went as planned.

— A complete digital platform does not need a backend to demonstrate value. With structured data, static generation, localStorage and contextual deep links, it is possible to deliver a product experience that communicates real depth — booking, portal, admin, analytics — without infrastructure cost. Credibility comes from architecture, not from invented numbers.