No-Code & AI Project: Build a Weather App

If you’re new to the world of programming and visual/no-code development, what’s a better way to learn than by building. 

In this blog post, we’ll walk you through the step by step process of building a Weather App complete with:

• Designing a UI, to
• Securely connecting to a Weather API.

Along the build, you’ll familiarize yourself with AI-powered no-code development tools and learn the best practices to build a secure application. 

Let’s get started:

Step 1: Creating a Free WeWeb Account

The first step is to create your WeWeb account.

WeWeb is a no-code web app builder with AI at its core. You can build applications using natural language prompts while retaining full control using the powerful visual editor.

To get started, head to weweb.io. Sign up and explore the visual application builder for free. 

Once your account is set up, you’ll land in your workspace. To start building your weather app, click on ‘+ Create project’.

On the next screen click on ‘Start a project with WeWeb AI’ and name your project ‘My Weather App’.

Step 2: Generating the App Design

To build your weather app, prompt the AI to generate the page layout.

WeWeb AI allows us to generate a fully responsive weather app interface with natural language prompts and image reference.

Since we'll be using the Weather API (a free API that provides real time weather data), it's important to specify this in our initial prompt so the AI structures the app accordingly.

Step 3: Setting Up the Search Logic

Once the AI generates the app design, the next step is to set up the search functionality. This will allow users to input a city and retrieve the city’s live weather data.

WeWeb AI suggests the required logic as a task in the task manager. 

Simply hover over the suggested task and execute it.

With a single click, the AI generates the workflow to fetch weather data based on the user’s input city.

To test this workflow, update your Weather API key in the API call action that it suggested to fetch the live weather.

Step 4: Securely Calling APIs with Supabase

With our weather API call set up, we need to ensure that our Weather API key remains secure. 

If we were to use raw JavaScript to make the API request, our API key would be exposed on the front end.

This means that any user could see it and potentially misuse it.

To secure our API keys, we need to make these calls from the Backend. We'll integrate Supabase (a low-code backend) and leverage its Edge Functions.

Connecting Supabase

Inside the WeWeb editor, navigate to the ‘Back-end’ tab and click on ‘Add Supabase’ to connect your account.

You can connect your existing Supabase account or simply sign up for a free account using your GitHub or Email credentials. 

Authorize WeWeb to grant the necessary permissions to access your Supabase account.

Back in WeWeb, you’ll notice that your account is connected. Create a new project and click on ‘Create Project. 

What Are Edge Functions?

Edge Functions allow you to securely make API calls to external services from the Supabase backend, preventing API keys from being exposed on the frontend

This ensures that our Weather API key is protected while still allowing users to retrieve weather data.

With Supabase integrated, we can simply prompt the AI to create an Edge Function that will handle the API call in the backend.

Step 5: Deploying the Edge Function

WeWeb AI leverages the Weather API to create an Edge Function in Supabase. It will prompt you to provide your Weather API key. Simply follow the step-by-step instructions to retrieve it.

Once you have the key, input it to the AI, and deploy the Edge Function with a single click.

Once deployed, the Edge Function securely handles API calls and fetches live weather data without publicly exposing your key.

Step 6: Updating the Search Workflow

Now that our secure API call is set up, we need to modify our search workflow to use the newly created Edge Function instead of making a direct API request.

Again, we can simply prompt the AI to update our workflow, and it will handle the necessary changes automatically. 

Final Thoughts

Great work! You’ve successfully built a secure, responsive weather app with WeWeb AI and Supabase. This is just the beginning.

With the flexibility of WeWeb AI and its powerful visual editor, you can easily:

• Modify the design to match your branding,
• Add custom animations or UI elements, and
• Extend functionality with additional features like forecasts, humidity, or wind speed.

The possibilities are endless. 

Master no-code development by exploring the WeWeb Academy and building a ticketing system from scratch.