<div align="center">

🚌 Interno Rotas - UFMG

Navegue pelo Campus Pampulha com facilidade

🌐 Acessar Aplicação · 🐛 Reportar Bug · 💡 Sugerir Feature

</div>

---

📖 Sobre o Projeto

O Interno Rotas é uma aplicação web moderna e interativa para consulta de horários e rotas dos ônibus internos do Campus Pampulha da UFMG. Desenvolvido com foco em experiência do usuário, acessibilidade e performance, o projeto transforma informações fragmentadas em uma interface intuitiva e visualmente clara.

🎯 O Problema

O site oficial da UFMG disponibiliza informações sobre o transporte interno, porém:

• 📍 Utiliza apenas siglas de localização, dificultando a orientação de novos usuários
• 🖥️ Interface pouco intuitiva e não responsiva
• 🗺️ Ausência de visualização geográfica das rotas
• ⏰ Difícil identificar qual linha pegar para chegar a um destino específico

💡 A Solução

| Funcionalidade | Descrição | | :--------------------------: | :-------------------------------------------------------- | | 🗺️ Mapa Interativo | Visualização geográfica completa do campus com zoom e pan | | 🎨 Rotas Animadas | Cada linha com cor única e animação de trajeto | | ⏱️ Horários em Tempo Real | Próximo ônibus e último que passou | | 📱 100% Responsivo | Otimizado para mobile, tablet e desktop | | 🌙 Tema Escuro | Suporte a dark mode nativo | | 🔍 Busca Inteligente | Encontre linhas rapidamente |

---

✨ Funcionalidades

<table> <tr> <td width="50%">

🗺️ Mapa & Rotas

• ✅ Mapa interativo com OpenStreetMap
• ✅ Rotas animadas com Leaflet Ant Path
• ✅ Marcadores de paradas clicáveis
• ✅ Popup com detalhes de cada parada
• ✅ Centralização automática na rota selecionada

</td> <td width="50%">

📊 Horários & Informações

• ✅ Horários em tempo real
• ✅ Grade completa de horários
• ✅ Categorias: Dias Úteis, Sábados, Férias
• ✅ Indicador de próximo ônibus
• ✅ Aviso de período de férias/recesso

</td> </tr> <tr> <td width="50%">

🎨 Interface & UX

• ✅ Design System completo
• ✅ Tema claro/escuro automático
• ✅ Animações suaves e transições
• ✅ Componentes acessíveis (ARIA)
• ✅ Feedback visual em interações

</td> <td width="50%">

📱 Mobile & Performance

• ✅ Layout responsivo mobile-first
• ✅ Menu lateral adaptativo
• ✅ Touch-friendly interactions
• ✅ Performance otimizada
• ✅ Carregamento rápido

</td> </tr> </table>

---

🎨 Screenshots

🖥️ Desktop

<div align="center">

| Tela Inicial | Linha Selecionada | Grade de Horários | | :----------------------------------------------------------------: | :---------------------------------------------------------------------: | :-------------------------------------------------------------------------: | | | | |

</div>

📱 Mobile

<div align="center">

| Tela Inicial | Menu Lateral | Detalhes da Linha | | :--------------------------------------------------------------: | :------------------------------------------------------------------: | :-----------------------------------------------------------------------: | | | | |

</div>

---

🛠️ Stack Tecnológica

⚛️ Frontend Core

| Tecnologia | Versão | Descrição | | :-------------------------------------------------------------------------------------------------------------: | :----: | :------------------------------------------------- | | | 19.x | Framework UI com novos recursos (use, ref as prop) | | | 5.9 | Tipagem estática e IntelliSense | | | 8.x | Build tool ultrarrápido com HMR |

🎨 Estilização

| Tecnologia | Versão | Descrição | | :-----------------------------------------------------------------------------------------------------------: | :----: | :--------------------------------- | | | 4.x | CSS utility-first com @theme | | | 3.x | Variantes de componentes type-safe | | | 0.563 | Ícones modernos e consistentes |

🗺️ Mapas & Visualização

| Tecnologia | Descrição | | :----------------------------------------------------------------------------------------------------------------------: | :------------------------------------- | | | Biblioteca de mapas interativos | | | Tiles de mapa open source | | Leaflet Ant Path | Animação de rotas com efeito "formiga" |

📦 Outras Dependências

• @base-ui/react - Componentes headless acessíveis
• react-ga4 - Google Analytics 4 integration
• date-fns - Manipulação de datas
• use-debounce - Hooks de debounce

---

🏗️ Arquitetura

app/
├── src/
│   ├── components/          # Componentes React
│   │   ├── ui/              # Design System (Button, Card, Badge, Dialog...)
│   │   └── map/             # Componentes do mapa (MapMarkers, MapRoute...)
│   ├── contexts/            # Context API (RotasContext, ThemeContext)
│   ├── hooks/               # Custom hooks (useAnalytics, useLinhasFilter)
│   ├── services/            # Camada de serviços (RotasService)
│   ├── data/                # Dados estáticos (linhas, paradas)
│   ├── types/               # TypeScript types
│   └── config/              # Configurações (specialPeriods)
├── public/                  # Assets estáticos
└── docs/                    # Documentação técnica

🎯 Design Patterns Utilizados

• Compound Components - Dialog, Tabs, Card
• Context API - Estado global sem prop drilling
• Custom Hooks - Lógica reutilizável
• Service Layer - Abstração de dados
• Composition - Componentes flexíveis e extensíveis

---

🚀 Quick Start

Pré-requisitos

• Node.js 20.19+
• pnpm 8+ (recomendado) ou npm/yarn

Instalação

# Clone o repositório

git clone https://github.com/internorotas/ufmg.git
cd ufmg/app

# Instale as dependências

pnpm install

# Inicie o servidor de desenvolvimento

pnpm dev

# Acesse http://localhost:5173/ufmg/

Scripts Disponíveis

| Comando | Descrição | | :--------------: | :----------------------------------- | | `pnpm dev` | Inicia o servidor de desenvolvimento | | `pnpm build` | Gera build de produção | | `pnpm preview` | Preview do build local | | `pnpm lint` | Executa ESLint | | `pnpm format` | Formata código com Prettier |

---

🤝 Contribuindo

Contribuições são muito bem-vindas! Este é um projeto open source feito para a comunidade.

Como Contribuir

1. Fork o repositório
2. Crie uma branch para sua feature ```bash git checkout -b feature/minha-feature