Build a weather app with TailwindCSS

Today I built a weather app with a nice simple design. I am using an API from OpenWeather.

It was way easier than I thought.

Model

GPT-4 from OpenAI

Prompt

Let's build a gorgeous weather app ... it should be big and bold and rounded and and in your face with sexy font and nice edges and have somewhat Apple-y design. Does that make sense. we can use a framework like tailwind or something But I need you to code this up for me and help me use an API library from github or something else. Let's keep this very simple. It should display up toe 4 weathers at once... one in each qudrant of a webpage and on mobile it would be stacked vertically.

URL

https://weather-app-lovat-chi.vercel.app/

Building the app

• I gave it the initial prompt

• After that, I asked it to use TailwindCSS because I’ve used Tailwind and like it

• I asked for it to put the tiles in different quadrants

• Then I wanted the “hover” functionality and was easily able to add that

• After several iterations it finally got to what you see

• Overall it took less than 30 minutes

GitHub source code