Weather Vue.js App

Aplicação web de previsão do tempo desenvolvida com Vue 3, Vite e TailwindCSS. Permite buscar o clima atual e a previsão para 5 dias de qualquer cidade, consumindo a API do OpenWeatherMap.

Funcionalidades

• Busca de cidade para exibir clima atual e previsão de 5 dias.
• Interface moderna, responsiva e com transições animadas.
• Exibe informações detalhadas: temperatura, sensação térmica, umidade, vento, descrição e bandeira do país.
• Armazena a última cidade pesquisada no navegador.
• Mensagens de erro amigáveis para cidade não encontrada ou falha na API.

Tecnologias Utilizadas

• Vue 3
• Vite
• TailwindCSS
• OpenWeatherMap API

Instalação e Uso

1. Clone o repositório:

   git clone <url-do-repositorio>
   cd weather-vuejs

2. Instale as dependências:

   npm install

3. Configure a variável de ambiente:

   • Crie um arquivo .env na raiz do projeto (já existe um exemplo):

     VITE_OPEN_WEATHER_API_KEY=SEU_TOKEN_AQUI
     

   • Substitua SEU_TOKEN_AQUI pela sua chave da API do OpenWeatherMap.

4. Execute o projeto em modo desenvolvimento:

   npm run dev

   O app estará disponível em http://localhost:5173 (ou porta indicada no terminal).

5. Build para produção:

   npm run build

6. Lint e formatação:

   • Para checar e corrigir problemas de lint:

     npm run lint

   • Para formatar o código:

     npm run format

Estrutura do Projeto

weather-vuejs/
├── public/                # Arquivos estáticos
├── src/
│   ├── assets/            # Estilos e imagens
│   ├── components/        # Componentes Vue (SearchBar, CurrentWeather, WeatherForecast)
│   ├── App.vue            # Componente principal
│   └── main.js            # Ponto de entrada da aplicação
├── .env                   # Variáveis de ambiente
├── package.json           # Dependências e scripts
├── vite.config.js         # Configuração do Vite
└── ...

Personalização

• Para alterar o idioma das respostas da API, modifique o parâmetro lang nas requisições em App.vue.
• O layout pode ser facilmente customizado editando os arquivos CSS em main.css ou ajustando as classes Tailwind nos componentes.

Recomendações de Extensões para VSCode

• Volar (Vue)
• ESLint
• Prettier
• EditorConfig

Licença

Este projeto é open-source e pode ser utilizado livremente para fins de estudo e aprimoramento.

---