cover
icon

Weather Forecast

🔨
Projects
/
icon
Weather Forecast
summary

Real-time weather forecasting for every location. Current weather, hourly weather throughout the day.

tech stack
Next JS
React
TypeScript
Html
Tailwind CSS
Weather api
published date
last edited time
website link
https://nextforecast.vercel.app
github link
https://github.com/Sujal-Vanjare/weather-forecasat-type-script
thumbnail

Front End

Front end done with Next Js 14.2 app router

Back End

Weather data provided by weatherforecast.api it's a free api

Features

  • Real-time, accurate weather conditions and forecast.
  • Beautiful, clean UI and UX design fully responsive for all devices with dark and light themes.
Image
Image

Dynamic Route Rendering

  • Data Fetching: Data is fetched on-demand.
  • Page Generation: Pages are dynamically generated based on the fetched data.
  • Metadata: Includes metadata like page title and description integrated with each route.

Error Handling

  • 404 Page: If the city doesn't exist in the weather API, a 404 error page is displayed.
  • Action: Users can click on a "Go Back to Home" button to return to the home page.

This ensures that users are informed when attempting to access weather information for a non-existent city and provides an easy way to navigate back to the main page.

Image
Image

Clean Search Bar Design with Quick Access

  • Quick Access: Press "/" to activate the search bar.
  • City Recommendations: Type the first 3 letters of a city to get suggestions.
  • Easy Navigation:
  • Press Enter to select the first suggestion.
  • Click on any suggestion to go to that city's page.

Loading Shimmer

When fetching weather data in real-time:

  • A loading skeleton will be displayed.
  • A loading top bar will be shown.

This feature done with Next js loading.tsx file

Image
Image

Weather Data Display

The weather forecast section will show:

  • City Information: The city, state, and country.
  • Current Time and Date: The current time and date.
  • Temperature: Temperature in Celsius and Fahrenheit.
  • Condition: Weather condition in bold.
  • Feels Like Temperature: 'Feels like' temperature in Celsius and Fahrenheit.
  • Last Updated: Time and date when the weather data was last updated.

Sun and Moon Section

  • Sunrise Time: The time when sunrise happens.
  • Sunset Time: The time when sunset happens.
  • Total Daylight Time: Duration from sunrise to sunset.
  • Moonrise Time: The time when moonrise happens.
  • Moonset Time: The time when moonset happens.
  • Total Moonlight Time: Duration from moonrise to moonset.
  • Moon Phase: The moon phase for the day
Image
Image

Additional Weather Details

  • Day or Night: Indicates whether it is currently day or night.
  • Humidity: Humidity percentage.
  • Cloud Coverage: Cloud percentage.
  • Wind Speed: Speed in km/hr and miles/hr.
  • Wind Direction:
  • Direction in words and degrees.
  • Arrow representation facing the wind direction.
Image

Forecast for that day

  • Temperature: Min, Max, and Avg in Celsius and Fahrenheit.
  • Wind Speed: Max wind speed.
  • Humidity: Average humidity.
  • Visibility: Visibility range.
  • Precipitation:
  • Will it rain today? (Yes/No)
  • Will it snow today? (Yes/No)
  • Chances of rain (%)
  • Chances of snow (%)
  • Weather Conditions: Description in text.
Image

Hourly Forecast

For 24 hours of the day, there will be 24 small cards shown in a vertical line:

  • Weather Condition: Description in text and corresponding icon.
  • Temperature: Temperature for that hour.
  • Humidity: Humidity percentage.
  • Wind Speed and Direction: Icon representation of wind speed and direction.
  • Time: Hourly time.

Upon loading the page, the current time card will be centered and highlighted to indicate the current hour.

Lighthouse Score

PageSpeed Insights

📌

What I Learned in This Project

  • Integrated a third-party API for weather data.
  • Implemented on-demand real-time data rendering.
  • Used loading shimmer and skeleton techniques.
  • Developed proficiency in Tailwind CSS for frontend design.