Tutorial: how to create a web application with Lovable

Tutorial: how to create a web application with Lovable

Lovable promises to create complete web applications without writing a line of code. From frontend generation to deployment, database and AI, we tested the platform by building a quiz generator.

Among the platforms facilitating the creation of web applications, Lovable makes itself a place of choice for beginners, with its integrated vibe coding AI. Built-in generative AI can be used to generate the code, configure the architecture and deploy the project. It also offers a free plan with 5 credits per day and attractive prices.

No need to know code, Lovable turns natural language descriptions into a working app with React/Next.js and Tailwind CSS. It automates the creation and connection to a PostgreSQL database with user management. It codifies the interface by describing the desired changes, without writing CSS. She deploys the application quickly on Vercel or Netlify. And it makes it easy to connect to OpenAI, Stripe, or even Google Maps, by simply responding in the chat.

To better understand how to create an application on Lovable, we will set up an interactive quiz generator. To do this, we create an account on lovable.dev. Once logged in, we click on “Create new project”. We describe our application to AI, via the Lovable chat. Note that we can use AI like Gemini or ChatGPT to generate these prompts, by clearly specifying our request. It’s up to you to personalize the text according to what you want.

We write:

Crée une application web pour générer des quiz interactifs.
Fonctionnalités requises :
1. Page d'accueil avec deux options :
  - Coller du texte directement
  - Entrer une URL
2. Un bouton "Générer le quiz"
3. Page de quiz affichant :
  - Une question à la fois
  - 4 options de réponse (A, B, C, D)
  - Une barre de progression
  - Un bouton "Suivant"
4. Page de résultats affichant :
  - Le score final
  - Les bonnes réponses
  - Un bouton "Recommencer"
Design : Moderne, avec des couleurs bleu et orange, animations fluides.

For now, use mock (hardcoded) questions to test the interface.

After a few seconds, after various messages in the chat, which say for example “take inspiration from Typeform and Kahoot for the engaging aspect”, the application appears on the right of the interface.

We can now test the quiz, by pasting text into it or entering a URL. At this point we always get the same questions no matter what we enter. This is normal, this is what we asked previously. If something doesn’t work, describe the problem to the AI, which must quickly correct it.

Save the quiz

In order to keep the quiz in memory, we will add a database. Note that Lovable stands out through its native integration of Supabase, the open source alternative to Firebase. This allows the application to manage real-time data without arduous configuration. The system notably sets up the data tables. We write in the chat:

Ajoute une base de données Supabase pour sauvegarder les quiz.
Crée ces tables :
- quizzes (id, title, source_text, created_at, updated_at)
- questions (id, quiz_id, text, created_at)
- answers (id, question_id, text, is_correct, created_at)
Configure les relations :
- Une question appartient à un quiz
- Une réponse appartient à une question
Ajoute aussi les fonctions pour :
- Créer un quiz
- Récupérer un quiz avec ses questions et réponses

We authorize Lovable when requesting permissions. To verify that Lovable cloud is activated, we click at the top right on a cloud-shaped “Cloud” button. We go to “Enable” to turn it on. If the cloud is not activated, you can ask in chat: “Active lovable cloud”.

Make the quiz interactive

For Lovable to actually dynamically generate the quiz, we send it this, to customize according to your needs. With this prompt, Lovable must create a function and use Gemini 2.5 Flash to generate the questions, retrieve the content of the URLs when necessary, format the questions in JSON, save in Supabase and display the questions in the interface:

IMPORTANT : Je veux que l'application génère VRAIMENT les questions à partir du texte ou de l'URL que l'utilisateur fournit.
Actuellement, les questions sont fictives. Je veux les remplacer par une vraie génération avec l'IA.
Voici ce que tu dois faire :
1. Quand l'utilisateur soumet du texte :
  - Appelle l'IA pour générer les questions
  - Génère 5 questions à choix multiples
  - Pour chaque question, fournis 4 réponses dont 1 seule est correcte
  - Formate en JSON
2. Quand l'utilisateur soumet une URL :
  - Récupère le contenu de la page (avec fetch)
  - Envoie le contenu à l'IA
  - Génère les questions
3. Affiche les questions générées dans le quiz
4. Sauvegarde le quiz et les questions dans la base de données Supabase
Utilise Lovable Cloud (LOVABLE_API_KEY) pour générer les questions.
Ne demande pas ma clé OpenAI - utilise la clé Lovable intégrée.

We press “Allow” for “Modify database” for Lovable to create the tables, save the quizzes and analyze the data.

Text or URL to try

We are now testing actually generating a quiz from text or a URL. We include this URL in the appropriate place: https://www.journaldunet.com/seo/1547275-etude-le-nombre-d-avis-clients-explose-sur-les-fiches-d-etablissements-de-google/.

It works. The generated quiz has 5 questions linked to the URL, with a result displayed after the quiz.

We try with other texts or other URLs. Lovable tailors her questions well. If that doesn’t work, check that Lovable Cloud is enabled, reload the page and test again. Otherwise, use a text of at least 200 words on a clear subject. Also ask Lovable: “Generates simpler and more relevant questions”

Configuring public access

To set up public access to the quiz, we ask Lovable to verify the current RLS (Row Level Security). These are the rules that control who can see or modify data in the database.

Vérifiez les RLS (Row Level Security) actuelles.
Je veux que :
1. Les quiz soient PUBLICS (tout le monde peut les voir et les faire)
2. Les utilisateurs anonymes puissent faire le quiz SANS créer de compte
3. Les résultats peuvent être sauvegardés optionnellement avec un compte
4. Après le quiz, proposer : "Créer un compte pour sauvegarder ?"
Configurez les permissions Supabase pour l'accès public.

After performing the operation, we click “Allow” at the “Modify database” message that appears. Lovable then explains that “anonymous users can (now) take quizzes without an account, then optionally create an account to save their results.” If you still have any issues, don’t hesitate to ask Lovable for help in the chat.

Get and share the Quiz URL

After clicking on “Publish” at the top right of the GUI, we can publish the application, while taking care if possible to correct errors reported via chat. Lovable indeed offers a deployment solution directly on its platform.

You can configure the recipients. After that, Lovable displays our URL: https://quizzy-paste-url.lovable.app/. It should be possible to create interactive quizzes there. For broader needs, integration with Vercel or GitHub may be interesting.

These different assets should make it possible to avoid going through a developer. In some critical cases, however, it may be interesting to do so. For example, when you really can’t get the application to work or when you have advanced security, compliance, or ongoing maintenance needs. Concerning security, the platform advises in particular to avoid including confidential information in the frontend code and to carry out security checks before publication.

Jake Thompson
Jake Thompson
Growing up in Seattle, I've always been intrigued by the ever-evolving digital landscape and its impacts on our world. With a background in computer science and business from MIT, I've spent the last decade working with tech companies and writing about technological advancements. I'm passionate about uncovering how innovation and digitalization are reshaping industries, and I feel privileged to share these insights through MeshedSociety.com.

Leave a Comment