WeatherApp - Started with Create Next.js 13, GraphQL, TailwindCSS, Tremore, Typescript and Stepzen

The weather application, developed using Next.js 13, GraphQL, TypeScript, Tremor, Stepzen, and Tailwind CSS, allows users to select a country and city to retrieve detailed weather information. It provides temperature, date, time, forecast, maximum and minimum temperature, UV index, wind speed, wind direction, chance of rain, and humidity levels. The application is designed to be responsive, ensuring optimal display and functionality across different devices and screen sizes.

This is a Next.js project bootstrapped with create-next-app.

How to create Next App

npx create-next-app@latest weather-app

How to clone this repo

git clone https://github.com/nikul6/weather-app.git

and then install node-modules

npm install

Sign up for StepZen: Go to the StepZen website and sign up for an account. Install the StepZen CLI: Install the StepZen command-line interface (CLI) by following the installation instructions provided in the StepZen documentation.

Getting Started

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

🚀 UI

You can watch the video here

📝 Notes

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Learn TailwindCSS: Docs
• Apollo Client: Docs
• Tremor: Docs
• React Select: npm
• Country-city-state API: npm

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.