Uma aplicação web interativa que identifica a localização do usuário e o cumprimenta em sua língua nativa, permitindo explorar saudações ao redor do globo através de um mapa interativo.
O projeto foca em experiência do usuário (UX) com uma interface vibrante e feedback em tempo real.
O Olá Mundo foi desenvolvido como projeto de estudo e com o objetivo de explorar as capacidades do React Router 7 (antigo Remix) em conjunto com o novo Tailwind CSS 4.
A lógica principal envolve:
- Detectar o IP e a localização aproximada do usuário.
- Buscar a saudação correta para o código do país identificado via API externa.
- Renderizar um mapa interativo onde o usuário pode clicar em qualquer lugar do mundo para descobrir como se diz "Olá" naquela região.
- Geolocalização Automática: Identifica cidade, país, IP e fuso horário logo ao entrar.
- Saudações Multilingues: Tradução dinâmica da saudação baseada no país selecionado.
- Mapa Interativo: Integração com Leaflet para seleção manual de locais.
- Interface Responsiva: Design moderno utilizando a nova engine do Tailwind CSS 4.
- SSR & SPA: Renderização no lado do servidor para performance e SEO.
- Docker Ready: Configuração completa para deploy via containers.
| Tecnologia | Finalidade |
|---|---|
| React Router 7 | Framework para renderização híbrida e gerenciamento de rotas. |
| TypeScript | Garantia de robustez e melhor experiência de desenvolvimento. |
| Tailwind CSS 4 | Design responsivo e moderno com foco em performance. |
| Leaflet | Implementação do mapa interativo e marcações geográficas. |
| Vite | Ambiente de desenvolvimento rápido e otimização de build. |
| Docker | Facilitação do deploy e isolamento de ambiente. |
# Instalar dependências
npm install
# Rodar em modo de desenvolvimento (HMR ativo)
npm run devA aplicação estará disponível em
http://localhost:5173
Você pode subir o projeto rapidamente usando Docker:
# Build da imagem
docker build -t hello-user .
# Rodar o container
docker run -p 3000:3000 hello-userO app estará acessível em
http://localhost:3000
/app/services/geo.service.ts: Gerenciamento de chamadas para APIs de IP e Geocoding./app/services/hello.service.ts: Integração com a API de saudações (HelloSalut)./app/components/Map.tsx: Componente isolado para o mapa utilizando Leaflet.
Este projeto está sob a licença MIT.
Desenvolvido com 💜 por Eduardo Lucas