Onde Doar é a plataforma de mapa interativo do Hemocione para ajudar pessoas a encontrarem os pontos de doação de sangue mais próximos de você. O sistema agrega hemocentros, bancos de sangue, hospitais, eventos de coleta e pedidos de ajuda em um único mapa, com localização em tempo real e busca por endereço.
Acesso em produção: ondedoar.hemocione.com.br
- Sobre o projeto
- Stack tecnológica
- Pré-requisitos
- Configuração local
- Variáveis de ambiente
- Rodando o projeto
- Estrutura do projeto
- Como contribuir
- Licença
O Onde Doar resolve um problema simples, mas crucial: saber onde e quando é possível doar sangue. A plataforma consome dados de múltiplas fontes do ecossistema Hemocione e os exibe em um mapa com pins categorizados por tipo de local:
| Tipo | Descrição |
|---|---|
bloodbank |
Banco de sangue |
hemocenter |
Hemocentro |
hospital |
Hospital com coleta |
event |
Evento temporário de doação |
askforhelp |
Pedido de ajuda urgente |
O usuário pode permitir o acesso à localização para ver os pontos próximos, buscar por endereço, e visualizar detalhes de cada local como telefone, link externo e endereço completo.
A aplicação suporta modo iframe (para ser embutida em outros sites do ecossistema Hemocione) e autenticação via HemocioneID (SSO centralizado).
- Nuxt 4 — framework fullstack baseado em Vue 3
- Vue 3 — framework de UI reativo
- TypeScript — tipagem estática
- Pinia — gerenciamento de estado
- Tailwind CSS v4 — utilitários de estilo
- @nuxt/ui — componentes de UI prontos para Nuxt
- MapLibre GL + vue-maplibre-gl — mapas interativos open-source
- Nominatim (OpenStreetMap) — geocodificação de endereços
- Mongoose — ODM para MongoDB
- Inngest — agendamento de jobs de sincronização de dados
- Google Geocoding API — geocodificação server-side
- Vercel — hospedagem e deploy
- MongoDB — banco de dados de pontos geoespaciais (índice 2dsphere)
- Docker — MongoDB local via docker-compose
- HemocioneID — autenticação SSO e fonte de pontos de coleta
- Hemocione Digital Events — eventos de doação
- Hemocione Ask for Help — pedidos de ajuda urgentes
Antes de começar, certifique-se de ter instalado:
- Node.js
v22.12(recomendado via nvm) - Yarn
1.22.x - Docker e Docker Compose (para o MongoDB local)
- GitHub CLI (
gh) — opcional, para criar PRs e clonar repositórios privados
Dica: Use o
.nvmrcincluído no projeto para selecionar a versão correta do Node automaticamente:nvm use
git clone https://github.com/hemocione/ondedoar.git
cd ondedoaryarn installO projeto usa MongoDB. Para subir uma instância local com Docker:
docker-compose up -dIsso inicia um container MongoDB na porta 27018 (mapeada internamente para 27017).
Crie um arquivo .env na raiz do projeto com as variáveis necessárias (veja a seção abaixo).
yarn mongo:populateCrie um arquivo .env na raiz do projeto. Abaixo está a lista completa de variáveis com suas descrições e valores padrão para desenvolvimento:
# ─── Banco de dados ────────────────────────────────────────────────────────────
# URI de conexão com o MongoDB
MONGODB_URI=mongodb://localhost:27018/local
# Nome do banco de dados
MONGODB_NAME=local
# ─── HemocioneID (SSO e pontos de coleta) ──────────────────────────────────────
# URL pública do HemocioneID (frontend — para redirecionamento de login)
HEMOCIONEID_URL=http://localhost:8080
# URL da API interna do HemocioneID (usada server-side)
HEMOCIONEID_API_URL=http://localhost:8080
# Segredo compartilhado com o back-office do HemocioneID
HEMOCIONEID_SECRET=secret
# Chave do cookie de autenticação (nome do cookie no browser)
HEMOCIONE_AUTH_COOKIE_KEY=devHemocioneId
# ─── Hemocione Digital Events ───────────────────────────────────────────────────
# URL da API de eventos digitais
HEMOCIONE_DIGITAL_EVENTS_API_URL=http://localhost:3001
# ─── Hemocione Ask for Help ────────────────────────────────────────────────────
# URL da API de pedidos de ajuda
HEMOCIONE_ASK_FOR_HELP_API_URL=http://localhost:3001
# Segredo compartilhado com a API de pedidos de ajuda
HEMOCIONE_ASK_FOR_HELP_SECRET=secret
# ─── Inngest (jobs assíncronos) ─────────────────────────────────────────────────
# Chave de evento do Inngest (obtenha em https://www.inngest.com/)
INNGEST_EVENT_KEY=devInngestApiKey
# ─── Vercel (definido automaticamente em deploys na Vercel) ────────────────────
# VERCEL_ENV=production
# VERCEL_URL=seu-projeto.vercel.appNota: As variáveis
VERCEL_ENVeVERCEL_URLsão injetadas automaticamente pela Vercel durante o deploy e não precisam ser configuradas manualmente.
yarn devA aplicação estará disponível em http://localhost:3000.
yarn buildyarn previewyarn generateEm um terminal separado, com o servidor de desenvolvimento rodando:
yarn inngest:devondedoar/
├── app.vue # Ponto de entrada da aplicação
├── nuxt.config.ts # Configuração do Nuxt (módulos, runtime config, etc.)
├── docker-compose.yml # MongoDB para desenvolvimento local
├── package.json
│
├── assets/
│ ├── css/global.css # Estilos globais
│ ├── pngs/ # Ícones PNG dos pins do mapa
│ └── vectors/ # Ícones SVG dos pins do mapa
│
├── components/
│ ├── MapLibre.client.vue # Componente principal do mapa (client-only)
│ ├── PinMarker.vue # Marcadores dos pontos no mapa
│ ├── BottomDrawer.vue # Gaveta inferior com lista de pontos visíveis
│ ├── ItemShortInfo.vue # Card resumido de um ponto
│ ├── ItemMoreDetails.vue # Detalhes completos de um ponto
│ ├── PlaceSearchInput.vue # Campo de busca por endereço
│ ├── HemocioneHeader.client.vue # Cabeçalho da aplicação
│ ├── HemocioneEnableLocation.vue # Modal para solicitar permissão de localização
│ └── TypeTag.vue # Tag de tipo do ponto (hospital, evento, etc.)
│
├── composables/
│ ├── ondedoar.ts # Fetching e parsing dos pontos da API
│ ├── geoCoding.ts # Geocodificação via Nominatim (OpenStreetMap)
│ └── states.ts # Estados globais compartilhados
│
├── layouts/
│ ├── default.vue # Layout padrão
│ └── SearchPlaces.vue # Layout com busca de lugares
│
├── middleware/
│ └── auth.ts # Middleware de autenticação via HemocioneID
│
├── pages/
│ ├── index.vue # Página principal (mapa)
│ └── test/index.vue # Página de testes
│
├── plugins/
│ └── auth.ts # Plugin de autenticação (executado no mount)
│
├── public/ # Assets públicos (favicon, logos)
│
├── server/
│ ├── api/
│ │ ├── inngest/ # Endpoint do Inngest
│ │ └── v1/
│ │ ├── points/ # GET /api/v1/points — lista pontos ativos
│ │ └── sync/ # Endpoints de sincronização de dados
│ ├── db/
│ │ ├── models/
│ │ │ ├── points.ts # Model Mongoose dos pontos (com índice 2dsphere)
│ │ │ └── syncManager.ts # Model de controle de sincronização
│ │ └── populate.ts # Script para popular o banco com dados de exemplo
│ ├── plugins/
│ │ └── mongoose.ts # Plugin de conexão com MongoDB
│ ├── services/
│ │ ├── point.ts # Serviço de pontos (queries no MongoDB)
│ │ ├── hemocioneid.ts # Integração com HemocioneID
│ │ ├── events.ts # Integração com Hemocione Digital Events
│ │ └── hemocioneAskForHelp.ts # Integração com Hemocione Ask for Help
│ ├── tasks/
│ │ └── jobs/ # Jobs do Inngest (sync de dados externos)
│ └── utils/
│ ├── geocodingService.ts # Geocodificação server-side (Google Maps)
│ └── lruCache.ts # Cache LRU para otimização de requests
│
├── store/
│ ├── map.ts # Store Pinia do mapa (pontos, centro, features visíveis)
│ └── users.ts # Store Pinia do usuário (auth, permissão de localização)
│
└── utils/
├── currentUserTokenDecoder.ts # Decodifica o JWT do usuário
├── decodeB64.ts # Utilitário de decodificação base64
├── formatSubtitle.ts # Formata subtítulos dos pontos
└── getHemocioneIdUrl.ts # Monta a URL de login do HemocioneID
Contribuições são bem-vindas! Siga os passos abaixo:
- Fork o repositório e clone o seu fork localmente
- Crie uma branch descritiva a partir de
main:git checkout -b feat/minha-funcionalidade # ou git checkout -b fix/meu-bug - Faça suas alterações seguindo as convenções do projeto:
- Commits no padrão Conventional Commits (
feat:,fix:,docs:,refactor:, etc.) - TypeScript: adicione tipagem sempre que possível (evite
any) - Componentes Vue: mantenha a separação
<template>/<script setup>/<style>
- Commits no padrão Conventional Commits (
- Suba a branch e abra um Pull Request para
maincom uma descrição clara do que foi feito
- O Nuxt DevTools está habilitado em desenvolvimento — acesse via o ícone flutuante na tela
- Use
docker-compose up -dpara subir o MongoDB antes de iniciar o servidor - As sincronizações de dados externos são feitas via Inngest; para testá-las localmente, rode
yarn inngest:devem paralelo comyarn dev
Este projeto é mantido pela equipe do Hemocione. Consulte o repositório ou entre em contato com a equipe para informações sobre licenciamento.