VivaMais | ExpoStacker

PRODUTO EM PRODUÇÃO

vivamais.expostacker.com.br

live preview

VivaMais — Plataforma digital para clinicas

Usar agora Arquitetura

Stack tecnológica: HTML5 CSS JavaScript Node.js Cloudflare Pages SEO

37
Paginas geradas: 6
Especialidades: 5
Etapas de agendamento

Cliente

VivaMais

Setor

Healthtech e Clinicas Medicas

Linha do tempo

1 sprint de iteracao continua · 2026-09

Produto ao vivo

Usar agora

Resultados

Resultados reportados pelo cliente durante o rollout

37 Paginas geradas

Baseline: Home + 6 especialidades + 6 profissionais + agendamento + portal + admin + 8 artigos + institucionais

Fonte: Build output

6 Especialidades com pagina propria

Baseline: Cardiologia, Dermatologia, Ortopedia, Pediatria, Ginecologia, Clinica Geral

Fonte: specialties.json

6 Profissionais com perfil completo

Baseline: Foto, bio, areas de atuacao, CRM-DEMO, convenios, disponibilidade

Fonte: doctors.json

8 Convencios atendidos

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

Fonte: insurance.json

5 Etapas de agendamento

Baseline: Especialidade -> Profissional -> Data -> Horario -> Dados

Fonte: booking.js

8 Artigos editoriais

Baseline: Categorias por especialidade + Bem-estar, com CTAs contextualizados

Fonte: articles.json

Dados reportados pelo cliente

O desafio

VivaMais e uma plataforma digital demonstrativa para clinicas medicas. Nao e uma landing page institucional: e um produto completo com 37 paginas geradas a partir de dados estruturados, fluxo de agendamento em 5 etapas com deep links contextuais, portal do paciente com consultas e documentos, painel administrativo com agenda e analytics, busca inteligente, blog com 8 artigos e SEO tecnico completo. Tudo estatico, sem backend, com dados ficticios claramente identificados.

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.

A abordagem

Construímos um gerador estatico em Node.js que le dados JSON estruturados (9 arquivos: clinica, especialidades, medicos, convenios, consultas, pacientes, documentos, artigos e analytics) e gera 37 paginas HTML com templates compartilhados. O design system usa CSS com tokens customizados (cores, espacamento, sombras, raios), tipografia Inter e iconografia SVG inline. JavaScript vanilla gerencia estado client-side com localStorage para agendamento, sessao do portal e CRUD do admin. SEO tecnico inclui sitemap sem priority/changefreq (conforme padrao 2026), robots.txt, schema.org JSON-LD (MedicalClinic, Organization, WebSite, MedicalSpecialty, Physician, Article, Blog, AboutPage, LocalBusiness, BreadcrumbList), canonical, Open Graph, Twitter Cards e noindex em paginas privadas.

A solução

A plataforma e organizada em 5 areas principais: experiencia do paciente (home, especialidades, profissionais, agendamento), portal do paciente (dashboard, consultas, documentos, exames, perfil), painel administrativo (KPIs, agenda, consultas, profissionais, especialidades, convenios, analytics), conteudo (blog com 8 artigos) e paginas institucionais (sobre, FAQ, localizacao, privacidade, termos, cookies, 404).

Home premium com busca inteligente, especialidades, profissionais, como funciona (5 etapas), convenios, estrutura, central de saude e FAQ
6 paginas de especialidades com descricao, quando procurar, servicos, profissionais, horarios e FAQ contextualizado
6 paginas de profissionais com foto, bio, areas de atuacao, CRM-DEMO, convencios, disponibilidade e CTA de agendamento contextualizado
Fluxo de agendamento em 5 etapas: especialidade, profissional, data, horario e dados — com validacao, consentimento LGPD e confirmacao
Deep links contextuais: especialidade -> medico -> agendamento com contexto completo pre-preenchido
Convencios -> especialidade -> agendamento com convenio pre-selecionado via query param
Portal do paciente com dashboard, proxima consulta, KPIs, documentos recentes, exames, perfil e preferencias
Painel administrativo com KPIs, agenda (dia/semana/mes), consultas, profissionais, especialidades, convenios, pacientes e analytics
Graficos CSS/SVG-only (sem libs de chart) para analytics e KPIs
Blog com 8 artigos, categorias por especialidade, filtros, busca e CTAs contextualizados
Busca global em especialidades, profissionais e artigos com resultados em tempo real
SEO tecnico: sitemap, robots, schema.org JSON-LD, canonical, OG, Twitter Cards, noindex em paginas privadas
Acessibilidade WCAG 2.2 AA: skip link, focus-visible, ARIA, touch targets 44px, contraste validado, prefers-reduced-motion
Dados demonstrativos identificados (CRM-DEMO, RQE-DEMO, badge Demo, disclaimer no footer)
Exportacao .ics para calendario na confirmacao de agendamento
Responsivo de 360px a 1920px com calendario e admin funcionais em mobile

Linha do tempo

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

Iteracao 1

Fundacao

Design system com tokens CSS
9 arquivos JSON de dados estruturados
Build script em Node.js
Templates compartilhados (head, navbar, footer, icones)

Iteracao 2-3

Experiencia do paciente

Home premium com busca inteligente
6 paginas de especialidades profundas
6 paginas de profissionais com perfis completos
Fluxo de agendamento em 5 etapas com deep links

Iteracao 4-5

Portal e Admin

Portal do paciente com dashboard, consultas, documentos e exames
Painel administrativo com KPIs, agenda e analytics
Agenda com views dia/semana/mes
CRUD local com localStorage

Iteracao 6

Conteudo e polish

Blog com 8 artigos e categorias por especialidade
Paginas legais, sobre, FAQ, localizacao e 404
SEO tecnico: sitemap, robots, schema.org, canonical, OG
Acessibilidade WCAG 2.2 AA e microinteracoes

Metodologia

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

Product engineering: dados estruturados -> geracao estatica -> UX completa

Design system com tokens CSS antes de componentes

Deep links contextuais como arquitetura de produto

Dados demonstrativos identificados (credibilidade via software)

SEO tecnico conforme Ordem Tecnica Obrigatoria 2026

Acessibilidade WCAG 2.2 AA com contraste validado

Arquitetura

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

→ Gerador estatico Node.js: le 9 JSONs e produz 37 paginas HTML com templates compartilhados
→ Design system CSS com tokens (cores, espacamento, sombras, raios) — sem frameworks
→ JavaScript vanilla com estado client-side em localStorage para agendamento, portal e admin
→ Deep links contextuais via query params (specialty, doctor, insurance, date, time) conectam especialidades, profissionais e agendamento
→ SEO tecnico: sitemap.xml, robots.txt, schema.org JSON-LD, canonical, OG, Twitter Cards, noindex em privadas
→ Deploy estatico na Cloudflare Pages com CI/CD via GitHub Actions

Diagrama conceitual — não reflete implementação real

Stack tecnológica

Escolhas técnicas e o que ficou para fora.

Frontend

HTML5 semantico

Por quê: 37 paginas com landmarks ARIA e estrutura acessivel.

Alternativa rejeitada: JSX/React

CSS com design tokens

Por quê: Design system proprio sem dependencias externas.

Alternativa rejeitada: Tailwind CSS

JavaScript vanilla

Por quê: Agendamento, portal, admin e busca sem frameworks.

Alternativa rejeitada: React/Vue

Build

Node.js

Por quê: Gerador estatico que le JSON e produz 37 paginas HTML.

Alternativa rejeitada: Astro

JSON estruturado

Por quê: 9 arquivos de dados como unica fonte de verdade.

Alternativa rejeitada: CMS headless

Infraestrutura

Cloudflare Pages

Por quê: Deploy estatico global com SSL e CDN.

Alternativa rejeitada: Netlify

GitHub Actions

Por quê: CI/CD automatico a cada push na main.

Alternativa rejeitada: Deploy manual

SEO e dados

Schema.org JSON-LD

Por quê: MedicalClinic, Physician, Article, BreadcrumbList e outros.

Alternativa rejeitada: Microdata

Sitemap + robots

Por quê: Sitemap sem priority/changefreq, robots com disallow de privadas.

Alternativa rejeitada: Plugin SEO

Decision log

O que escolhi, o que rejeitei e por quê.

Gerador estatico em Node.js em vez de framework

Por que: Um gerador customizado le JSON estruturado e produz HTML estatico sem custo de runtime. Frameworks como Next.js ou Astro adicionariam complexidade desnecessaria para um projeto que nao precisa de SSR nem de API routes.

Alternativas rejeitadas: Astro (static output), Next.js (static export), Eleventy

JavaScript vanilla com localStorage em vez de backend

Por que: O agendamento, o portal e o admin usam localStorage para persistir estado client-side. Isso demonstra a UX completa de um produto real sem custo de infraestrutura, mantendo tudo estatico e deployavel na Cloudflare Pages.

Alternativas rejeitadas: Supabase (Postgres + Auth), Firebase, API REST em Cloudflare Workers

Deep links contextuais em vez de wizard generico

Por que: Quando o usuario vem da pagina de Cardiologia e clica na Dra. Ana, o agendamento abre com especialidade e medico pre-preenchidos e pula para a etapa 3. Isso demonstra arquitetura de produto, nao apenas um formulario solto.

Alternativas rejeitadas: Wizard sempre comecando na etapa 1, formulario unico sem contexto

Dados demonstrativos identificados em vez de dados falsos apresentados como reais

Por que: Todos os medicos usam CRM-DEMO-XXX, o footer diz 'Ambiente demonstrativo — dados ficticios' e nenhum numero de pacientes, avaliacao Google ou depoimento e apresentado como real. A credibilidade vem do software, nao de numeros inventados.

Alternativas rejeitadas: Apresentar metricas ficticias como reais (15 anos, 50k pacientes, 4.9 Google)

Segurança e acesso

Privacidade e dados demonstrativos

Nenhum dado real e processado — tudo e ficticio e client-side
Consentimento LGPD explicito no formulario de agendamento
Sessao do portal e admin em localStorage (sem cookies de rastreio)
Paginas privadas (admin, portal, 404) com noindex, nofollow
Sitemap exclui paginas privadas da indexacao
Politica de privacidade deixa claro que e ambiente demonstrativo
CRM-DEMO e RQE-DEMO identificam dados como nao reais

Lições aprendidas

Nem tudo saiu como planejado.

— Uma plataforma digital completa nao precisa de backend para demonstrar valor. Com dados estruturados, geracao estatica, localStorage e deep links contextuais, e possivel entregar uma experiencia de produto que comunica profundidade real — agendamento, portal, admin, analytics — sem custo de infraestrutura. A credibilidade vem da arquitetura, nao de numeros inventados.