Weather App

Need to check the current weather in some city? Ok, I can help you!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• Table of Contents
• About The Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Contributing
• License
• Contact
• Acknowledgements

About The Project

WEB:

MOBILE:

This application allows a user to:

• Search informations about the weather of a given city, returning the following informations:
  • Current temperature;
  • Weather conditions;
  • Maximum and minimum temperature for the day;
  • Apparent/"Feels Like" temperature;
  • Wind speed;
  • Relative humidity;
  • Five days temperature forecast for the current city (4 days in mobile mode);
• Show the maximum and minimum temperature for the capitals in Brazil (due to the API's limitations only 4 capitals were listed).

Built With

Main libraries and CLI tools used to built the project:

• Axios
• Create react app
• Date-fns
• React
• React icons
• Styled components

To manage the code style and formatting:

• ESLint
• Prettier
• EditorConfig

Getting Started

To get a local copy up and running follow these steps.

Prerequisites

Install NodeJS v14:

• node

Install a package manager:

• yarn: Yarn 1.x (classic) was used in this project.

or

• npm

npm install npm@latest -g

Installation

1. Create an account and get a free API Key at https://www.weatherbit.io/

2. Clone the repository:

Using ssh:
git clone [email protected]:dzvid/desafio-frontend-1sti.git

Or using https:
git clone https://github.com/dzvid/desafio-frontend-1sti.git

3. Install the project dependencies:

cd desafio-frontend-1sti

yarn

or using npm:

cd desafio-frontend-1sti

npm install

4. Enter your API key in src/services/api.js file:

config.params.key = '';

PS: The current value in the code is for my free account. I dont have a problem exposing the API key because it uses the free service which is limited to 500 requests/day and is intended for hobby/testing purposes. If you want to build this using a paid API key, it is necessary to hide the API key value, one approach can be making the requests to the weather API through a backend service.

Also I have not used environment variables to store the API key because it is just a simple project (KISS principle).

5. You are done with configuration and ready to code! (I hope so 🎉).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

David Oliveira - [email protected]

Project Link: https://github.com/dzvid/desafio-frontend-1sti

Acknowledgements

• Best-README-Template
• Choose an Open Source License
• Img Shields
• Icons for free
• 1STI challenge description: If it is not accessible, theres a copy in the README.orig.md file.