SkyCast - Weather App

The weather app created with Next.js v15 using Weatherapi.

• Get Current Weather, Daily Forecast, Hourly Forecast and Air Quality
• Search location
• Select location on map

Techs

Next.js	React.js	Typescript
Tailwindcss	Framer Motion	Leaflet.js
React Query	Axios	React Icons

Features

• Implementing both server side and client side fetching data.
• Pre-rendering elements using next.js power and high SEO.
• Implementing customized map with Leaflet.
• Generating Dynamic Metadata based on the page.
• Using React Query power on client side fetching.
• Using Framer Motion for smooth animations and implementing withAnimation HOCs.
• Using Context Api for state management.
• Using Axios Instance for handling all the requests faster and better.
• Using Next Api Routes to handle client side requests safely.
• Using React Icons for flexible icons.

Usage

Environment Variables

• WEATHERAPI_APIKEY=your_api_key_here # (Create one at https://www.weatherapi.com/)

• Enable API to get real data or use the constants.

  • 1: true, 0: false
  • ENAPI=1 # set to 1 to enable API, 0 to use mock data