https://github.com/ariyanmlzm/nextjs-starkregen

☁️ Full Stack Weather App created with next.js - SSR + CSR and Leaflet Map implementation.
https://github.com/ariyanmlzm/nextjs-starkregen

axios client-side-rendering leaflet-map next-api-routes nextjs react-query reactjs server-side-rendering tailwindcss typescript weather-app

Last synced: about 1 month ago
JSON representation

☁️ Full Stack Weather App created with next.js - SSR + CSR and Leaflet Map implementation.

• Host: GitHub
• URL: https://github.com/ariyanmlzm/nextjs-starkregen
• Owner: AriyanMLZM
• Created: 2025-03-14T07:34:16.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2025-04-23T19:09:35.000Z (about 1 month ago)
• Last Synced: 2025-04-23T20:22:57.228Z (about 1 month ago)
• Topics: axios, client-side-rendering, leaflet-map, next-api-routes, nextjs, react-query, reactjs, server-side-rendering, tailwindcss, typescript, weather-app
• Language: TypeScript
• Homepage: https://starkregen.vercel.app
• Size: 184 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Starkregen - 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

Copy the .env.local.example to .env.local and add your own values.

- WEATHERAPI_APIKEY: weatherapi.com api-key

- ENAPI: en/disable api  

  enable to fetch and use real data.  

  disable to use constant data.  

  values:

  - 0: disable

  - 1: enable

##

[![](https://i.postimg.cc/pTq6WPjr/card.png)](https://github.com/AriyanMLZM)