Skip to content

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.

Notifications You must be signed in to change notification settings

DarlanSchwartz/Mom-Weather

Repository files navigation

🌦️ 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


🔖 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:

📑 API's Used

🔧 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
  1. Navigate to the project directory:
cd Mom-Weather
  1. Install the required dependencies
npm install
  1. ⚠️ Important ⚠️

Get your API keys from the following websites:

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/
  1. Run the project
npm run dev
  1. 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.

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published