Low and no-code AI tools like Lovable are popping up everywhere – but how well do they actually work? I’m an AI skeptic, and my assumption was “not very.” So I’ll admit I was impressed by what Lovable was able to do after only an hour of clicking around. In this article, I’ll walk you through how I built a searchable, real-time news aggregating app using Lovable, Supabase, and the Mediastack API.
Table of Contents
Key Takeaways:
- Lovable is a low/no code tool that allows you to build apps via an AI chat interface.
- Supabase is an open source backend as a service (BaaS) tool that integrates seamlessly with Lovable to provide serverless functions, PostgreSQL database instances, user authentication, and file storage.
- The Mediastack API is a searchable news API providing easy access to up-to-the-minute articles via REST endpoints.
- With Lovable, Supabase, and the Mediastack API, you can build a fully working news app that filters headlines by keyword, category, and region — all without writing code.
Prerequisites
This is a “no-code” tutorial, but I don’t think I would have been able to use these tools efficiently as a non-coder. You need a firm grasp of data flow and “what goes where” before you can start slotting the pieces together. You need to be aware that API keys should be stored as secrets, and what a serverless edge function is. You need to be able to tell the AI what you want, and in order to do that, you need to understand how things work.
Lovable does provide guidance – you can type questions into the interface as you go – but I imagine this would be painfully slow and rife with miscommunication (and hallucination?). Additionally, if you want to check the code spit out by the tool, you need to be able to read code (in this case Javascript.)
Step One: Get Started With the Mediastack API
The Mediastack API is a scalable JSON API that delivers global news, headlines, and blog articles in real time. It supports over 7500 news sources, and is accessible via a secure REST endpoint.
Signing Up
Mediastack offers a free tier allowing up to 100 requests per month, which is plenty to get started. Head to https://mediastack.com/signup/free to sign up for your free account.
Get Your Free
News Data API Key!
Join thousands of developers using Mediastack for Global News Data.
Get Your Free API Key!100 Requests Free!
Access Key
Once you’ve signed up, you’ll have access to your news feed API dashboard, where you’ll see your API access key, statistics on monthly usage, and links to documentation. Make a note of your access key (we’ll need it later), and take a look at the documentation for an overview of the endpoints.
Endpoint:
You don’t actually need any knowledge of the API’s endpoints in order to use it with Lovable. Because the documentation is available online, Lovable ingests and reads it for you. It makes decisions about which endpoints to hit and what query parameters to provide.
The Mediastack API has three endpoints: live news, historical news, and sources. For this tutorial, Lovable used the Live News endpoint.
The base URL for the endpoint is:
http://api.mediastack.com/v1/news
Test Request
Send a test request to the news API to get familiar with the response. The documentation page provides a “Run API Request” button for this:
The request is sent to the base URL, with your access key included as a query parameter. Additional parameters like keyword and country are optional to filter the response that is returned.
Click “Run API Request” and then “Pretty Print” in the top left corner of your browser (if it’s available) to view the API data:
The API returns pagination options, which allow us to load subsequent pages of results. Lovable uses these without needing to be prompted. The data array returns a list of news articles, filtered by whichever parameters were provided (in this case, the test request was looking for “tennis” articles in “us”, “gb” and “de”.)
Step Two: Get Started with Supabase
Supabase provides a free tier that has everything you need to build this app. Sign up for a free account at https://supabase.com/dashboard/sign-in using Github, SSO, or an email address.
Create an Organization and Project
You need to create an organization to hold your projects. This organization links to Lovable and allows Lovable to access any edge functions, databases, secrets etc. you set up in Supabase. Once you’ve created an organization, create and name your first project.
Store Your API Key
Supabase communicates with third-party APIs using edge functions. An edge function is a backend server call–something you might normally write inside a Node route handler. In order to use an edge function to call the Mediastack API, you need to provide your Mediastack API key.
Inside your Supabase project, open the Edge Functions tab from the sidebar on the left, and then open the Secrets page. Under “Add New Secrets” create a new key called MEDIASTACK_API_KEY and paste your Mediastack API key into the value field.
Supabase adheres to standard key-naming practices, and Lovable picks these up without issue.
Step Three: Get Started With Lovable
Sign up for a free Lovable account at https://lovable.dev/ or visit that page and type your first prompt into the chat interface to be prompted to sign up.
You’ll get a limited number of free credits per day to test the service with. The credits were just enough for me to get up and running with this app, after a couple of false starts. Every prompt you type in costs a portion of a credit, and if you run out of credits they reset at midnight.
Connect Supabase
Below the prompt input is a button to integrate Supabase. Once you’ve done that, the button turns into a dropdown, which you can open to choose the Supabase project you want to connect to. Connect the project you just created.
Type Your Prompt
The prompt I used to build this tutorial app was “build an app that uses the connected Supabase project to pull articles from the Mediastack API.”
I didn’t tell Lovable anything about the Mediastack API, or give it any direction on style or which endpoints to use. I was just curious to see what would happen. Lovable spent about twenty seconds thinking, then created all the frontend files, then connected to Supabase to create an edge function that called Mediastack, then rendered a preview of the app in the workspace.
Everything here, including the name “EdgePulse” was decided by Lovable. The news articles are real, and they are being pulled from Mediastack. Lovable also intuited that searchability would be desirable, and provided a search bar, as well as buttons below the search bar to filter by category. Lovable defaulted to pulling articles in English, from the US only.
Check the Results
Lovable provides a diff of the frontend code it generated. You can access this by clicking the small <code> button in the prompt sidebar once generation is complete. Checking the diffs reveals that Lovable opted to use React and Typescript for this build.
Checking the Mediastack usage statistics and Supabase logs verifies that the data displayed in the app is real, and is indeed being pulled from Mediastack. Here is the monthly API usage on my Mediastack dashboard:
And here are the logs from the Supabase edge function that Lovable created for me to hit the Mediastack API:
The edge function itself looks like this:
Preview the App
You can open a preview of the app in the browser by clicking the blue “Publish” button in the top right corner of the Lovable workspace, and then clicking the preview URL.
The app built by this prompt is a fairly simple but fully functional news feed that allows you to filter by category, search by keyword, and open the articles via links.
Here it is in action:
The functionality could be easily supplemented by prompting Lovable to create more edge functions – for example, to allow a user to save news articles. In this case, Lovable would use Supabase to spin up a Postgres database and write queries that would insert news articles into the relevant tables. Supabase can also handle user authentication, and I imagine this can be built via a prompt in the Lovable workspace too.
You could also have Lovable tweak the design, or upload files with branding for colors and fonts.
APILayer and Lovable: A Powerful Combination
This tutorial on how to build a no-code news API should have given you a basic understanding of how to use Lovable, Supabase, and the Mediastack API. From here, take a look at the Lovable documentation to learn how to deploy your app to production, or check out other APILayer APIs for developers.
FAQs
Do I need to know how to code to build this app?
You should understand how APIs work, what API keys are, and how to connect tools like Supabase. You don’t need to write JavaScript, but you do need some technical awareness.
Is Mediastack free to use?
Yes, it includes a free plan with 100 monthly requests — perfect for testing your app.
What does Supabase do in this setup?
Supabase stores your API key securely and runs the backend function that fetches the news data.
Can I deploy this app live?
Yes, Lovable lets you preview and publish your app to a live URL. You can also add more features like login or saved news.
What’s the benefit of using Lovable?
It helps you build real apps visually, without writing frontend or backend code. You can prompt it like ChatGPT and it creates the app for you.