Uma aplicação web moderna e responsiva para consulta de informações meteorológicas, desenvolvida com React, TypeScript e Tailwind CSS.
O Weather App é uma aplicação de previsão do tempo que oferece uma interface intuitiva e elegante para visualizar informações meteorológicas. O projeto apresenta:
- Interface moderna: Design clean e responsivo com gradientes e componentes bem estruturados
- Informações detalhadas: Exibe temperatura atual, previsão por horário, previsão semanal e detalhes meteorológicos
- Componentes reutilizáveis: Arquitetura baseada em componentes com shadcn/ui
- Experiência visual rica: Ícones SVG personalizados para diferentes condições climáticas
- Busca por cidades: Campo de pesquisa para localizar diferentes localidades
- 🌡️ Temperatura atual com sensação térmica
- ⏰ Previsão por horário (6h às 21h)
- 📅 Previsão semanal (7 dias)
- 🌧️ Detalhes meteorológicos: Chance de chuva, velocidade do vento, índice UV
- 🔍 Busca por cidades (interface preparada)
- 📱 Design responsivo para diferentes dispositivos
Antes de executar o projeto, certifique-se de ter instalado:
- Node.js (versão 18 ou superior)
- npm ou yarn (gerenciador de pacotes)
- Git (para clonagem do repositório)
- React 19.1.0 - Biblioteca para interfaces de usuário
- TypeScript 5.8.3 - Superset tipado do JavaScript
- Vite 6.3.5 - Build tool e dev server
- Tailwind CSS 4.1.8 - Framework CSS utilitário
- shadcn/ui - Biblioteca de componentes
- Lucide React - Ícones modernos
- React Icons - Biblioteca adicional de ícones
Siga os passos abaixo para configurar o projeto localmente:
git clone https://github.com/seu-usuario/weather-app.git
cd weather-appnpm install
# ou
yarn installnpm run dev
# ou
yarn devAbra seu navegador e acesse: http://localhost:5173
# Executar em modo de desenvolvimento
npm run dev
# Fazer build para produção
npm run build
# Visualizar build de produção
npm run preview
# Executar linting
npm run lintweather-app/
├── public/ # Assets estáticos (ícones SVG)
│ ├── clouds.svg
│ ├── sun.svg
│ ├── rain.svg
│ └── ...
├── src/
│ ├── components/
│ │ └── ui/ # Componentes UI reutilizáveis
│ │ ├── input.tsx
│ │ └── button.tsx
│ ├── lib/
│ │ └── utils.ts # Utilitários (cn function)
│ ├── App.tsx # Componente principal
│ ├── main.tsx # Ponto de entrada
│ └── index.css # Estilos globais
├── package.json
└── README.md
Para personalizar a aplicação:
- Adicionar novas cidades: Modifique os dados mockados no
App.tsx - Alterar ícones: Substitua os arquivos SVG na pasta
public/ - Modificar estilos: Ajuste as classes Tailwind nos componentes
- Integrar API: Implemente chamadas para APIs de clima reais
Contribuições são bem-vindas! Para contribuir com o projeto:
- Fork o projeto
- Clone seu fork localmente
- Crie uma branch para sua feature (
git checkout -b feature/nova-funcionalidade) - Commit suas mudanças (
git commit -m 'Adiciona nova funcionalidade') - Push para a branch (
git push origin feature/nova-funcionalidade) - Abra um Pull Request
- Mantenha o código limpo e bem documentado
- Siga os padrões de código existentes
- Teste suas alterações antes de enviar
- Descreva claramente as mudanças no PR
Para reportar bugs, abra uma Issue incluindo:
- Descrição detalhada do problema
- Passos para reproduzir
- Screenshots (se aplicável)
- Informações do ambiente (OS, navegador, versão do Node.js)
Para sugerir melhorias:
- Abra uma Issue com a tag
enhancement - Descreva a funcionalidade desejada
- Explique o benefício para os usuários
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
- ✅ Uso comercial permitido
- ✅ Modificação permitida
- ✅ Distribuição permitida
- ✅ Uso privado permitido
- ❌ Sem garantia
- ❌ Sem responsabilidade do autor
Para dúvidas, sugestões ou colaborações:
- Email: victormts.s1@gmail.com
- GitHub: @SoulHiro
- LinkedIn: Victor M.
Desenvolvido com ❤️ usando React + TypeScript + Tailwind CSS