📗 Table of Contents

• 📗 Table of Contents
• 📖 Weather Data
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
  • 💻 Getting Started
    • Prerequisites
    • Setup
    • Install
    • Usage
    • Run tests
    • Deployment
  • 👥 Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgments
  • 📝 License

📖 Weather Data

This is my Microverse React/Redux Capstone Weather Data site, created with React + Vite, React Router, Redux and CSS.

The App has the functionality to fetch location results based on the typed in search word, and after location selection to provide statistical information of the weather from the previous 14 days.

The App comes with 14 preselected popular locations to choose from.

It uses 2 different APIs, for the location results it uses: Geocoding API And for the historical data: Visual Crossing Weather API

Both sites require registration to acquire the API key.

🛠 Built With

Tech Stack

React + Vite

React Router

Redux

Redux Toolkit

CSS

GitFlow

Key Features

• React + Vite
• React Router
• Redux Toolkit
• GitFlow

(back to top)

🚀 Live Demo

• Live Demo Link

• Video

(back to top)

💻 Getting Started

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

Prerequisites

In order to run this project you need:

• Code editor
• Node
• To register for both API providers to get the personal API Key
• Store the keys in the root folder of the project inside the .env files using this exact format:

  VITE_API_KEY_GEO='Your [Geocoding API](https://openweathermap.org/api/geocoding-api) API'
  VITE_API_KEY_WEATHER='Your [Visual Crossing Weather API](https://www.visualcrossing.com/resources/documentation/weather-api/timeline-weather-api/) API'

Setup

Clone this repository to your desired folder by opening the terminal and running the following command:

  git clone [email protected]:hajnaloltyan/weather-data.git

Install

Install this project with:

  npm install

Usage

To run the project use the following command:

  npm run dev

Run tests

To run tests, run the following commands:

For CSS linter errors:

  npx stylelint "**/*.{css,scss}"

For ESLint linter errors:

  npx eslint "**/*.{js,jsx}"

Deployment

Deployed by GitHub Pages with command:

  npx run deploy

(back to top)

👥 Authors

👤 Hajnalka Oltyan

• GitHub: @hajnaloltyan
• LinkedIn: Hajnal Oltyan

(back to top)

🔭 Future Features

• To offer options for setting the dates
• Add more charts and data

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

(back to top)

⭐️ Show your support

If you like this project please leave a star and a comment.

(back to top)

🙏 Acknowledgments

Original design idea by Nelson Sakwa on Behance.

I would like to thank Microverse to have this opportunity.

(back to top)

📝 License

This project is MIT licensed.

(back to top)