https://github.com/t4rm/weather_app

Weather Cast : Forecast, Meteo and more.
https://github.com/t4rm/weather_app

api axios axios-react css3 html5 json meteo react weather

Last synced: 9 days ago
JSON representation

Weather Cast : Forecast, Meteo and more.

• Host: GitHub
• URL: https://github.com/t4rm/weather_app
• Owner: t4rm
• License: mit
• Created: 2023-12-11T23:47:17.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2023-12-21T23:18:48.000Z (11 months ago)
• Last Synced: 2024-01-25T13:35:04.515Z (10 months ago)
• Topics: api, axios, axios-react, css3, html5, json, meteo, react, weather
• Language: JavaScript
• Homepage: https://weather.mechkenetarek.com
• Size: 19.9 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        



[![LinkedIn][linkedin-shield]](https://www.linkedin.com/in/tareek/)






  

    

  


Weather °Cast


  


    Weather, forecast and much more brought together in one app.

    


    Visit the website »

    


    


    View Demo

    ·

    Report Bug

    ·

    Request Feature

  



  Table of Contents

  


    


      About The Project

      


        
Built With

      

    

    


      Getting Started

      


        
Prerequisites

        
Installation

      

    

    
Usage

    
Contributing

    
License

    
Contact

    
Acknowledgments

  


## About The Project

[![Weather Cast Screen Shot][product-screenshot]](https://weather.mechkenetarek.com)

Get blazzing fast meteo, forecast (up to 14days) and details such as air quality and wind speed informations all in one page.

(back to top)


### Built With

* [![React][React.js]][React-url]

* [![ChartJs][Chart.js]][Chart.js-url]

* ![Html][Html5]

* ![Css][Css3]

(back to top)


## Getting Started

This is an example of how you may give instructions on setting up your project locally.

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

### Prerequisites

* npm

  ```sh

  npm install npm@latest -g

  ```

### Installation

1. Get a free trial API Key at [https://www.weatherapi.com/](https://www.weatherapi.com/)

2. Clone the repo

   ```sh

   git clone https://github.com/t4rm/weather_app.git

   ```

3. Install NPM packages

   ```sh

   npm install

   ```

4. Enter your API in `example.env` and rename it to `.env`

   ```js

   REACT_APP_KEY=your_api_key

   ```

5. Start the React project

   ```sh

   npm run start

   ```

   

(back to top)


## Usage

* Get actual weather by accepting the navigator to know your location

  

* Optionally enter an IP Address, ZIP Code (UK & US only), City, Country :

  

  ![image][search]

* Click the see more button to get the next 7 day of the forecast :

  ![image][seemore]

(back to top)


## Contributing

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

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

Don't forget to give the project a star! Thanks again!

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

(back to top)


## License

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

(back to top)


## Contact

Mechkene Tarek - [email protected]

Project Link: [https://github.com/t4rm/weather_app](https://github.com/t4rm/weather_app)

(back to top)


## Acknowledgments

* [Vladyslav Sharlovych](https://dribbble.com/shots/19266713-Weather-Forecast-Dashboard)

* [Yann Armelin](https://yqnn.github.io/svg-path-editor/)

(back to top)


[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555

[linkedin-url]: https://www.linkedin.com/in/tareek/

[product-screenshot]: public/assets/images/brand/screenshot.png

[Html5]: https://img.shields.io/badge/HTML-239120?style=for-the-badge&logo=html5&logoColor=white

[Css3]: https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white

[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB

[React-url]: https://reactjs.org/

[Chart.js]: https://img.shields.io/badge/chart.js-F5788D.svg?style=for-the-badge&logo=chart.js&logoColor=white

[Chart.js-url]: https://www.chartjs.org/

[seemore]: public/assets/readme/seemore.gif

[search]: public/assets/readme/search.png