https://github.com/ragini-pandey/graphql-weather-app
Next.js weather dashboard powered by GraphQL, Apollo Client, Tremor charts and TailwindCSS
https://github.com/ragini-pandey/graphql-weather-app
appolo-client graphql nextjs stepzen tailwindcss typescript
Last synced: about 1 month ago
JSON representation
Next.js weather dashboard powered by GraphQL, Apollo Client, Tremor charts and TailwindCSS
- Host: GitHub
- URL: https://github.com/ragini-pandey/graphql-weather-app
- Owner: ragini-pandey
- Created: 2025-09-29T11:59:43.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-09-29T12:46:33.000Z (9 months ago)
- Last Synced: 2025-09-29T14:28:59.565Z (9 months ago)
- Topics: appolo-client, graphql, nextjs, stepzen, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://graphql-weather-app.vercel.app
- Size: 1010 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GraphQL Weather App 🌤️
An **interactive weather app** built with **Next.js**, **TypeScript**, **GraphQL**, and **StepZen** — delivering **real-time weather data** through seamless **GraphQL queries**.
The app features a **modern, responsive dashboard** powered by **Apollo Client**, **Tremor charts**, and **Tailwind CSS**, providing a clean and insightful visualization of live weather metrics.
## 🖼️ Screenshots
------------------------------------------------------------
## 🧭 Table of Contents
- Features
- Tech Stack
- Project Structure
- Getting Started
- Prerequisites
- Environment Variables
- Installation & Running
- GraphQL Schema & Queries
- Key Modules & Architecture
- Scripts
------------------------------------------------------------
## 🔍 Features
- Fetch current weather for a given location
- Use GraphQL API (via StepZen) to query weather data
- Search by city name
- Display temperature, humidity, wind, etc.
- Clean, responsive UI
------------------------------------------------------------
## 🧱 Tech Stack
- Next.js (with TypeScript)
- React + hooks
- GraphQL / StepZen
- Apollo Client (or GraphQL client)
- Styling: Tailwind CSS
- API key management via environment variables
------------------------------------------------------------
## 📁 Project Structure
```
.
├── app/ # Next.js app route components
├── components/ # UI components
├── graphql/ # GraphQL queries / schema
├── lib/ # Helper utilities (API client)
├── public/ # Static assets
├── stepzen/ # StepZen config / endpoint setup
├── .eslintrc.json
├── next.config.js
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── README.md
```
------------------------------------------------------------
## 🚀 Getting Started
### Prerequisites
- Node.js (v14+)
- A host or test account for StepZen (or GraphQL endpoint)
- Weather API key (e.g. OpenWeatherMap, etc.)
### Environment Variables
Create a `.env.local` file in the project root:
```env
OPENAI_API_KEY=your_openai_api_key
API_URL=your_stepzen_endpoint_url
NEXT_PUBLIC_STEPZEN_API_KEY=your_stepzen_api_key
```
### Installation & Running
```bash
# Install dependencies
npm install
# Start development server
npm run dev
# Open http://localhost:3000
# Build & run production
npm run build && npm start
```
------------------------------------------------------------
## 🔎 GraphQL Schema & Queries
- The GraphQL schema defines a `Weather` query (or similar) to fetch weather data
- Queries take location (city name, coordinates) as arguments
- Returns fields like: temperature, humidity, windSpeed, weatherDescription
You can inspect the GraphQL playground at your StepZen endpoint for more details.
------------------------------------------------------------
## 🧩 Key Modules & Architecture
- lib/apollo-client.ts — sets up GraphQL client with endpoint & auth
- graphql/queries — GraphQL query files (e.g. GET_WEATHER.gql)
- components/WeatherCard — displays weather details
- app/page.tsx — UI for search & display
- State & UI logic handled via React hooks
------------------------------------------------------------
## 🧪 Scripts
| Script | Description |
|--------|--------------------------|
| dev | Start dev server |
| build | Build for production |
| start | Run production server |
| lint | Run ESLint |
------------------------------------------------------------