-
Charlie Challenge
+### Projeto NextJS 14 - Desafio de Codificação
-[[English](README.md) | [Portuguese](README.pt.md)]
+
-Build a responsive microsite to display the weather forecast at the locations given in the white text box (in the [example](./exemplo.jpg) image is where "Rio de Janeiro, Rio de Janeiro" appears. This text box should be an `input`, where the user can change the location. With the change of location, the weather forecast information for the new location must be loaded.
+## Visão Geral
-Once the page is opened, the user's geographic coordinates must be collected by the browser API to discover the city name via _reverse geocode_.
+Este projeto foi desenvolvido utilizando NextJS 14 e React, com o objetivo de criar uma aplicação de previsão do tempo com uma interface mais apelativa e clean. Várias decisões técnicas foram tomadas para otimizar o desempenho, acessibilidade e usabilidade da aplicação.
-The Bing highlight image should be used as the background. Forecasts for: today, tomorrow and the day after tomorrow should be shown.
+[Confira o projeto rodando.](https://challenge-charlie-mocha.vercel.app/)
-Note that there is a gradient superimposed on the original image, in fact this color reflects the current temperature of the place searched for the three dates. For temperatures below 15ºC, shades of blue should be used, for temperatures above 35ºC, shades of red should be used and shades of yellow should be used for other temperatures. When there is no chosen location, shades of gray should be used as the basis for the gradient. If the user clicks on any temperature, the temperatures should be changed from Celsius to Fahrenheit or from Fahrenheit to Celsius.
+## Decisões Técnicas
-The background image URL should be extracted from the [Bing API](https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=pt-US).
+- **Visual Apelativo**: O visual foi aprimorado para ser mais atraente e clean.
+- **Rotas no Server**: Todos os serviços externos possuem rotas no servidor para consumo pelo frontend, resolvendo problemas de CORS.
+- **Imagem do Bing**: Utiliza-se um efeito de vidro (glass effect) para desfocar a imagem do Bing, focando a atenção no widget de previsão do tempo.
+- **Utilitários**: Foram criados utilitários para sanitização de input e conversão de temperatura, evitando requisições adicionais.
+- **Server-Side Rendering (SSR)**: Imagem e localização de placeholder são obtidas via SSR com componentes de servidor, garantindo que tudo esteja pronto na tela para o usuário.
+- **Testes**: Testes foram escritos para cada tipo de arquivo, embora não haja 100% de cobertura para acelerar a entrega.
+- **Hooks de Commit e Push**: Utilização do Husky, commit-lint e commitzen para validar linter, rodar testes e build antes de commits ou push, garantindo qualidade e padronização.
+- **Validação com Zod**: Variáveis de ambiente são validadas com Zod, notificando o desenvolvedor caso estejam faltando.
+- **Boas Práticas de React**: Componentes otimizados, lógica movida para custom hooks e uso de composição.
+- **Acessibilidade**: A aplicação foi desenvolvida com foco na acessibilidade.
+- **Interface de Monitoramento Genérica**: Foi criada uma interface genérica para ferramentas de monitoramento.
-To consult the weather forecast, use the one from [OpenWeather](http://api.openweathermap.org/data/2.5/weather?q={{location_name}}&APPID=772920597e4ec8f00de8d376dfb3f094) informing the name of the location instead of ` {{location_name}}` using app id `772920597e4ec8f00de8d376dfb3f094`. If necessary, create a new account.
+## Melhorias Futuras
-To convert latitude and longitude to a location use [OpenCage](https://api.opencagedata.com/geocode/v1/json?q={{latitude}},{{longitude}}&key=c63386b4f77e46de817bdf94f552cddf&language=en) using the API key `c63386b4f77e46de817bdf94f552cddf`. If necessary, create a new account.
+- **Testes**: Escrever mais testes e implementar testes e2e com Cypress ou Playwright.
+- **Estados de Loading e Erro**: Adicionar estados de carregamento e erro nos componentes.
+- **Gerenciamento de Estado**: Utilizar Zustand ou Context API para projetos mais complexos.
+- **UI**: Adotar Shadcn para criação da interface em vez de desenvolver manualmente.
+- **Desempenho**: Revisar componentes para identificar gargalos de renderização.
+- **Monitoramento**: Implementar monitoramento no middleware do Next e em outros pontos.
+- **Caching**: Melhorar o caching das requisições.
-Icons can be found at http://www.alessioatzeni.com/meteocons/.
+## Rodando o Projeto
-The layout must be followed, but you can suggest improvements. Describe these improvements in the README and why. You get extra points if these improvements are positive, or lose points otherwise.
+### Pré-requisitos
-## Requirements
+- Node.js
+- Docker
+- docker-compose
-- Preferably do it in React, but you can use other libraries or frameworks (Angular, Vue.js, etc) or pure JavaScript (Vanilla JS).
-- For the style sheet, you can use whatever you prefer (CSS, SASS, LESS, CSS Modules, CSS-in-JS, etc).
-- Preferably use Webpack. If you prefer, you can use [create-react-app](https://github.com/facebook/create-react-app) or similar. Doing your own Webpack setup gives you extra points.
-- It is interesting that your application is ready for production. Create in Docker a `stage` for production and one for development of extra points.
-- Fork this challenge and create your project (or workspace) using your version of that repository, as soon as you finish the challenge, submit a _pull request_.
- - If you have any reason not to submit a _pull request_, create a private repository on Github, do every challenge on the **master** branch and don't forget to fill in the `pull-request.txt` file. As soon as you finish your development, add the user [`automator-hurb`](https://github.com/automator-hurb) to your repository as a contributor and make it available for at least 30 days. **Do not add the `automator-hurb` until development is complete.**
- - If you have any problem creating the private repository, at the end of the challenge fill in the file called `pull-request.txt`, compress the project folder - including the `.git` folder - and send it to us by email.
-- The code needs to run inside a Docker container.
-- To run your code, all you need to do is run the following commands:
- - git clone \$your-fork
- - cd \$your-fork
- - command to install dependencies
- - command to run the application
+### Configuração
-## Evaluation criteria
+1. Clone o repositório:
-- **Organization of code**: Separation of modules, view and model, back-end and front-end
-- **Clarity**: Does the README explain briefly what the problem is and how can I run the application?
-- **Assertiveness**: Is the application doing what is expected? If something is missing, does the README explain why?
-- **Code readability** (including comments)
-- **Security**: Are there any clear vulnerabilities?
-- **Test coverage** (We don't expect full coverage)
-- **History of commits** (structure and quality)
-- **UX**: Is the interface user-friendly and self-explanatory? Is the API intuitive?
-- **Technical choices**: Is the choice of libraries, database, architecture, etc. the best choice for the application?
+ ```bash
+ git clone https://github.com/seu-usuario/seu-repositorio.git
+ cd seu-repositorio
+ ```
-## Doubts
+2. Crie o arquivo `.env` utilizando o `.env.example` como modelo e preencha as variáveis necessárias. Entre em contato para obter os valores específicos, se necessário.
-Any questions you may have, check the [_issues_](https://github.com/HurbCom/challenge-charlie/issues) to see if someone hasn't already and if you can't find your answer, open one yourself. new issue!
+### Usando Docker
-Godspeed! ;)
+#### Desenvolvimento
-
-
-
Desafio Charlie
-
-[[English](README.md) | [Portuguese](README.pt.md)]
-
-Construa um microsite responsivo para mostrar a previsão do tempo nas localidades informadas na caixa de texto branca (na imagem de [exemplo](./exemplo.jpg) é o local aonde aparece "Rio de Janeiro, Rio de Janeiro"). Essa caixa de texto deve ser um `input`, aonde o usuário pode trocar a localidade. Com a mudança da localidade, devem ser carregadas as informações de previsão do tempo referentes à nova localidade.
-
-Logo que a página seja aberta deve ser coletada as coordenadas geográficas do usuário pela API do navegador para então se descobrir o nome da cidade via _reverse geocode_.
-
-Como fundo de tela deve ser usado a imagem de destaque do Bing. Devem ser mostradas as previsões para: hoje, amanhã e depois de amanhã.
-
-Note que existe um degradê sobreposto na imagem original, na verdade essa cor reflete a temperatura atual do lugar buscado para as três datas. Para temperaturas abaixo de 15ºC deve ser usado tons de azul, para temperaturas acima de 35ºC deve ser usado tons de vermelho e use tons de amarelo para as demais temperaturas. Quando não houver nenhuma localidade escolhida deve ser usado tons de cinza como base para o degradê. Se o usuário clicar em qualquer temperatura, as temperaturas devem ser alteradas de Celsius para Fahrenheit ou de Fahrenheit para Celsius.
-
-A URL da imagem de fundo deve ser extraida da [API do Bing](https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=pt-BR).
-
-Para consultar a previsão do tempo, utilize a do [OpenWeather](http://api.openweathermap.org/data/2.5/weather?q={{location_name}}&APPID=772920597e4ec8f00de8d376dfb3f094) informando o nome da localidade no lugar de `{{location_name}}` usando a app id `772920597e4ec8f00de8d376dfb3f094`. Caso necessário, crie uma nova conta.
-
-Para converter latitude e longitude em uma localidade utilize o [OpenCage](https://api.opencagedata.com/geocode/v1/json?q={{latitude}},{{longitude}}&key=c63386b4f77e46de817bdf94f552cddf&language=en) usando a API key `c63386b4f77e46de817bdf94f552cddf`. Caso necessário, crie uma nova conta.
-
-Os ícones podem ser encontrados em http://www.alessioatzeni.com/meteocons/.
-
-O layout deve ser seguido, mas você pode sugerir melhorias. Descreva essas melhorias no README e diga o por que delas. Você ganha pontos extras se essas melhorias forem positivas, ou perde pontos do contrário.
-
-## Requisitos
-
-- Preferencialmente faça em React, mas você pode usar outras bibliotecas ou frameworks (Angular, Vue.js, etc) ou JavaScript puro (Vanilla JS).
-- Para a folha de estilo, você pode usar o que preferir (CSS, SASS, LESS, CSS Modules, CSS-in-JS, etc).
-- Preferencialmente use Webpack. Se preferir, você pode usar [create-react-app](https://github.com/facebook/create-react-app) ou similares. Fazer o próprio setup do Webpack da pontos extras.
-- É interessante que sua aplicação esteja pronta para produção. Criar no Docker um `stage` para produção e um para desenvolvimento da pontos extras.
-- Forkar esse desafio e criar o seu projeto (ou workspace) usando a sua versão desse repositório, tão logo acabe o desafio, submeta um _pull request_.
- - Caso você tenha algum motivo para não submeter um _pull request_, crie um repositório privado no Github, faça todo desafio na branch **master** e não se esqueça de preencher o arquivo `pull-request.txt`. Tão logo termine seu desenvolvimento, adicione como colaborador o usuário [`automator-hurb`](https://github.com/automator-hurb) no seu repositório e o deixe disponível por pelo menos 30 dias. **Não adicione o `automator-hurb` antes do término do desenvolvimento.**
- - Caso você tenha algum problema para criar o repositório privado, ao término do desafio preencha o arquivo chamado `pull-request.txt`, comprima a pasta do projeto - incluindo a pasta `.git` - e nos envie por email.
-- O código precisa rodar dentro de um container Docker.
-- Para executar seu código, deve ser preciso apenas rodar os seguintes comandos:
- - git clone \$seu-fork
- - cd \$seu-fork
- - comando para instalar dependências
- - comando para executar a aplicação
-
-## Critério de avaliação
-
-- **É executado conforme esperado**: O passo-a-passo pedido para rodar a aplicação funciona?
-- **Organização do código**: Separação de módulos e organização do projeto (back-end e front-end).
-- **Clareza**: O README explica de forma resumida qual é o problema e como pode rodar a aplicação?
-- **Assertividade**: A aplicação está fazendo o que é esperado? Se tem algo faltando, o README explica o porquê?
-- **Legibilidade do código** É fácil ler e entender o código? Existem muitas variáveis/funções com nome enigmático? Comentários no código ajudam a explicar o fluxo?
-- **Segurança**: Existe alguma vulnerabilidade clara?
-- **Cobertura de testes** Qualidade e cobertura dos testes (não esperamos cobertura completa).
-- **Histórico de commits** Qualidade e estrutura dos commits.
-- **UX**: A interface é de fácil uso e auto-explicativa? As rotas/métodos da API são intuitivos?
-- **Escolhas técnicas**: A escolha das bibliotecas, arquitetura etc, é a melhor escolha para a aplicação?
-
-## Dúvidas
-
-Quaisquer dúvidas que você venha a ter, consulte as [_issues_](https://github.com/HurbCom/challenge-charlie/issues) para ver se alguém já não a fez e caso você não ache sua resposta, abra você mesmo uma nova issue!
-
-Boa sorte e boa viagem! ;)
-
-
-
-
{title}
+{isCelsius ? `${celsius.toFixed(0)}ºC` : `${fahrenheit.toFixed(0)}ºF`}
+{description}
++ Vento: {windDirection} {wind}km/h +
+Umidade: {humidity}%
+Pressão: {pressure}hPA
+