Skip to content

🌦️This project is a web application built using React, providing users with the ability to search for and view the weather and current time for any city around the world. The application is fully responsive, ensuring a seamless experience across various devices and screen sizes.

License

Notifications You must be signed in to change notification settings

noodlespan/weather-widget

 
 

Repository files navigation

Weather React Application 🌡️🌩️🌤️


This project is a web application built using React, providing users with the ability to search for and view the weather and current time for any city around the world. The application is fully responsive, ensuring a seamless experience across various devices and screen sizes.

Key Features 🧭

  • Weather Information: Users can search for a specific city and retrieve real-time weather information, including temperature, humidity, wind speed, and weather conditions.

  • Time Zone Conversion: Along with weather data, the application also displays the current time for the selected city, adjusted to its respective time zone.

  • Search Functionality: The search feature allows users to quickly find the desired city by typing its name in the search bar. Autocomplete suggestions enhance user experience and accuracy.

  • Responsive Design: Utilizing React, the application offers full responsiveness, ensuring optimal display and functionality across desktops, tablets, and mobile devices.

react   typescript   Styled Component   Light/Dark mode   minimalistic   responsice   google api   react-router-dom loaders   react query

Demo 🎥

Check live demonstration here

Images of the application:

React Weather App React Weather App React Weather App React Weather App

Run Locally

You need API KEY for Google Place API and for Weather API (https://www.visualcrossing.com) Create .env.local file:

  • VITE_WEATHER_API_URL=https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/
  • VITE_WEATHER_API_KEY=XXX
  • VITE_GOOGLE_API_KEY=XXX

Run this command

  • git clone https://github.com/enikosoft/portfolio.git
  • npm install
  • npm run dev

You are now in the dev environment and you can play around

🌱 Contribution

If you have any suggestions on what to improve in Reactfolio and would like to share them, feel free to leave an issue or fork project to implement your own ideas

About

🌦️This project is a web application built using React, providing users with the ability to search for and view the weather and current time for any city around the world. The application is fully responsive, ensuring a seamless experience across various devices and screen sizes.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.8%
  • HTML 0.2%