StepZen Weather AI App

A Stepzen Weather AI App using the chatGPT API. Development in-process.

Check out a live demo.

Development:

• Next.js as package manager
• TypeScript - scalable, reliable web dev language
• React - web library
• StepZen is a GraphQL server with a unique architecture.
• Free Weather API
• Weather API Icons
• Tremor for stylized components
• Tailwind CSS

Getting Started

🔑

Create '.env' at the root of your project and include the following environment variables to your project:

• API_URL=
• NEXT_PUBLIC_STEPZEN_API_KEY=
• OPENAI_API_KEY=
• NODE_ENV=
• VERCEL_URL=

Frontend

First, install packages and run the development server:

yarn
yarn run dev

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

Backend

To run the backend server, run the following command in a seperate terminal.

start-stepzen

Open the localhost:5001 with your browser to see the result.

Walkthrough

The landing page will have an seletion for Country, (optionally State), and City.

Landing Page

Once the city of choice has been selected, the request is posted and the client will be directed to a page with the corresponding city weather information (e.g. example shown below). The information panel allows the client to change cities. The selected city displays the local time, sunruse, sunset, and collection of other metrics.

Desktop View & Responsive

This application is mobile responsive. The example is shown below.