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.
The website adjusts to any screen size, for a smooth and responsive experience.
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.
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
- Forecasts and weather Open Weather
- Geolocation based on text Geoapify
- Maps Windy
To run Mom Weather on your local machine or server, follow these steps:
- Open up your command line
- Clone this repository:
git clone https://github.com/DarlanSchwartz/Mom-Weather
- Navigate to the project directory:
cd Mom-Weather
- Install the required dependencies
npm install
⚠️ Important⚠️
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/
- Run the project
npm run dev
- Open https://localhost:5173/ ☑️
-
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.