darlanschwartz/mom-weather

By simply entering the name of a city, users can access comprehensive weather information, including the current temperature, maximum and minimum temperatures, temperature map, and a forecast for the upcoming days.

🌦️ Mom Weather

Mom Weather is a front-end web application designed to alleviate the stress of dressing appropriately for any given location. By simply entering the name of a city, users can access comprehensive weather information, including the current temperature, maximum and minimum temperatures, temperature map, and a forecast for the upcoming days.

🚀 Demo

Link to demo

🔖 Previews

The website adjusts to any screen size, for a smooth and responsive experience.

💻 Desktop

📰 Tablet

📱 Mobile

✨ Effects and Dark Mode 🌓

This project has two hand crafted effects/animations, one for rain and another for snow. Additionally, as you may have already observed, it offers a dark mode for an enhanced user experience.

• 💦 Rain

• ❄️ Snow

💻 Tech Used

For this project i used:

• Framework React v.18.2.0
• Tool Vite
• Language Typescript
• CSS Styles styled-components
• Responsivity @uidotdev/usehooks
• Animations animate.css
• Icons react-icons
• API Calls react-query
• Routing react-router-dom
• Graph recharts
• Notification pop-ups sweetalert2
• HTTP Requests axios

📑 API's Used

• Forecasts and weather Open Weather
• Geolocation based on text Geoapify
• Maps Windy

🔧 Installation and Running

To run Mom Weather on your local machine or server, follow these steps:

• Open up your command line

1. Clone this repository:

git clone https://github.com/DarlanSchwartz/Mom-Weather

2. Navigate to the project directory:

cd Mom-Weather

3. Install the required dependencies

npm install

4. ⚠️ Important ⚠️

Get your API keys from the following websites:

• Open Weather
• Geoapify

Then

Create a .env file the the root folder and fill the variables with your API keys, follow this .env.example file for examples

VITE_WEATHER_API_KEY=your_open_weather_api_key_here
VITE_GEOCODE_API_KEY=your_geoapify_api_key_here
VITE_GEOCODE_API_LINK=https://www.geoapify.com/
VITE_WEATHER_API_LINK=https://openweathermap.org/
VITE_MIN_TEMP_TO_FREEZE=minimum_temperature_to_wear_a_jacket_here => 17
VITE_MAP_API_LINK=https://www.windy.com/

5. Run the project

npm run dev

6. Open http://localhost:5173/ ☑️

🏁 Additional Information

• Explore this project future plans and ongoing improvements through the Roadmap/Todo file.
  This document outlines upcoming updates and enhancements that will be implemented over time. The todo file was conveniently created using this Todo List extension for Visual Studio Code.

• Thanks to ezgif for providing the gif editor to make the preview images of this readme file more appealing.