{"id":48786540,"url":"https://github.com/eryckassis/weather-app","last_synced_at":"2026-04-13T17:17:28.334Z","repository":{"id":304606180,"uuid":"1019074437","full_name":"eryckassis/weather-app","owner":"eryckassis","description":"Este projeto é uma aplicação de previsão do tempo, feita para ser intuitiva, visualmente agradável e fácil de usar. Você pesquisa a cidade e já vê informações como temperatura, condições do clima e dados do local — tudo pensado para funcionar bem no mobile!","archived":false,"fork":false,"pushed_at":"2025-10-06T19:07:04.000Z","size":356,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-06T20:45:51.454Z","etag":null,"topics":["api","css","html5","nextsjs","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eryckassis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-13T17:20:33.000Z","updated_at":"2025-10-06T19:07:08.000Z","dependencies_parsed_at":"2025-07-14T08:31:30.190Z","dependency_job_id":"a61b7f05-161f-4646-9625-3e847767ad71","html_url":"https://github.com/eryckassis/weather-app","commit_stats":null,"previous_names":["eryckassis/weather-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eryckassis/weather-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fweather-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fweather-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fweather-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fweather-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eryckassis","download_url":"https://codeload.github.com/eryckassis/weather-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eryckassis%2Fweather-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31762065,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T15:25:13.801Z","status":"ssl_error","status_checked_at":"2026-04-13T15:25:09.162Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","css","html5","nextsjs","react","typescript"],"created_at":"2026-04-13T17:17:27.784Z","updated_at":"2026-04-13T17:17:28.328Z","avatar_url":"https://github.com/eryckassis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Weather App\n\nDocumentação completa e didática do aplicativo de consulta de clima em tempo real, com foco em uso prático, tecnologias adotadas, arquitetura, decisões de engenharia, tratamento de erros e diretrizes de código limpo.\n\n## Visão geral\n\nO Weather App permite buscar as condições atuais de clima por cidade, exibindo temperatura, descrição do tempo e informações complementares. A interface prioriza simplicidade, leitura e resposta rápida.\n\n- Entrada: nome da cidade digitado pelo usuário na barra de pesquisa.\n- Processamento: chamada à API pública do OpenWeatherMap com linguagem pt-BR e unidade métrica.\n- Saída: renderização de dados principais (temperatura, descrição, localização) com feedbacks de carregamento e de erro.\n\n## Tecnologias e bibliotecas\n\n- Next.js 15 (React 19) — base do aplicativo, roteamento e Dev Server.\n- React 19 — componentes funcionais, hooks e memoização.\n- TypeScript — tipagem estática e maior segurança de evolução.\n- Jest + Testing Library — base para testes unitários e de componentes (estrutura configurada no projeto).\n- CSS (Global) — estilos globais em `src/styles/globals.css`.\n\nDependências principais (ver `weather-app/package.json`):\n\n- `next`, `react`, `react-dom`\n- Ferramentas de desenvolvimento: `typescript`, `jest`, `@testing-library/*`, `eslint`, `prettier`\n\n## Arquitetura e organização\n\nEstrutura relevante:\n\n- `src/pages/index.tsx`: página principal; controla estado de busca, carrega dados e renderiza a UI.\n- `src/components/SearchBar.tsx`: componente controlado de entrada e submissão da pesquisa.\n- `src/services/weatherApi.ts`: integração com a API do OpenWeatherMap.\n- `src/styles/globals.css`: estilos globais do app.\n- `tests/`: diretório reservado a testes (arquivos já criados, a serem preenchidos).\n\nFluxo resumido:\n\n1. O usuário digita uma cidade na `SearchBar` e envia o formulário.\n2. A página principal atualiza o estado de cidade, dispara a busca assíncrona e exibe estados de carregamento/erro.\n3. Com a resposta bem-sucedida, os dados são renderizados na tela.\n\n## Uso da API de clima (OpenWeatherMap)\n\nA integração está em `src/services/weatherApi.ts`.\n\n- Endpoint: `https://api.openweathermap.org/data/2.5/weather`\n- Parâmetros utilizados:\n  - `q`: nome da cidade (codificado via `encodeURIComponent`).\n  - `appid`: chave de API obtida no OpenWeatherMap.\n  - `units=metric`: retorno em Celsius.\n  - `lang=pt_br`: descrições em português do Brasil.\n- Variável de ambiente: `NEXT_PUBLIC_OPENWEATHER_API_KEY` (exposta no cliente porque a chamada é feita no browser).\n\nContrato de retorno (simplificado, conforme uso em `index.tsx`):\n\n- `name`: nome da cidade.\n- `sys.country` e `sys.state?`: país e estado (quando disponível).\n- `main.temp`: temperatura atual em °C.\n- `weather[0].description`: descrição textual do clima.\n- `sys.sunrise` e `sys.sunset`: horários em UNIX timestamp (segundos).\n\nErros da API: respostas com `response.ok === false` resultam em `throw new Error(\"Erro ao buscar dados do clima\")`, tratadas na página para mostrar uma mensagem clara ao usuário.\n\n## Tratamento de erros e estados da UI\n\nNa página `index.tsx`:\n\n- `loading`: controla o estado de carregamento enquanto a requisição ocorre.\n- `error`: armazena mensagens quando a busca falha (por exemplo, cidade inválida ou problema de rede).\n- Feedbacks visuais: mensagens “Carregando localização...” e exibição de erro em destaque.\n\nBoas práticas aplicadas:\n\n- Evitar submissão vazia: `if (!search.trim()) return;` impede requisições inúteis.\n- Sanitização simples: `trim()` e `encodeURIComponent` na construção da URL.\n- Mensagens consistentes de erro: uma única origem de erro no serviço e tratamento na página.\n\n## Refatoração: Clean Code e SOLID\n\nApós meses, o código foi revisitado com foco em legibilidade, manutenção e clareza de responsabilidades.\n\nObjetivos da refatoração:\n\n- Separação de responsabilidades (SRP):\n  - Componente `SearchBar` cuida apenas de input e submissão.\n  - Serviço `weatherApi` centraliza acesso à API e mensagens de erro.\n  - Página `index.tsx` orquestra estados e renderização.\n- Nomeação explícita e coesa: estados como `city`, `search`, `loading` e `error` com papéis definidos.\n- Contratos mínimos e tipagem: `WeatherData` tipa o essencial utilizado na UI, reduzindo acoplamento ao payload completo.\n- Previsibilidade de fluxos: carregamento, sucesso, erro e limpeza do campo de busca.\n\nProblemas endereçados pela refatoração:\n\n- Acoplamento entre UI e chamada à API: removido ao mover a integração para `src/services/weatherApi.ts`.\n- Repetição de lógica de estados: unificado no efeito que depende de `city`.\n- Falta de mensagens de erro consistentes: padronizadas no serviço e propagadas para a interface.\n- Dificuldade de leitura: nomes e funções pequenos, com uma única responsabilidade.\n\nPor que Clean Code mantém o software manutenível:\n\n- Facilita evolução incremental sem efeitos colaterais inesperados.\n- Reduz custo cognitivo para novos contribuidores e para você no futuro.\n- Ajuda a isolar mudanças (por exemplo, troca de API ou ajuste de layout) com impacto limitado.\n\nRelação com SOLID (pragmática):\n\n- SRP: componentes/serviços com foco único.\n- OCP: a página consome o serviço via função; trocar a implementação preserva a interface pública.\n- DIP (na medida do necessário): a UI depende de uma abstração simples (`getWeatherByCity`), e não do detalhe de `fetch`.\n\n## Como executar localmente\n\nPré-requisitos:\n\n- Node.js LTS e npm instalados.\n- Chave da API do OpenWeatherMap.\n\nPassos:\n\n1. Clonar o repositório.\n2. Instalar dependências.\n3. Definir a variável de ambiente `NEXT_PUBLIC_OPENWEATHER_API_KEY`.\n4. Iniciar o servidor de desenvolvimento.\n\nExemplo de execução:\n\n```bash\ngit clone https://github.com/eryckassis/weather-app.git\ncd weather-app/weather-app\nnpm install\n\n# Defina a variável de ambiente (Windows PowerShell)\n$env:NEXT_PUBLIC_OPENWEATHER_API_KEY=\"SUA_CHAVE_AQUI\"\n\n# Em bash (Git Bash/WSL)\nexport NEXT_PUBLIC_OPENWEATHER_API_KEY=\"SUA_CHAVE_AQUI\"\n\nnpm run dev\n```\n\nPor padrão, o Next.js expõe a aplicação em `http://localhost:3000` (caso você tenha alterado a porta, ajuste conforme necessário).\n\n## Testes\n\nA suíte de testes está preparada com Jest e Testing Library. Arquivos de teste já existem em `tests/`, prontos para implementação. Para rodar:\n\n```bash\nnpm test\n```\n\nSugestões de casos:\n\n- `SearchBar`: digitação e submissão disparam `onSubmit` com valor preenchido.\n- `weatherApi`: simular `fetch` bem-sucedido e com erro (status 404/500).\n- Página `index`: renderiza estados de carregamento, erro e sucesso.\n\n## Padrões de código e qualidade\n\n- TypeScript em modo `strict` (ver `tsconfig.json`).\n- ESLint e Prettier presentes nas dependências (recomenda-se configurar scripts para lint e format).\n- `reactStrictMode` habilitado no `next.config.js`.\n\nEste documento foi escrito com foco em clareza e manutenção a longo prazo.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feryckassis%2Fweather-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feryckassis%2Fweather-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feryckassis%2Fweather-app/lists"}