Weather App
This project is made to provide real time weather forecast to users.
Tools:
React.js
Short Explanation
The weather app provides real-time, location-based updates with accurate forecasts and conditions, helping users plan their day effectively.
Tech Stack Used
- React.js: A frontend library used to build dynamic user interfaces, manage state, and render components efficiently.
- Tailwind CSS: A utility-first CSS framework for creating responsive designs without writing custom CSS.
- Luxon: A modern JavaScript library for handling dates and times with built-in timezone and formatting support.
- React Toastify: A lightweight library for displaying elegant, customizable toast notifications.
- OpenWeatherMap API: A free API that delivers current, hourly, and forecasted weather data for any location.
Image Preview
A quick look at some UI shots from the project:
The Problems and How I Deal With It
- Timezone bug fixed: Forecasts for cities like Nagpur, Berlin etc showed wrong local times due to a misused API offset. I applied the correct dt + timezone offset, used Luxon for formatting, and tested across multiple zones/DST. Now all forecast timestamps accurately match each city's local time.
Lessons Learned
- Learned how to debug API data mismatches by combining documentation review with real-world testing across multiple cities.
- Improved skills in integrating third-party APIs (OpenWeatherMap) and transforming raw data into user-friendly formats.
- Gained hands-on experience in enhancing user experience with responsive design (Tailwind) and toast notifications (React Toastify).