ما هو Lovable؟

تخيّل أنك تتحدّث إلى «مهندس برمجيات» لا يكلّ ولا يملّ، تصف له ما تريد بلغتك العادية، فيبني لك التطبيق كاملاً أمام عينيك في دقائق. هذا هو Lovable باختصار.

🎥درس فيديو (عربي)Loai Khalidi

▶

شرح Lovable من الصفر وكيفية استخدامه مجانًا (2026) — يطابق محتوى هذه الوحدة · شاهد على يوتيوب ↗

Lovable (الموقع: lovable.dev) هو منصة ذكاء اصطناعي لبناء التطبيقات الكاملة (Full‑stack). أنت تكتب وصفاً بالكلام الطبيعي — بالعربية أو الإنجليزية — والمنصة تُولّد لك كوداً حقيقياً قابلاً للتعديل والامتلاك، ثم تنشره مباشرة على الإنترنت.

بدأ المشروع باسم «GPT Engineer» مفتوح المصدر وحظي بعشرات الآلاف من النجوم على GitHub، ثم أُطلِقت النسخة التجارية باسم Lovable (أواخر 2024)، وتصدّرت Product Hunt، وحقّقت نموّاً سريعاً جداً ووصلت إلى تقييمٍ بمليارات الدولارات بدعم من كبار المستثمرين. أي أنّ هذا ليس مشروعاً جانبياً — بل أصبح منصّةً يعتمد عليها ملايين المستخدمين حول العالم. (للأرقام المحدّثة راجع lovable.dev.)

لماذا «Full‑stack» مهمة جداً؟

أي تطبيق حقيقي يتكوّن من طبقتين: الواجهة الأمامية (Frontend) وهي ما يراه المستخدم، والخلفية (Backend) وهي العقل الذي يخزّن البيانات ويدير الحسابات والمنطق. كثير من الأدوات تبني الواجهة فقط فتحصل على «صورة جميلة لا تعمل». أما Lovable فيبني الطبقتين معاً:

Lovable ليس أداة «No‑Code» تقليدية

الأدوات التقليدية تخفي الكود خلف «مكعّبات» تسحبها وتُفلتها، وتظلّ سجيناً داخل المنصة. أما Lovable فهجين ذكي:

متى تستخدم Lovable… ومتى لا؟

كيف يعمل المحرّك؟

قبل أن تكتب أوّل Prompt، افهم ما يحدث «خلف الستار». فهمك لطريقة تفكير Lovable هو الفرق بين نتائج مذهلة وإحباط متكرّر.

دورة العمل الأساسية (الحلقة السحرية)

كل ما تفعله في Lovable يدور في حلقة بسيطة من أربع خطوات تتكرّر باستمرار:

الذكاء الاصطناعي ليس «منفّذ أوامر»… بل شريك

منذ تحديث 2.0 (منتصف 2025) أصبح Lovable يعمل بنمط «الوكيل المستقل» (Agent) افتراضياً. هذا ليس مجرّد روبوت محادثة يكتب كوداً، بل نظام يستطيع:

• قراءة مشروعك بالكامل لفهم السياق قبل التعديل.
• تفحّص السجلّات (Logs) لاكتشاف أسباب الأخطاء بنفسه.
• البحث في الويب عن حلول عند الحاجة.
• توليد الصور وإجراء تعديلات دقيقة على عدّة ملفات في وقت واحد.

هذا التطوّر مهم لأنه أنهى عصر «التعديلات الهشّة» التي كانت تكسر أجزاء أخرى من التطبيق في النسخ القديمة.

الأوضاع الثلاثة في سطر واحد

سنفصّلها لاحقاً في الوحدة 07، لكن تعرّف عليها الآن:

جولة في الواجهة

لن تشعر بالضياع بعد اليوم. سنفكّك كل ركن في شاشة Lovable ونعرف وظيفته بالضبط.

🎥درس فيديو (عربي)Yehia Tech · يحيى تك

▶

جولة عملية: بناء تطبيق فعلي بـ Lovable لتتعرّف على الواجهة وأركان الشاشة أثناء العمل · شاهد على يوتيوب ↗

المناطق الرئيسية في الشاشة

أدوات لا بدّ أن تعرفها

أين تقضي وقتك فعلاً؟

المفاجأة: المحترفون لا يقضون معظم وقتهم في كتابة الأوامر النصية ولا في محرّر الكود. بل في الطبقة البصرية — يضبطون التفاصيل الصغيرة التي تجعل المنتج «يبدو ويشعر صحيحاً». الكلام يبني الهيكل، والنقر البصري يصقل التفاصيل.

الأسعار والكريدِت (Credits)

المال موضوع حسّاس. سنشرح كل خطة بصدق، ونكشف «التكاليف الخفيّة» التي لا يخبرك بها أحد، ونعطيك حاسبة تفاعلية لتعرف ميزانيتك الحقيقية قبل أن تبدأ.

ابدأ مجّانًا (قبل أي دفع)

ما هي الـ «Credits» أصلاً؟

الكريدِت هي «وقود» المنصة. في كل مرة تطلب من الذكاء الاصطناعي أن يبني أو يعدّل شيئاً، تُستهلك كمية منها. كلّما كان الطلب أكبر وأعقد، استهلك أكثر. لهذا فإنّ كتابة Prompts دقيقة لا تختصر وقتك فقط، بل تختصر مالك أيضاً — لأنها تقلّل المحاولات الفاشلة.

مقارنة الخطط المدفوعة (ترقية اختيارية)

⚠️ التكاليف الخفيّة (TCO) — اقرأ هذا بعناية

السعر المعلَن ($25–50) لا يمثّل تكلفتك الحقيقية لمشروع إنتاجي. إليك ما يُضاف عادة:

فنّ كتابة الـ Prompts

هذه الوحدة وحدها تستحقّ ثمن الكورس. الفرق بين من يبني منتجاً في ساعة ومن يدور في حلقة إحباط لأسبوع هو جودة الطلب. ستتعلّم هنا منهجية مثبتة، لا حظّاً.

🎥درس فيديو (عربي)Smart Tech Arabic

▶

أسرار كتابة البرومبت كالمحترفين — طبّقها على طلباتك في Lovable لنتائج أدقّ · شاهد على يوتيوب ↗

القاعدة الثلاثية: «أين، ماذا، وما لا تلمسه»

القالب الذهبي لبدء مشروع جديد

استخدم هذا الهيكل المثبت في أوّل Prompt لأي مشروع. انسخه وعدّل محتواه:

I need a [type] web application with:

TECH STACK:
- Frontend: React + Tailwind CSS, responsive, mobile-first
- Auth: email/password + Google sign-in
- Database: Supabase

CORE FEATURES:
- [main feature 1]
- [main feature 2]
- [secondary feature]

DESIGN:
- Clean, modern, [your style: minimal / playful / corporate]
- Primary color: [#hex], rounded corners, generous spacing

Start ONLY with the landing page containing:
- A hero section with headline, subtext, and a "Get Started" button
- A features section with 3 cards
- A simple footer

Do not build the dashboard yet. Use realistic placeholder content,
not lorem ipsum.

خمس عادات تفصلك عن المحترفين

1. فكّر بالمكوّنات: اطلب «بطاقة منتج» مرة واحدة بشكل مثالي، ثم اطلب تكرارها — بدل وصف كل بطاقة على حدة.
2. استخدم محتوى حقيقياً: الأسماء والأسعار والنصوص الواقعية تجعل النتيجة أقرب للحقيقة وتكشف مشاكل التصميم مبكراً.
3. كرّر التعليمات المهمّة: ذاكرة الذكاء الاصطناعي محدودة. أعِد ذكر القيد المهمّ في كل Prompt («تذكّر: لا تغيّر تصميم الهيدر»).
4. تكرار صغير: «تغيير واحد ثم تحقّق» — لا تطلب خمس ميزات معاً.
5. أرفق صوراً: لوصف خطأ بصري أو شكل مطلوب، أرفق لقطة شاشة. الصورة أبلغ من ألف كلمة.

تقنية متقدّمة: «Meta‑Prompting»

بدل أن تكتب الطلب يدوياً وتتمنّى الأفضل، استخدم الذكاء الاصطناعي نفسه (مثل ChatGPT أو Claude) ليحسّن طلبك قبل لصقه في Lovable:

أريد بناء تطبيق [وصف فكرتك بإيجاز]. صُغ لي Prompt احترافياً
ومفصّلاً بالإنجليزية لمنصة Lovable يتضمّن: نوع التطبيق، التقنيات،
المستخدمين وأدوارهم، الصفحات الأساسية، والميزات — مرتّبة بأولوية
منطقية للبناء. اجعله واضحاً ومحدّداً قدر الإمكان.

تقنية أقوى: «Reverse Meta‑Prompting»

بعد أن تواجه خطأً وتحلّه، اطلب من الذكاء الاصطناعي أن يوثّق سبب المشكلة وحلّها ليصبح طلبك المستقبلي أدقّ. أنت تبني حلقة تحسين ذاتية:

راجِع هذا الطلب الذي استخدمته، واشرح لماذا أنتج سلوكاً غير متوقّع،
ثم اقترح صيغة محسّنة منه تتجنّب نفس المشكلة مستقبلاً.

ملف المعرفة (Knowledge File)

إن كان الـ Prompt هو الرسالة، فملف المعرفة هو «دماغ مشروعك». إتقانه يقلّل الأخطاء و«الهلوسة» بشكل جذري.

لماذا هو مهمّ إلى هذه الدرجة؟

ملف المعرفة هو مستند يُرسَل مع كل طلب تلقائياً، فيمنح الذكاء الاصطناعي السياق الكامل لمشروعك في كل مرة. بدونه، أنت تذكّره بكل شيء يدوياً في كل رسالة. معه، يفهم رؤيتك ومستخدميك وقواعدك دون أن تكرّرها.

ماذا تضع فيه؟

• نظرة عامة: ما الذي تبنيه ولمن، وما المشكلة التي يحلّها.
• المستخدمون وأدوارهم: مثال — «مستخدم بدور Investor يرى هذا المكوّن، لكن Admin لا يراه».
• التقنيات المستخدمة: React، Supabase، إلخ.
• تدفّق المستخدم (User Flow): كيف يتنقّل الشخص داخل التطبيق.
• الإرشادات البصرية: الألوان، الخطوط، الطابع العام.
• قواعد وحواجز: «لا تعدّل ملف X»، «استخدم دائماً مكوّنات Tailwind الجاهزة».

قالب جاهز لملف المعرفة

# Project: [App Name]

## Overview
[One paragraph: what this app does and who it's for.]

## Users & Roles
- Admin: manages everything, sees all data.
- Member: uses core features, sees own data only.
- Guest: read-only landing pages.

## Tech Stack
- React + Tailwind CSS (mobile-first, responsive)
- Supabase (database + auth)
- Stripe (subscriptions)

## Core User Flow
1. Visitor lands on homepage -> clicks "Sign up"
2. Creates account -> redirected to /dashboard
3. From dashboard, can [main action]

## Design Guidelines
- Primary: #FF6A5E  | Background: light, lots of whitespace
- Font: clean sans-serif | Rounded corners, soft shadows

## Rules (do NOT break)
- Do not modify /components/Layout.tsx
- Always use Tailwind breakpoints, never custom CSS
- Keep all currency in USD with 2 decimals

الأوضاع الثلاثة: متى تستخدم كلًّا منها

استخدام الوضع الخطأ في اللحظة الخطأ يهدر وقتك وكريدِتك. هنا تتعلّم اختيار الأداة الصحيحة لكل مهمّة.

🎥درس فيديو (عربي)Darrel Wilson · عربي

▶

احتراف Lovable (تحديث 2.0): الأوضاع والميزات الجديدة — مكمّل لشرح الأوضاع هنا · شاهد على يوتيوب ↗

خلاصة الاختيار

قاعدة البيانات والحسابات (Supabase)

هنا يتحوّل تطبيقك من «صفحة جميلة» إلى «منتج حقيقي» يحفظ البيانات ويعرف مستخدميه. لا تقلق — سنشرح كل شيء بلغة بسيطة.

🎥درس فيديو (عربي)MrPhantom · مستر فانتوم

▶

بناء موقع كامل بـ Lovable مع الجزء الخلفي (قاعدة البيانات وحسابات المستخدمين) خطوة بخطوة · شاهد على يوتيوب ↗

ما «قاعدة البيانات» أصلاً؟ (بلا تعقيد)

تخيّل جدول Excel ضخماً ومنظّماً يعيش على الإنترنت. كل صفّ سجلّ (مستخدم، طلب، منتج…) وكل عمود معلومة. قاعدة البيانات هي ذاكرة تطبيقك الدائمة: عندما يسجّل مستخدم حساباً أو يضيف منتجاً، يُحفَظ هنا ويبقى حتى لو أغلق المتصفّح.

و«المصادقة» (Authentication) ببساطة: نظام تسجيل الدخول الذي يتأكّد «من أنت» — بريد وكلمة مرور، أو دخول عبر Google.

ما هو Supabase ولماذا يستخدمه Lovable؟

Supabase هو خدمة الخلفية التي يعتمد عليها Lovable لتوفير:

كيف تربطه؟ خطوات عملية

قالب Prompt لإضافة الحسابات

Add authentication using Supabase:
- Email/password sign-up and login + Google sign-in
- After login, redirect users to /dashboard
- Create a "profiles" table: id, full_name, email, role (default: "member"), created_at
- Protect /dashboard so only logged-in users can access it
- Add a "Log out" button in the top navigation

Do not change the public landing page layout.

استقبال المدفوعات (Stripe)

أجمل تطبيق بلا وسيلة دفع هو هواية. هنا تتعلّم تحويل تطبيقك إلى مصدر دخل حقيقي.

🎥درس فيديو (عربي)AYMEN DEV

▶

بناء مشروع SaaS كامل وربط بوابة الدفع Stripe خطوة بخطوة — قلب هذه الوحدة · شاهد على يوتيوب ↗

🎥درس فيديو (عربي)قلم تقني · Mostafa Amin

▶

مهم للعرب: كيف تفتح حساب Stripe مفعّلًا وأنت مواطن عربي — الخطوة التي يتعثّر فيها كثيرون · شاهد على يوتيوب ↗

ماذا يدعم تكامل Stripe في Lovable؟

خطوات الربط

قالب Prompt لصفحة اشتراكات

Add a Pricing page with Stripe subscriptions:
- Three plans: Free ($0), Pro ($19/mo), Business ($49/mo)
- Each plan card lists its features and a "Subscribe" button
- On subscribe, open Stripe Checkout for the selected plan
- After successful payment, mark the user's "plan" field in the
  profiles table and unlock Pro features
- Use Stripe test mode for now

Keep the existing dashboard untouched.

النشر، الدومين، والأمان

لحظة الإطلاق! سنخرج تطبيقك إلى العالم على دومينك الخاص، ونحميه قبل أن يراه أحد.

🎥درس فيديو (عربي)Elzero Web School

▶

تبسيط مفاهيم الدومين والاستضافة والنشر — لتفهم ما يحدث عند ربط دومينك الخاص · شاهد على يوتيوب ↗

النشر بنقرة

اضغط زر Publish فيُرفَع تطبيقك مباشرة على رابط فرعي مثل yourapp.lovable.app. يصبح حيّاً على الإنترنت في ثوانٍ، وأي شخص يملك الرابط يستطيع استخدامه.

ربط دومينك الخاص

🔒 الأمان قبل الإطلاق — لا تتهاون هنا

بعد عددٍ من الحوادث الأمنية التي طالت مواقع مستضافة على Lovable، أضافت المنصّة فحوصات أمان. افحص تطبيقك دائماً قبل النشر العلني. (هذا المحتوى تعليمي وليس استشارة أمنية احترافية؛ للأنظمة الحسّاسة استعِن بمختصّ.)

Before launch, run a security review:
- Ensure Row Level Security (RLS) is enabled on ALL Supabase tables
- Confirm no secret API keys are exposed in the frontend
- Validate all user inputs on forms
- Make sure protected pages reject logged-out users
List any security issues you find and fix them.

GitHub وملكية الكود

أكبر ميزة تحرّرية في Lovable: أنت تملك كودك. لست سجيناً لدى المنصة.

ماذا يعني «تصدير إلى GitHub»؟

GitHub هو «خزانة» عالمية لحفظ الكود ومشاركته. Lovable يتيح ربط مشروعك بمستودع GitHub، فيُزامَن الكود تلقائياً. هذا يعني:

• تملك الكود فعلياً: نسخة كاملة بين يديك، لا حبيسة المنصة.
• نسخ احتياطية ونُسخ زمنية: سجلّ كامل لكل تغيير.
• طريق للنموّ: يمكنك البدء على Lovable ثم الانتقال لكود مخصّص (أو أدوات مثل Cursor) عند التوسّع، دون خسارة عملك.
• تعاون: يعمل مبرمجون معك على نفس المشروع لاحقاً.

حلّ المشاكل والتصحيح كالمحترفين

ستواجه أخطاءً. هذا طبيعي. الفرق أنّ المحترف يحلّها بهدوء ومنهجية، بينما يدور المبتدئ في حلقة إحباط. ستصبح من الأوّلين.

🎥درس فيديو (عربي)Elzero Web School

▶

تجربة صريحة لعيوب ومميزات الـ vibe coding — لتعرف حدود الأداة ومتى تنتبه · شاهد على يوتيوب ↗

نوعان من المشاكل

منهجية التصحيح في 5 خطوات

قالب Prompt لتشخيص خطأ

Use Chat/Plan mode (do NOT change code yet).

Problem: On the /settings page, clicking "Save" does nothing —
the toast appears but the data is not saved to Supabase.

Expected: clicking Save should update the user's row in "profiles"
and persist after refresh.

Please: 1) explain the likely root cause, 2) list what to check,
3) propose a minimal fix. Then wait for my confirmation.

متى تبدأ من جديد؟ (استراتيجية Remix)

أحياناً يكون «الترميم» أغلى من «إعادة البناء». ميزة Remix تنشئ نسخة نظيفة من مشروعك عند نقطة الصفر، فتبدأ بطلبات أفضل ومعرفة أوضح، مستخدماً القديم كمرجع. إعادة البناء ليست فشلاً — بل قرار استراتيجي يتّخذه أفضل البنّائين بوعي.

دراسات حالة حقيقية

القصص أبلغ من النظريات. إليك أمثلة واقعية — نجاحات ملهمة ودرس تحذيري — لتتعلّم من تجارب الآخرين.

قالب من الواقع: «Monthly Close Copilot»

هذا مثال على Prompt مُهيكَل لأداة محاسبية حقيقية — لاحظ كيف يُعرّف الهدف، الأدوار، والكيانات بدقّة:

Build a web app called "Monthly Close Copilot".

Outcome: Help a small ecommerce business run a consistent monthly
close by assigning tasks, collecting evidence files, and tracking
completion.

Roles:
- Admin: manages templates, users, sees all months.
- Accountant: works tasks, uploads evidence, marks tasks complete.
- Owner: views progress, comments, cannot edit templates.

Entities:
- Company: name, timezone.
- Month: period, status (open/closed).
- Task: title, assignee, status, evidence files, due date.

Start with the Admin dashboard listing months and their progress.

مشروع كامل خطوة بخطوة

سنبني معاً تطبيق حجز مواعيد كاملاً اسمه «BookEasy» — من صفحة فارغة إلى منتج منشور يستقبل مدفوعات. انسخ كل Prompt بالترتيب وطبّقه في Lovable.

🎥درس فيديو (عربي)Darrel Wilson · عربي

▶

مشروع كامل: إطلاق تطبيق SaaS من الصفر — تطبيق عملي طويل يجمع كل ما تعلّمته · شاهد على يوتيوب ↗

الخطوة 1 — الأساس وملف المعرفة

ابدأ بمشروع فارغ، ثم في وضع Plan اطلب توليد ملف المعرفة:

Use Plan mode. Help me create a Knowledge file for "BookEasy":
- An online appointment booking app.
- Roles: Customer (books appointments), Business Owner (manages
  services & availability), Admin (oversees everything).
- Tech: React + Tailwind, Supabase (db + auth), Stripe (deposits).
- Design: clean, modern, trustworthy. Primary color #2F6FED,
  rounded cards, lots of whitespace.
Output a complete Knowledge file I can save.

الخطوة 2 — الصفحة الرئيسية فقط

Build ONLY the landing page for BookEasy:
- Hero: headline "احجز موعدك في ثوانٍ", subtext, and two buttons
  ("ابدأ الآن" / "كيف يعمل")
- "How it works" section: 3 steps with icons
- A section showcasing 3 example businesses (use realistic content)
- Footer with links
Make it fully responsive (mobile-first). Do not build auth yet.

الخطوة 3 — تسجيل الدخول والأدوار

Add Supabase authentication:
- Email/password + Google sign-in.
- A "profiles" table: id, full_name, role (customer/owner/admin,
  default customer), created_at.
- After signup, ask the user to choose: "I want to book" (customer)
  or "I own a business" (owner), and save the role.
- Redirect customers to /explore and owners to /dashboard.
- Protect those routes for logged-in users only.
Keep the landing page layout unchanged.

الخطوة 4 — لوحة صاحب النشاط

Build the Business Owner dashboard at /dashboard:
- Owner can create "Services": name, duration (minutes), price.
- Owner can set weekly availability (days + time slots).
- Tables in Supabase: services, availability, bookings.
- Show an overview: upcoming bookings list + total revenue this month.
Use Visual Edits-friendly layout: cards, clear sections.
Only the owner role can access this page.

الخطوة 5 — تجربة العميل والحجز

Build the customer booking flow:
- /explore: list businesses and their services.
- Clicking a service opens a booking page showing available slots
  (from the owner's availability, minus already-booked slots).
- Customer picks a slot, confirms, and a row is added to "bookings"
  with status "pending_payment".
- Show the customer their bookings in /my-bookings.
Validate that a slot can't be double-booked.

الخطوة 6 — عربون الدفع (Stripe)

Integrate Stripe for booking deposits:
- When a customer confirms a booking, open Stripe Checkout for a
  deposit (20% of the service price).
- On successful payment, set the booking status to "confirmed" and
  show a success page.
- Use Stripe test mode for now.
Do not change the dashboard or explore pages.

الخطوة 7 — الصقل ثم الأمان ثم النشر

1) Polish: add a friendly empty-state for "no bookings yet",
   loading spinners, and success toasts.
2) Security review: enable RLS on all tables so customers see only
   their bookings and owners see only their business data. Confirm
   no secret keys are exposed. Reject logged-out users on protected
   pages. List and fix any issues.
3) Confirm everything works, then I will publish to my custom domain.

أفضل الممارسات ومنهجية العمل الاحترافية

الفرق بين شخص «يلعب» مع Lovable وشخص يبني به منتجاً حقيقياً ليس الذكاء — بل المنهجية. هذه هي القواعد التي يتبعها المحترفون لتجنّب إهدار الكريدِت والوقت والأعصاب.

١. اعمل بخطوات صغيرة (Small Iterations)

أكبر خطأ يقع فيه المبتدئون: طلب عشر ميزات في prompt واحد. النتيجة فوضى يصعب تصحيحها. المحترف يطلب تغييراً واحداً، يختبره، ثم ينتقل للتالي.

٢. ثبّت الواجهة قبل أن تلمس الـ Backend

ابنِ كل الصفحات والتصميم والتنقّل أولاً ببيانات وهمية (mock data)، وتأكّد أنّ الشكل يعجبك تماماً. بعد ذلك فقط اربط قاعدة البيانات والحسابات. لماذا؟ لأنّ تغيير التصميم بعد ربط الـ backend أصعب وأكثر كلفة بالكريدِت.

٣. حدّد المكان والمطلوب وما لا يُلمَس

عند أي تعديل، أخبر Lovable بثلاثة أمور: أين التغيير، ما هو بالضبط، وما الذي يجب ألّا يتغيّر. هذه الجملة الأخيرة تمنع «الكسر الجانبي» حيث يصلح ميزة فيكسر أخرى.

On the Dashboard page only, change the stats cards to a 3-column grid.
Do NOT touch the sidebar, the navigation, or any other page.

٤. صحّح في وضع التفكير (Plan/Chat Mode)

عند ظهور خطأ، لا تطلب الإصلاح فوراً في وضع الوكيل. انتقل إلى Chat/Plan Mode واسأل: «ما سبب هذا الخطأ؟ اشرح قبل أن تصلح.» سيحلّل المشكلة دون لمس الكود، فتفهم الجذر وتتجنّب تكرارها.

٥. الأمان قبل النشر — دائماً

قبل ربط الدومين، اطلب مراجعة أمان صريحة. منصّة Lovable تنبّهك أحياناً، لكن المسؤولية مسؤوليتك. أهمّ نقطة: تفعيل RLS على كل الجداول.

٦. Remix و Revert: شبكتا الأمان

٧. Meta-prompting: اجعل الذكاء يحسّن طلبك

قبل إرسال prompt مهمّ، اطلب من ChatGPT أو من Chat Mode في Lovable أن «يحسّن ويوضّح هذا الطلب ليفهمه مولّد التطبيقات بدقّة». والعكس (Reverse meta-prompting): بعد حلّ خطأ صعب، اطلب توثيق سببه وحلّه لتضيفه إلى ملف المعرفة فلا يتكرّر.

مكتبة القوالب الجاهزة — انسخ والصق وابنِ

هذه قوالب prompts مجرّبة وجاهزة. كلّها بالإنجليزية لأنّ Lovable يعطي أفضل نتائجه بها. عدّل النصوص بين الأقواس [ ] بما يناسب مشروعك، ثم انسخها مباشرة.

القالب ١ — الأساس (ابدأ كل مشروع به)

I need a [type of app] for [target users].

Tech stack: React, Tailwind, Supabase for backend.

Core features:
- [feature 1]
- [feature 2]
- [feature 3]

Design: [minimal & modern / playful / corporate], with a [color] accent.
Use realistic placeholder content, not lorem ipsum.

Start ONLY with the landing/home page. Do not build other pages yet.

القالب ٢ — إضافة الحسابات وتسجيل الدخول

Add user authentication using Supabase.
- Email/password sign up and login, plus "Sign in with Google".
- After login, redirect users to the [dashboard] page.
- Protect the [dashboard] route so logged-out visitors are sent to login.
Do NOT change the existing landing page design.

القالب ٣ — جدول بيانات + لوحة تحكم

Create a Supabase table called [items] with these fields:
[title (text), description (text), price (number), status (text), created_at].

Build a dashboard where the logged-in user can:
- See a list of their own [items] only.
- Add a new [item] via a form.
- Edit and delete an [item].
Enable RLS so each user sees only their own rows.

القالب ٤ — الأدوار والصلاحيات

Add user roles: [Admin], [Manager], and [Customer].
- Admins can see everything and manage all users.
- Managers can manage only their team's data.
- Customers can see only their own records.
Hide admin-only buttons and pages from non-admin users.
Enforce these permissions in the database with RLS, not just in the UI.

القالب ٥ — المدفوعات (اشتراكات Stripe)

Integrate Stripe for subscriptions.
- Two plans: Basic [$9/mo] and Pro [$29/mo].
- A pricing page with a "Subscribe" button for each plan.
- After successful payment, mark the user as subscribed and unlock
  the [Pro features].
- Add a "Manage billing" link to the Stripe customer portal.

القالب ٦ — إصلاح خطأ (مع لقطة شاشة)

There is a bug. When I [describe exact action], I expect [expected result]
but instead [what actually happens]. (Screenshot attached.)

Switch to Plan/Chat mode first: explain the most likely root cause
in plain English. Do NOT change code yet. Then propose a fix plan.

القالب ٧ — مراجعة الأمان قبل النشر

Before I publish, do a full security review:
1) Confirm RLS is enabled on every table.
2) Make sure no secret API keys are exposed in the frontend.
3) Verify protected pages reject logged-out users.
4) Confirm each role can access only what it should.
List every issue you find and fix it.

القالب ٨ — تحسين تجربة المستخدم

Polish the user experience across the app:
- Add friendly empty states (e.g. "No items yet — add your first one").
- Add loading spinners for data fetches.
- Show success/error toast notifications after actions.
- Make sure the whole app is fully responsive on mobile.
Keep the current design language and colors consistent.

PROJECT: [app name] — [one-line description].
USERS & ROLES: [who uses it and what each role can do].
TECH: React, Tailwind, Supabase (auth + database), Stripe for payments.
USER FLOW: [step 1] → [step 2] → [step 3].
DESIGN: [style], [accent color], clean and consistent, mobile-first.
RULES: small iterations; enable RLS on all tables; never expose secret
keys; ask before large refactors; keep existing pages intact unless told.

قاموس المصطلحات — كلّ كلمة تقنية بالعربية البسيطة

لن تخاف من أي مصطلح بعد اليوم. هذه كل الكلمات التي ستصادفها في Lovable مشروحة بلغة يفهمها أيّ شخص — بلا خلفية برمجية.

الخطوة التالية + شهادتك

أنهيت رحلةً نقلتك من «لا أعرف ما هو Lovable» إلى «أستطيع بناء تطبيق SaaS متكامل ونشره». إليك ما تفعله الآن لتحوّل المعرفة إلى نتيجة.

خطّتك لأوّل ٧ أيام

مصادر تتابع بها التعلّم

شهادة إتمام الدورة

أكمل كل الدروس (وضع علامة «أنهيت الدرس» في كلٍّ منها) ليصل تقدّمك إلى ١٠٠٪ وتظهر شهادتك تلقائياً هنا.

🎥Video lessonMetics Media (Arabic)

▶

A complete beginner intro to "vibe coding" — building with AI from idea to app (the foundation of this course). Arabic audio. · Watch on YouTube ↗

Who is this course for?

What will you master by the end?

• Understand every feature in Lovable and exactly when to use it (not just headlines).
• Write professional prompts that get what you want on the first try instead of ten failed attempts.
• Connect a real database, login, and payments to your app — all in plain language.
• Publish to your own domain and secure your app before launch.
• Handle errors and unexpected behavior like a pro instead of spinning in an endless loop.
• Build a complete SaaS project end to end by following the included templates.

How to use this course effectively

What Is Lovable?

Imagine talking to a tireless "software engineer": you describe what you want in plain language, and it builds the entire app in front of your eyes in minutes. That, in short, is Lovable.

🎥Video lessonChristian Peverelli

▶

Build a Lovable app from scratch — mirrors this module's fundamentals · Watch on YouTube ↗

Lovable (website: lovable.dev) is an AI platform for building full-stack applications. You write a description in natural language — English or Arabic — and the platform generates real, editable, ownable code, then publishes it straight to the internet.

The project began as "GPT Engineer," an open-source project with tens of thousands of GitHub stars. The commercial version launched as Lovable (late 2024), topped Product Hunt, grew extremely fast, and reached a multi-billion-dollar valuation backed by major investors. In other words, this is not a side project — it has become a platform that millions of users worldwide rely on. (For up-to-date numbers, see lovable.dev.)

Why does "full-stack" matter so much?

Every real app has two layers: the frontend (what the user sees) and the backend (the brain that stores data and runs accounts and logic). Many tools build only the frontend, so you get "a pretty picture that doesn't work." Lovable builds both layers together:

Lovable is not a traditional "No-Code" tool

Traditional tools hide the code behind drag-and-drop "blocks," and you stay locked inside the platform. Lovable is a smart hybrid:

When to use Lovable… and when not

How the Engine Works

Before you write your first prompt, understand what happens "behind the curtain." Understanding how Lovable thinks is the difference between amazing results and repeated frustration.

The core loop (the magic cycle)

Everything you do in Lovable runs in a simple, constantly repeating four-step loop:

The AI isn't an "order-taker"… it's a partner

Since the 2.0 update (mid-2025), Lovable runs in autonomous "Agent" mode by default. This isn't just a chatbot that writes code — it's a system that can:

• Read your whole project to understand context before editing.
• Inspect logs to discover the causes of errors on its own.
• Search the web for solutions when needed.
• Generate images and make precise edits across several files at once.

This shift matters because it ended the era of "fragile edits" that used to break other parts of the app in older versions.

The three modes in one line

We'll detail them later in Module 07, but get to know them now:

Tour of the Interface

You'll never feel lost again. We'll break down every corner of the Lovable screen and learn exactly what it does.

The main areas of the screen

Tools you must know

Where do you actually spend your time?

The surprise: pros don't spend most of their time writing text commands or in the code editor. They spend it in the visual layer — tuning the small details that make a product "look and feel right." Words build the structure; visual clicking polishes the details.

Pricing & Credits

Money is a sensitive topic. We'll explain every plan honestly, reveal the "hidden costs" nobody tells you about, and give you an interactive calculator so you know your real budget before you begin.

Start free (before paying anything)

What are "Credits" anyway?

Credits are the platform's "fuel." Every time you ask the AI to build or edit something, some amount is consumed. The bigger and more complex the request, the more it consumes. That's why writing precise prompts doesn't just save your time — it saves your money too, because it reduces failed attempts.

Paid plan comparison (optional upgrade)

⚠️ Hidden costs (TCO) — read this carefully

The advertised price ($25–50) does not represent your true cost for a production project. Here's what usually gets added:

The Art of Writing Prompts

This module alone is worth the price of the course. The difference between someone who builds a product in an hour and someone who spins in a week of frustration is prompt quality. Here you'll learn a proven method — not luck.

🎥Video lessonChristian Peverelli

▶

Go from beginner to pro with Lovable + Supabase — great prompting & build practice · Watch on YouTube ↗

The rule of three: "Where, What, and What-not-to-touch"

The golden template for starting a new project

Use this proven structure in the first prompt of any project. Copy it and edit the contents:

I need a [type] web application with:

TECH STACK:
- Frontend: React + Tailwind CSS, responsive, mobile-first
- Auth: email/password + Google sign-in
- Database: Supabase

CORE FEATURES:
- [main feature 1]
- [main feature 2]
- [secondary feature]

DESIGN:
- Clean, modern, [your style: minimal / playful / corporate]
- Primary color: [#hex], rounded corners, generous spacing

Start ONLY with the landing page containing:
- A hero section with headline, subtext, and a "Get Started" button
- A features section with 3 cards
- A simple footer

Do not build the dashboard yet. Use realistic placeholder content,
not lorem ipsum.

Five habits that separate you from the pros

1. Think in components: ask for one "product card" done perfectly, then ask to repeat it — instead of describing each card separately.
2. Use real content: realistic names, prices, and text make the result closer to reality and surface design problems early.
3. Repeat important instructions: the AI's memory is limited. Restate the key constraint in each prompt ("Remember: don't change the header design").
4. Iterate small: "one change then check" — don't request five features together.
5. Attach images: to describe a visual bug or a desired look, attach a screenshot. A picture is worth a thousand words.

Advanced technique: "Meta-Prompting"

Instead of writing the request by hand and hoping for the best, use AI itself (like ChatGPT or Claude) to improve your prompt before pasting it into Lovable:

I want to build an app: [briefly describe your idea]. Write me a
professional, detailed prompt for the Lovable platform that includes:
the app type, the tech stack, the users and their roles, the core
pages, and the features — ordered in a logical build priority.
Make it as clear and specific as possible.

An even stronger technique: "Reverse Meta-Prompting"

After you hit an error and solve it, ask the AI to document the cause of the problem and its fix so your future prompt is more precise. You're building a self-improving loop:

Review the prompt I used, explain why it produced unexpected
behavior, then propose an improved version of it that avoids the
same problem in the future.

The Knowledge File

If the prompt is the message, the Knowledge file is "your project's brain." Mastering it dramatically reduces errors and "hallucinations."

Why does it matter this much?

The Knowledge file is a document sent automatically with every request, giving the AI full context about your project every single time. Without it, you remind it of everything manually in each message. With it, it understands your vision, your users, and your rules without you repeating them.

What do you put in it?

• Overview: what you're building and for whom, and the problem it solves.
• Users & roles: e.g. "a user with the Investor role sees this component, but Admin doesn't."
• Tech stack: React, Supabase, etc.
• User flow: how a person moves through the app.
• Visual guidelines: colors, fonts, the overall vibe.
• Rules & guardrails: "don't modify file X," "always use ready-made Tailwind components."

A ready-made Knowledge file template

# Project: [App Name]

## Overview
[One paragraph: what this app does and who it's for.]

## Users & Roles
- Admin: manages everything, sees all data.
- Member: uses core features, sees own data only.
- Guest: read-only landing pages.

## Tech Stack
- React + Tailwind CSS (mobile-first, responsive)
- Supabase (database + auth)
- Stripe (subscriptions)

## Core User Flow
1. Visitor lands on homepage -> clicks "Sign up"
2. Creates account -> redirected to /dashboard
3. From dashboard, can [main action]

## Design Guidelines
- Primary: #FF6A5E  | Background: light, lots of whitespace
- Font: clean sans-serif | Rounded corners, soft shadows

## Rules (do NOT break)
- Do not modify /components/Layout.tsx
- Always use Tailwind breakpoints, never custom CSS
- Keep all currency in USD with 2 decimals

The Three Modes: when to use each

Using the wrong mode at the wrong moment wastes your time and credits. Here you'll learn to choose the right tool for each task.

Choosing at a glance

Database & Accounts (Supabase)

This is where your app turns from "a pretty page" into "a real product" that stores data and knows its users. Don't worry — we'll explain everything in plain language.

🎥Video lessonSupabase (official)

▶

Official walkthrough: wiring a real backend (database & data) into Lovable · Watch on YouTube ↗

What is a "database" anyway? (no jargon)

Imagine a huge, organized Excel sheet that lives on the internet. Each row is a record (a user, an order, a product…) and each column is a piece of information. The database is your app's permanent memory: when a user signs up or adds a product, it's saved here and stays even if they close the browser.

And "authentication," simply put, is the login system that verifies "who you are" — email and password, or sign-in via Google.

What is Supabase and why does Lovable use it?

Supabase is the backend service Lovable relies on to provide:

How do you connect it? Practical steps

A prompt template for adding accounts

Add authentication using Supabase:
- Email/password sign-up and login + Google sign-in
- After login, redirect users to /dashboard
- Create a "profiles" table: id, full_name, email, role (default: "member"), created_at
- Protect /dashboard so only logged-in users can access it
- Add a "Log out" button in the top navigation

Do not change the public landing page layout.

Receiving Payments (Stripe)

The prettiest app with no way to get paid is a hobby. Here you learn to turn your app into a real source of income.

🎥Video lessonSupabase (official)

▶

Build a full SaaS with Lovable + Supabase + Stripe payments — the heart of this module · Watch on YouTube ↗

What does Stripe integration support in Lovable?

Connection steps

A prompt template for a subscriptions page

Add a Pricing page with Stripe subscriptions:
- Three plans: Free ($0), Pro ($19/mo), Business ($49/mo)
- Each plan card lists its features and a "Subscribe" button
- On subscribe, open Stripe Checkout for the selected plan
- After successful payment, mark the user's "plan" field in the
  profiles table and unlock Pro features
- Use Stripe test mode for now

Keep the existing dashboard untouched.

Publishing, Domains & Security

Launch time! We'll get your app out to the world on your own domain, and secure it before anyone sees it.

Publish in one click

Press the Publish button and your app goes live on a subdomain like yourapp.lovable.app. It becomes live on the internet in seconds, and anyone with the link can use it.

Connecting your own domain

🔒 Security before launch — don't be careless here

After several security incidents affecting Lovable-hosted sites, the platform added security checks. Always scan your app before publishing publicly. (This is educational, not professional security advice; for sensitive systems, consult an expert.)

Before launch, run a security review:
- Ensure Row Level Security (RLS) is enabled on ALL Supabase tables
- Confirm no secret API keys are exposed in the frontend
- Validate all user inputs on forms
- Make sure protected pages reject logged-out users
List any security issues you find and fix them.

GitHub & Code Ownership

Lovable's biggest liberating feature: you own your code. You're not a prisoner of the platform.

What does "export to GitHub" mean?

GitHub is a global "vault" for storing and sharing code. Lovable lets you connect your project to a GitHub repository, so the code syncs automatically. This means:

• You actually own the code: a full copy in your hands, not trapped in the platform.
• Backups and version history: a complete record of every change.
• A path to grow: you can start on Lovable then move to custom code (or tools like Cursor) as you scale, without losing your work.
• Collaboration: developers can work with you on the same project later.

Debugging & Fixing Issues Like a Pro

You will hit errors. That's normal. The difference is that a pro solves them calmly and methodically, while a beginner spins in a frustration loop. You'll become the former.

Two kinds of problems

A 5-step debugging method

A prompt template for diagnosing an error

Use Chat/Plan mode (do NOT change code yet).

Problem: On the /settings page, clicking "Save" does nothing —
the toast appears but the data is not saved to Supabase.

Expected: clicking Save should update the user's row in "profiles"
and persist after refresh.

Please: 1) explain the likely root cause, 2) list what to check,
3) propose a minimal fix. Then wait for my confirmation.

When do you start over? (the Remix strategy)

Sometimes "patching" costs more than "rebuilding." The Remix feature creates a clean copy of your project from a fresh start, so you begin with better prompts and clearer knowledge, using the old one as a reference. Rebuilding isn't failure — it's a strategic decision that the best builders make consciously.

Real Case Studies

Stories are more powerful than theory. Here are real examples — inspiring successes and a cautionary lesson — so you can learn from others' experiences.

A real-world template: "Monthly Close Copilot"

This is an example of a structured prompt for a real accounting tool — notice how the outcome, roles, and entities are defined precisely:

Build a web app called "Monthly Close Copilot".

Outcome: Help a small ecommerce business run a consistent monthly
close by assigning tasks, collecting evidence files, and tracking
completion.

Roles:
- Admin: manages templates, users, sees all months.
- Accountant: works tasks, uploads evidence, marks tasks complete.
- Owner: views progress, comments, cannot edit templates.

Entities:
- Company: name, timezone.
- Month: period, status (open/closed).
- Task: title, assignee, status, evidence files, due date.

Start with the Admin dashboard listing months and their progress.

Full Project, Step by Step

We'll build a complete appointment-booking app together called "BookEasy" — from a blank page to a published product that takes payments. Copy each prompt in order and apply it in Lovable.

🎥Video lessonDecoding Digital

▶

Build a full-stack app end-to-end — a practical capstone for everything you learned · Watch on YouTube ↗

Step 1 — Foundation and the Knowledge file

Start with an empty project, then in Plan mode ask it to generate the Knowledge file:

Use Plan mode. Help me create a Knowledge file for "BookEasy":
- An online appointment booking app.
- Roles: Customer (books appointments), Business Owner (manages
  services & availability), Admin (oversees everything).
- Tech: React + Tailwind, Supabase (db + auth), Stripe (deposits).
- Design: clean, modern, trustworthy. Primary color #2F6FED,
  rounded cards, lots of whitespace.
Output a complete Knowledge file I can save.

Step 2 — The landing page only

Build ONLY the landing page for BookEasy:
- Hero: headline "Book your appointment in seconds", subtext, and two
  buttons ("Get Started" / "How it works")
- "How it works" section: 3 steps with icons
- A section showcasing 3 example businesses (use realistic content)
- Footer with links
Make it fully responsive (mobile-first). Do not build auth yet.

Step 3 — Login and roles

Add Supabase authentication:
- Email/password + Google sign-in.
- A "profiles" table: id, full_name, role (customer/owner/admin,
  default customer), created_at.
- After signup, ask the user to choose: "I want to book" (customer)
  or "I own a business" (owner), and save the role.
- Redirect customers to /explore and owners to /dashboard.
- Protect those routes for logged-in users only.
Keep the landing page layout unchanged.

Step 4 — The business owner dashboard

Build the Business Owner dashboard at /dashboard:
- Owner can create "Services": name, duration (minutes), price.
- Owner can set weekly availability (days + time slots).
- Tables in Supabase: services, availability, bookings.
- Show an overview: upcoming bookings list + total revenue this month.
Use Visual Edits-friendly layout: cards, clear sections.
Only the owner role can access this page.

Step 5 — The customer experience and booking

Build the customer booking flow:
- /explore: list businesses and their services.
- Clicking a service opens a booking page showing available slots
  (from the owner's availability, minus already-booked slots).
- Customer picks a slot, confirms, and a row is added to "bookings"
  with status "pending_payment".
- Show the customer their bookings in /my-bookings.
Validate that a slot can't be double-booked.

Step 6 — The payment deposit (Stripe)

Integrate Stripe for booking deposits:
- When a customer confirms a booking, open Stripe Checkout for a
  deposit (20% of the service price).
- On successful payment, set the booking status to "confirmed" and
  show a success page.
- Use Stripe test mode for now.
Do not change the dashboard or explore pages.

Step 7 — Polish, then security, then publish

1) Polish: add a friendly empty-state for "no bookings yet",
   loading spinners, and success toasts.
2) Security review: enable RLS on all tables so customers see only
   their bookings and owners see only their business data. Confirm
   no secret keys are exposed. Reject logged-out users on protected
   pages. List and fix any issues.
3) Confirm everything works, then I will publish to my custom domain.

Best Practices and a Professional Workflow

The difference between someone "playing" with Lovable and someone building a real product with it isn't intelligence — it's method. These are the rules pros follow to avoid wasting credits, time, and nerves.

1. Work in small iterations

The biggest mistake beginners make: asking for ten features in one prompt. The result is a mess that's hard to debug. A pro asks for one change, tests it, then moves to the next.

2. Lock down the frontend before touching the backend

Build all the pages, design, and navigation first with mock data, and make sure you love the look. Only then connect the database and accounts. Why? Because changing the design after connecting the backend is harder and costs more credits.

3. Specify the where, the what, and the do-not-touch

On any edit, tell Lovable three things: where the change is, what exactly it is, and what must not change. That last sentence prevents "side breakage" where it fixes one feature and breaks another.

On the Dashboard page only, change the stats cards to a 3-column grid.
Do NOT touch the sidebar, the navigation, or any other page.

4. Debug in Plan/Chat mode

When an error appears, don't ask for a fix immediately in Agent mode. Switch to Chat/Plan mode and ask: "What's the cause of this error? Explain before you fix." It will analyze the problem without touching the code, so you understand the root and avoid repeating it.

5. Security before publishing — always

Before connecting the domain, ask for an explicit security review. Lovable sometimes warns you, but the responsibility is yours. The most important point: enabling RLS on all tables.

6. Remix and Revert: your two safety nets

7. Meta-prompting: let the AI improve your request

Before sending an important prompt, ask ChatGPT or Lovable's Chat mode to "improve and clarify this request so the app generator understands it precisely." And the reverse (reverse meta-prompting): after solving a hard error, ask it to document the cause and fix to add to your Knowledge file so it doesn't recur.

Ready-to-Use Template Library — copy, paste, build

These are tested, ready prompt templates. They're all in English because Lovable gives its best results in English. Edit the text between the brackets [ ] to fit your project, then copy them directly.

Template 1 — Foundation (start every project with it)

I need a [type of app] for [target users].

Tech stack: React, Tailwind, Supabase for backend.

Core features:
- [feature 1]
- [feature 2]
- [feature 3]

Design: [minimal & modern / playful / corporate], with a [color] accent.
Use realistic placeholder content, not lorem ipsum.

Start ONLY with the landing/home page. Do not build other pages yet.

Template 2 — Adding accounts and login

Add user authentication using Supabase.
- Email/password sign up and login, plus "Sign in with Google".
- After login, redirect users to the [dashboard] page.
- Protect the [dashboard] route so logged-out visitors are sent to login.
Do NOT change the existing landing page design.

Template 3 — Data table + dashboard

Create a Supabase table called [items] with these fields:
[title (text), description (text), price (number), status (text), created_at].

Build a dashboard where the logged-in user can:
- See a list of their own [items] only.
- Add a new [item] via a form.
- Edit and delete an [item].
Enable RLS so each user sees only their own rows.

Template 4 — Roles and permissions

Add user roles: [Admin], [Manager], and [Customer].
- Admins can see everything and manage all users.
- Managers can manage only their team's data.
- Customers can see only their own records.
Hide admin-only buttons and pages from non-admin users.
Enforce these permissions in the database with RLS, not just in the UI.

Template 5 — Payments (Stripe subscriptions)

Integrate Stripe for subscriptions.
- Two plans: Basic [$9/mo] and Pro [$29/mo].
- A pricing page with a "Subscribe" button for each plan.
- After successful payment, mark the user as subscribed and unlock
  the [Pro features].
- Add a "Manage billing" link to the Stripe customer portal.

Template 6 — Fixing a bug (with a screenshot)

There is a bug. When I [describe exact action], I expect [expected result]
but instead [what actually happens]. (Screenshot attached.)

Switch to Plan/Chat mode first: explain the most likely root cause
in plain English. Do NOT change code yet. Then propose a fix plan.

Template 7 — Pre-publish security review

Before I publish, do a full security review:
1) Confirm RLS is enabled on every table.
2) Make sure no secret API keys are exposed in the frontend.
3) Verify protected pages reject logged-out users.
4) Confirm each role can access only what it should.
List every issue you find and fix it.

Template 8 — Polishing the user experience

Polish the user experience across the app:
- Add friendly empty states (e.g. "No items yet — add your first one").
- Add loading spinners for data fetches.
- Show success/error toast notifications after actions.
- Make sure the whole app is fully responsive on mobile.
Keep the current design language and colors consistent.

PROJECT: [app name] — [one-line description].
USERS & ROLES: [who uses it and what each role can do].
TECH: React, Tailwind, Supabase (auth + database), Stripe for payments.
USER FLOW: [step 1] -> [step 2] -> [step 3].
DESIGN: [style], [accent color], clean and consistent, mobile-first.
RULES: small iterations; enable RLS on all tables; never expose secret
keys; ask before large refactors; keep existing pages intact unless told.

Glossary — every technical term in plain language

You won't fear any term after today. These are all the words you'll encounter in Lovable, explained in language anyone can understand — no coding background needed.

Next Steps + Your Certificate

You finished a journey that took you from "I don't know what Lovable is" to "I can build a complete SaaS app and publish it." Here's what to do now to turn knowledge into results.

Your first 7-day plan

Resources to keep learning

Course completion certificate

Complete every lesson (mark "I finished this lesson" in each) so your progress reaches 100% and your certificate appears here automatically.