Building a Weather App with AI Tools – Part 1 – Bolt.new

Hello everybody. This is Jim from Austo
Digital and today we’re talking about AI
powered application development tools.
We’re going to go through a series where
we’re going to test multiple tools and
understand how these tools can be used
and how powerful they can be. We’ll do a
live demo and we’ll create a weather
application that uses a third party API.
We’ll look into the insights of the
strength and the weaknesses of each
tool. and we’ll work on some practical
takeaways for developers, startups, and
businesses. With this video, you’ll have
a chance to see how these tools work,
and we’ll give you insights so you can
take advantage of them if necessary.
When we look at each of these tools, we
want to take a look at why we’re doing
it. And application development using AI
can help accelerate your development
team, code generation. It helps also to
reduce the time to market, quick
iterations, testing of new ideas.
Another thing we’ve noticed is that it
can enhance efficiencies, things like
optimization, performance, and even
streamlining workflows. And lastly, what
we’re seeing a lot of at Austo is rapid
prototyping, allowing you to take a
business idea very quickly to the
market. So, as we do this test and we do
these evaluations, we’re going to walk
through each tool. We’ll do a comparison
on these five things. ease of use around
the tool, speed and performance, how
quickly can we build something, and
what’s the performance of that
application as it comes out, what are
the features involved with each system,
the overall quality, how well it created
an application, the tech stack involved
with that, and the cost. So, with that
said, let’s start with our first
product. It is
bolt.new. And here’s the sites,
bolt.new. Um, before we start, we should
probably look at the app we’re going to
build. For each one of these systems,
we’re going to build a weather
application. And the goal of this
application is to build responsive
weather application. We’re going to name
it the Austo AI demo weather app. It’ll
work both on mobile and desktops. The
prompt that we’re going to use to build
it, and again, these tools are using
prompts. They’re using words. We’re
telling it what we want, and it’s going
to generate the code for us. So, here’s
our prompt. We’ll be creating a
responsive app called the Austo AI demo
weather app. It will work on a desktop
and mobile. Um the features, it will
display a form with two fields. It’ll
have an input field of your name and
it’ll have a field to put in your zip
code. Above that, we’d like the words
enter your name and zip code to get the
current weather. And then we’re going to
ask the application to try and use the
browser’s geoloccation which is built
into your browser or your operating
system as well as if we’re on mobile to
use the location that’s on your mobile
app device. Um if it’s unavailable to
get those two things in my case I turn
that off on my browser. It’s going to
fall back using the zip code. Um in the
app we’re going to use the open weather
API to retrieve the data. And I’ve given
it some guidelines around that. I want
it to look up the latitude and longitude
and then after that to get the data and
the information. Once we enter in your
name and a zip code, the weather we want
to display, it’s going to show a welcome
message saying, “Hey, welcome the name.”
And then display the current weather.
And I’m leaving this pretty vague. I
want the system to come back with what
it can find from the API and give us all
the options. And then lastly, I’d like
the background to be dynamic. So, if
they put in the zip code where it’s
raining or it’s sunny, I’d like to see
the corresponding weather in the
background image of the page. I’ll give
it some notes. I’d like the application
to be responsive again and mobile
friendly. I’d like it to be a clean and
a modern UI and I’d like the system to
choose the best technologies. I’m not
going into this saying I want a specific
framework. In most systems, you can, but
I’d like to see what comes out as we do
these demos. And I’ve given it some
additional requirements if possible. I’d
like it to be deployable to Cloudflare.
Um, I’ll add that at the very end. It’s
not necessary, but it is a nice feature
that we can use a third-party hosting
solution. So, we’ll move on to Bolt.
Bolt
new is a pretty popular AI development
tool. Um, I currently have an account.
You can see here I’m signed in as the
personal plan. Um, most of the systems
will be very similar. What do you want
to build today? And we’ll put our prompt
right in here. So, I’m going to paste
that prompt in there. But you also can
see I could have uploaded an image. I
could have worked with their enhanced
prompt. It would ask me more questions.
Down here you can see I can import from
Figma. And there’s a lot of different
technologies that are involved as well.
So let’s go ahead and just work with
this basic premise of we want to build a
mobile app. Notice I didn’t add much
technology knowledge to this. I’m really
going at it as like a business user
would. So as Bolt builds out the system,
you’re going to see it has two options
here. One is for code. So, it’s actually
generating the code as we go along. And
then two, it’s going to give us a
preview as we move through it. On the
left hand side, let’s go back and see
what it did. It told me the goal I put
in. And then further down, it’s going to
start the process of creating a modern
weather application. It’s going to be
using the technology of Expo and React
Native, which is great because both of
those can be used both on the web and
when I want to build this into a mobile
application. So these tools are going to
work in a sense where behind the scenes
they’re going through the request I
made, the prompt I made, and it’s going
to find the correct way to build the
application. So let’s watch as it goes.
It’ll come back and give me some
feedback. Um, let’s quickly take a look
at some of this feedback. Said I’ve
created a modern responsive application.
It will work with with the web and
mobile. It’s using Expo and React
Native. It’s going to have a form. It’s
going to regurgitate what I asked it
for. It’s going to use geoloccation. Um,
it’s going to show the weather and then
it’s going to have a dynamic background.
It’ll be responsive. It’ll they also
took the time to add error handling.
It’s going to validate the input forms.
I’m assuming that means the zip code
will be numbers and the name will be
characters. It’s going to handle any
errors that come up and it’s going to
show any states like loading or what
it’s doing. Now, down here gave me some
instructions. Replace the open weather
API key in this file, this index.tx tx
with your API key, which I’ll go do here
in a second. The app will automatically
request your location, and if not, it’ll
go back. They also made it so I could
deploy it, which is great. It has a
build script. And you can see over here
that if I wanted to use this on my
mobile app with Expo, I just need to
scan this QR code. So, really quick, I’m
just going to take a screenshot of this
and save it so we can come back to that
later. So, I’m going to click on
preview. And there’s this option that’s
got uh let’s see, I should be able to
get out of this. There we go. I’m going
to close this. And here’s the preview of
the app really quick. You know, like a
browser would be. And you’ll notice in
Bolt, I can also take a look at it. What
does it look like on a mobile device?
So, it is responsive really quick. You
can see that um this is what it looks
like on an iPhone 16. Maybe there’s a
Pixel 9. And that’s what it looks like
on a regular device. So, before we
start, I need to go and take a look at
the code.
The one non or the one technical thing
here is I need to replace this with my
API key. So I need to go find the folder
called
app. In addition to that, I need to find
the file now called index.tx. Here we
go. And it’s asking me to replace right
here. Replace it with my API key, which
I’ll do here in a second. Right, I’m
back. I’ve placed the API key in there.
I’ve hit the save button, added the save
button, and I’m going to go ahead and
tell it that I’ve just the instructions
that I have added the API key.
Um, it’s going to go ahead and do what’s
called an npm rundev. It’s going to
recompile it. So, I now have that. So,
let’s see what we get. This is the first
run. So far, we’ve given it our initial
prompt. I put an API key in. Um, I’ll
put in a name and let’s put in my zip
code
here. All right. It says invalid zip
code. So, there’s a couple things that
can happen. Let’s determine what that
means. Since I don’t have any error
handling, let’s tell the system what I’m
getting back. Um, when I enter the
screen with a zip
code, I get the error. Invalid zip code.
So, let’s see if Bolt can troubleshoot
what’s going
on. Let’s see. Let me help you fix the
code. Air handling. Let’s update the
index the file to properly handle the
API response and see what
happens. All right, now that it’s
recompiled, let’s do a gym. Let’s do my
zip
code. Let’s see what we get this time.
All right, you can see really quick that
it came back. Said, Jim, here’s your
weather. It’s 33°. It’s got scattered
clouds and it feels like 27 degrees
Fahrenheit. Now, I know that the API
brings back more information. So, let’s
ask Bolt, please add more weather
information on the weather page. Um, can
you add the he um the feels like and any
other things like wind speed? Let’s just
see if we can get this information back.
Now, remember, I started very vague,
asking it to provide some information
about the weather. It did that. It took
the zip code to give me the nice
background to match it. Um, but now I’m
asking it for more information. Let’s
see what it finds. Now, if I were to go
look at the API, I’m sure I could give
it specific information, but uh I’m just
asking more along the tone of a
conversation to see what the system can
do. When it does come back and gets done
building, let’s try a couple things.
We’ll try a different zip code. We’ll
try error handling. We’ll put an invalid
zip code in there. Maybe more than uh
five characters as well as see what it
does with the
results. We’re still waiting for it. Um
I do like the fact that it came back by
saying it’s going to add more weather
information like details like wind
speed, pressure, and other relevant
information. So, let’s go try this
again. We’re going to do gym. And I’m
going to pick another zip code.
90210. Let’s see the results. Welcome,
Jim. Here’s a weather. And it says the
uh city that we’re located in. It’s 70°.
It feels like 69. The wind is 7 mph.
It’s got a visibility. It’s got some
pressure information, humidity, and it
looks like it also brought back the
sunrise and the sunset with the high and
the low. That’s pretty good for not
having um given it much more
information. I like it. And then let’s
do an invalid zip code. Let’s just put
two nines. And you can say, so it does
have air handling on it. It knew that
that wasn’t a valid zip code. I think
that this is a valid zip code. Nope, it
does not one. So let’s use my own
again. And lastly, we’ve got ourselves
an app. And again, it works well on
mobile, right? So it looks pretty
responsive for me. So really quickly
with the limited prompt, we’ve built
ourselves the weather application. Um as
well as Bolt has given me the
opportunity to make this mobile. Um so
let’s talk about some of the things
around cost performance and what we’ve
learned. So let’s talk about
performance. I’ve been using this app
for
roughly 8 minutes and we have a fully
working application that we could
deploy. So in terms of speed
performance, that’s pretty good. We did
have one issue about the API key. I had
to tell it that um we we needed to work
out to make that work. But overall that
was pretty straightforward and Bolt
helped me do that through that system.
Let’s go quickly to some of the features
of Bolt. One is you can connect it to a
database called Superbase. Superbase is
a Postgress database that’s online. Very
powerful. It has many features similar
to Firebase. Um really great to talk to
it in a context of a prompt. Um, as well
as Bolt will let me deploy this. So,
let’s just deploy it to the web really
quick. Um, this will go out to a tool
that they have called Netlefi. And, uh,
when it’s done, it will give me a
website URL. I can share that to anybody
and my application is now live. Now,
remember, we’re using a third-party API
with the weather data. It could be any
thirdparty API, but I can deploy this
and start using it right away. Um, I
will click on that here once it’s built.
So it built and it told me two things.
One is I can use Expo to open this in on
a mobile device like iOS or Expo Go or
Android. And additionally, it says your
site has been deployed over here to this
URL. I’m going to bring up the URL. And
you can see I’m going to try and allow
the location. It doesn’t work. Let me go
put my name in here,
Jim. And there we go. Oops. It works.
It’s got its own URL. It’s live on the
web. We have deployed a
application. Here’s my app. So on a
mobile device when I deploy this mobile
app, here’s what it will look like. So
Jim, we’ll do
90210. There we go. Let’s get the
weather. And you can see, hey Jim,
here’s your weather in San Diego. It’s
currently sunny and we’ve got a little
bit of wind and the sunrise sunset. So,
Bolt has got an opportunity here to not
only build a web responsive web app that
we deployed to the web, but also a
mobile app. I will follow up. If you
have questions, please leave so in the
chat. Um, if you have questions for me,
feel free to email me. But thank you for
this. We’ll be following up with the
next AI tool.