← Voltar para Projetos

CloudGeo — AWS Regions Explorer

✓ Disponível Cloud Computing

Aplicação web interativa para explorar as regiões da AWS em um mapa mundial, desenvolvida com JavaScript e Leaflet.js e implantada na AWS Amplify Hosting. Possui arquitetura AWS documentada no Draw.io.

Categoria Cloud Computing & Web Dev
Core Stack JavaScript · Leaflet.js · AWS Amplify
Hospedagem AWS Amplify Hosting · us-east-1
Código Repositório GitHub →
Acessar Aplicação Repositório GitHub Ver Outros Projetos

Visão Geral

O CloudGeo é uma aplicação web estática que exibe as regiões da AWS em um mapa mundial interativo. O usuário pode visualizar a localização geográfica de cada região, facilitando o entendimento da infraestrutura global da AWS.

A aplicação é renderizada inteiramente no navegador — sem backend — e utiliza dados geoespaciais armazenados em um arquivo dados/regioes.json hospedado junto à aplicação. Os tiles do mapa são servidos pelo OpenStreetMap via Leaflet.js.

Funcionalidades e Escopo

  • Exploração: mapa com marcadores e painel de detalhes das regiões AWS.
  • Busca e filtros: pesquisa por nome, código, cidade ou país e filtro por continente, processados no navegador.
  • Dashboard: contadores de regiões, continentes e regiões visíveis após a filtragem.
  • Dados educativos: seis regiões em cinco continentes, com coordenadas aproximadas. Não representam a localização de data centers nem a cobertura completa da AWS.

Próximas tarefas no projeto: concluir a validação entre navegadores e em dispositivos móveis, melhorar navegação e zoom do mapa, ampliar o conjunto de regiões e implementar testes automatizados de frontend. Essas melhorias estão planejadas no repositório oficial.

Diagrama de Arquitetura

A arquitetura foi documentada manualmente no Draw.io e representa o fluxo completo: do repositório GitHub até o usuário final, passando pelo pipeline de CI/CD do AWS Amplify Hosting.

cloudgeo-architecture.svg — AWS Amplify Hosting
Diagrama de arquitetura do CloudGeo: GitHub → AWS Amplify Hosting → Navegador do usuário, com Leaflet.js consumindo tiles do OpenStreetMap e dados de regioes.json
Arquitetura AWS Amplify Hosting: CI/CD via GitHub, entrega de ativos estáticos (HTML, CSS, JS, JSON) por HTTPS e tiles do mapa via OpenStreetMap.

Decisões Técnicas

01 // FRONTEND PURO

Sem Backend

Aplicação 100% estática: HTML, CSS e JavaScript sem frameworks. Não há servidor de aplicação — todo o processamento ocorre no navegador do usuário.

02 // MAPA INTERATIVO

Leaflet.js + OpenStreetMap

Leaflet.js renderiza o mapa interativo consumindo tiles do OpenStreetMap via HTTPS. Leve, open-source e amplamente adotado para aplicações de geolocalização.

03 // DADOS

dados/regioes.json

Os dados das regiões AWS são armazenados em um arquivo JSON estático hospedado junto à aplicação, eliminando dependências externas de API em tempo de execução.

04 // HOSPEDAGEM

AWS Amplify Hosting

Deploy contínuo via GitHub. A cada push na branch principal, o Amplify executa o pipeline de CI/CD e publica automaticamente a nova versão da aplicação.

Fluxo de Publicação e Entrega

  • Repositório GitHub: código-fonte versionado com deploy automático configurado no AWS Amplify.
  • CI/CD — AWS Amplify: a cada push, o Amplify executa o build e publica os ativos estáticos na CDN.
  • Entrega ao usuário: HTML, CSS, JS e JSON entregues por HTTPS. Leaflet.js requisita tiles do OpenStreetMap diretamente do navegador.
  • Região: aplicação hospedada em us-east-1 com URL pública provisionada pelo Amplify Hosting.