Skip to content

WeatherMan - Check weather details upto the next 5 days, switch from celsius to fahrenheit, uses geocoding feature of browser to fetch current location's weather details.

Notifications You must be signed in to change notification settings

arghadeep23/weather_app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 

Repository files navigation

WeatherMan

Welcome to WeatherMan, your go-to web application for checking the weather forecast! With WeatherMan, users can effortlessly retrieve the current weather conditions and forecast for any location worldwide. Whether you're planning a trip, checking the weather before heading out, or simply curious about the forecast, WeatherMan has got you covered.

image

Features

  • Weather Forecast: Get the current weather conditions including temperature, wind speed, pressure, humidity, and visibility for any location.

  • 5-Day Forecast: View the forecast for the next 5 days to plan ahead. image

  • Location-based Weather: Utilize the geolocation feature of your browser to automatically fetch the weather for your current coordinates. image

  • Temperature Conversion: Switch between Celsius and Fahrenheit based on your preference. image

-Responsive for all devices : Desktop, Tablets, Phones
Tablets/Ipad :

Phones :

Technologies Used

  • Frontend:

    • React
    • Vite
    • SASS/SCSS
    • HTML
  • Backend:

    • Node.js
    • Express.js
    • OpenWeatherMap API

Deployment

  • Frontend: The frontend of WeatherMan is deployed on Vercel, ensuring fast and reliable access to users.
    Link : https://weather-app-self-alpha.vercel.app/
  • Backend: The backend is deployed on Render, providing a robust and scalable infrastructure to handle weather data requests.

How to Use

  1. Enter Location: Simply enter the name of the location you want to check the weather for in the provided input field.
  2. View Weather: WeatherMan will fetch the current weather conditions and display them along with the forecast.
  3. Location-based Weather: Click on the option to fetch weather based on your current coordinates.
  4. Temperature Conversion: Toggle between Celsius and Fahrenheit to view the temperature in your preferred metric.
  5. Note: Since I am using a free account of Render, the backend can take time to load/reload due to inactivity. So sometimes, users may need to "double-click" the search icon to properly search for the location. However, it only happens for the first time and ceases after that.

Getting Started

To run WeatherMan locally, follow these steps:

  1. Clone this repository.
  2. Navigate to the project directory.
  3. Go to the Frontend folder and then run npm install
  4. Go to the Backend folder and then run npm install
  5. Run the frontend and backend servers:
    • For the frontend: npm run dev
    • For the backend: npm start
  6. Access WeatherMan in your browser at http://localhost:3000.

Created By

  • Arghadeep Dey

Feedback

If you have any feedback, suggestions, or issues with WeatherMan, please feel free to mail me at deyarghadeep23@gmail.com. Your input is valuable in improving this app!

Enjoy using WeatherMan for all your weather needs! 🌤️

About

WeatherMan - Check weather details upto the next 5 days, switch from celsius to fahrenheit, uses geocoding feature of browser to fetch current location's weather details.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published