Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/guihsp/climate-view

ClimateView é um aplicativo web interativo desenvolvido em React que permite aos usuários obter informações precisas e atualizadas sobre o clima em qualquer localidade. Utilizando a poderosa API do OpenWeatherMap.
https://github.com/guihsp/climate-view

axios prop-types react react-hooks react-icons styled-components vite

Last synced: 16 days ago
JSON representation

Host: GitHub
URL: https://github.com/guihsp/climate-view
Owner: Guihsp
License: mit
Created: 2024-08-27T19:03:09.000Z (3 months ago)
Default Branch: main
Last Pushed: 2024-09-11T18:53:47.000Z (2 months ago)
Last Synced: 2024-10-10T17:22:13.207Z (about 1 month ago)
Topics: axios, prop-types, react, react-hooks, react-icons, styled-components, vite
Language: JavaScript
Homepage: https://climate-view.vercel.app
Size: 81.1 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# ClimateView

lang: [pt-br](#sobre) | [en](#about)

## Sobre

ClimateView é uma aplicação web que permite visualizar dados climáticos de diferentes cidades do mundo. A aplicação foi desenvolvido utilizando a biblioteca ReactJS e a API OpenWeatherMap. Para visualizar os dados climáticos de uma cidade, basta digitar o nome da cidade no campo de busca e clicar no botão de pesquisa ou pressionar a tecla Enter.

Para acessar a aplicação, [clique aqui](https://climate-view.vercel.app) ou copie e cole o link abaixo no seu navegador:
``` https://climate-view.vercel.app ```

![imagem](https://imgur.com/XvuYy4n.png)

## Tecnologias utilizadas
- ReactJS
- React Icons
- Styled Components
- Axios
- OpenWeatherMap API
- Unsplah API

## Como executar o projeto localmente
1. Clone o repositório
2. Instale as dependências do projeto
executando o comando:
```npm install``` ou ```yarn install```
3. Crie um arquivo .env na raiz do projeto e adicione a chave da API do OpenWeatherMap e da API do Unsplash. Você pode obter a chave da API do OpenWeatherMap [aqui](https://openweathermap.org/api) e a chave da API do Unsplash [aqui](https://unsplash.com/developers).
4. No arquivo .env adicione as seguintes variáveis de ambiente:
``` VITE_API_KEY=YOUR_OPENWEATHERMAP_API_KEY``` e
``` VITE_UNSPLASH_ACCESS_KEY=YOUR_UNSPLASH_ACCESS_KEY```
5. Execute o projeto executando o comando:
```npm run dev``` ou ```yarn dev```
6. Acesse a aplicação no seu navegador através do endereço:
```http://localhost:5173```

## Licença
Este projeto está sob a licença MIT. Para mais informações, acesse o arquivo [LICENSE](LICENSE.md).

## Autor
Desenvolvido por [Guilherme Henrique](https://github.com/guihsp)

### contatos

---

# About

ClimateView is a web application that allows you to view weather data from different cities around the world. The application was developed using the ReactJS library and the OpenWeatherMap API. To view the weather data of a city, simply enter the city name in the search field and click the search button or press the Enter key.

To access the application, [click here](https://climate-view.vercel.app) or copy and paste the link below into your browser:
``` https://climate-view.vercel.app ```

![imagem](https://imgur.com/XvuYy4n.png)

## Technologies used

- ReactJS
- React Icons
- Styled Components
- Axios
- OpenWeatherMap API
- Unsplah API

## How to run the project locally

1. Clone the repository
2. Install the project dependencies by running the command:
```npm install``` or ```yarn install```
3. Create a .env file at the root of the project and add the OpenWeatherMap API key and Unsplash API key. You can get the OpenWeatherMap API key [here](https://openweathermap.org/api) and the Unsplash API key [here](https://unsplash.com/developers).
4. In the .env file add the following environment variables
``` VITE_API_KEY=YOUR_OPENWEATHERMAP_API_KEY``` and
``` VITE_UNSPLASH_ACCESS_KEY=YOUR_UNSPLASH_ACCESS_KEY```
5. Run the project by running the command:
```npm run dev``` or ```yarn dev```
6. Access the application in your browser through the address:
```http://localhost:5173```

## License

This project is under the MIT license. For more information, access the file [LICENSE](LICENSE.md).

## Author

Developed by [Guilherme Henrique](https://github.com/guihsp)

### contacts