Painel de monitoramento marinho em tempo real para gestão de incidentes de derramamento de petróleo.
⚠️ Todos os dados exibidos são fictícios e criados apenas para fins ilustrativos.
O Ocean Spill Monitor é um conceito de dashboard de monitoramento ambiental desenvolvido para explorar como interfaces complexas de dados críticos podem ser construídas de forma clara e responsiva.
O projeto simula um painel operacional real para equipes de resposta a derramamentos de petróleo, consolidando em uma única tela: localização geográfica dos incidentes, métricas de desempenho operacional, evolução temporal dos dados e status de contenção por ocorrência — tudo atualizado de forma reativa, a partir de dados simulados.
O principal desafio de design foi lidar com alta densidade de informação sem sacrificar a legibilidade. Dashboards operacionais precisam mostrar tudo ao mesmo tempo, mas de forma que quem opera consiga tomar decisões em segundos. Cada componente foi pensado para ter uma hierarquia visual clara: o que é crítico aparece primeiro, o que é contextual fica em segundo plano.
| Tecnologia | Uso no projeto |
|---|---|
| Next.js 14 | Framework principal com App Router para estrutura de rotas |
| TypeScript | Tipagem de todos os dados, props e estados da aplicação |
| Tailwind CSS | Estilização utilitária com design system consistente |
| Recharts | Gráficos de linha, barra e rosca com responsividade nativa |
| Leaflet | Mapa interativo com marcadores dinâmicos por severidade |
| shadcn/ui | Componentes de UI acessíveis como base para o design system |
Todos os dados simulados foram centralizados em lib/dashboard-data.ts, funcionando como uma camada de "mock de API". Isso mantém os componentes limpos e facilita a substituição futura por uma API real sem alterar a lógica de apresentação.
Em vez de passar props por múltiplos níveis, foi criado um provider específico para o dashboard que distribui os dados via Context API. Isso evita prop drilling e mantém cada componente focado apenas na sua responsabilidade visual.
Os componentes foram organizados por função dentro do domínio dashboard/, não por tipo de elemento (ex: não existe pasta charts/ ou cards/). Cada arquivo representa uma seção funcional do painel — spill-map, trend-charts, operations-panel — tornando a navegação no código mais intuitiva.
O Leaflet exige sobrescrever estilos globais que conflitam com o Tailwind. Para evitar poluir o globals.css, esses overrides foram encapsulados em leaflet-styles.tsx, um componente que injeta os estilos apenas quando o mapa está presente.
Além do Tailwind para responsividade visual, foi criado o hook use-mobile.ts para adaptar o comportamento dos componentes em telas menores — como colapsar o painel lateral ou simplificar os gráficos — separando responsividade de layout da responsividade de lógica.
├── app/ # Rotas e páginas (Next.js App Router)
├── components/
│ ├── dashboard/
│ │ ├── command-center.tsx # Central de comando operacional
│ │ ├── header.tsx # Cabeçalho do dashboard
│ │ ├── incidents-list.tsx # Lista de incidentes ativos
│ │ ├── kpi-cards.tsx # Cards de métricas principais
│ │ ├── leaflet-styles.tsx # Estilos customizados do mapa
│ │ ├── ocean-elements.tsx # Elementos visuais do oceano
│ │ ├── operations-panel.tsx # Painel operacional
│ │ ├── ospr-data-provider.tsx# Provedor de dados dos incidentes
│ │ ├── spill-map.tsx # Mapa interativo de derramamentos
│ │ └── trend-charts.tsx # Gráficos de tendência
│ └── ui/
│ └── theme-provider.tsx # Provedor de tema (dark/light)
├── hooks/
│ ├── use-mobile.ts # Hook de detecção mobile
│ └── use-toast.ts # Hook de notificações
├── lib/
│ ├── dashboard-data.ts # Dados simulados do dashboard
│ └── utils.ts # Funções utilitárias
├── styles/
│ └── globals.css # Estilos globais
└── public/ # Assets estáticos
git clone https://github.com/zatsstanley/ocean-spill-monitor.git
cd ocean-spill-monitor
npm install
npm run devAcesse em http://localhost:3000
MIT © 2026 — Desenvolvido por Manoela Stanley