About Lovable

Overview

Lovable is an AI-powered app builder that lets you create web applications using natural language prompts. It's designed for no code/low code users, indie founders, and small teams who want to build and iterate on UI-focused apps quickly. You can build your app's interface and functionality just by prompting with an AI agent.

Key Features

AI-Powered Development: Build and modify your app using simple, conversational text prompts.
Rapid UI Experimentation: Lovable's focus is on the user interface, allowing you to experiment and iterate on your app's design in real-time
Supabase Backend: Lovable integrates with Supabase to handle backend needs like databases and user authentication.
NPM Package Support: You can ask the Lovable AI to install npm packages, which is how you'll add the Median JavaScript Bridge

How Median Works

Median converts your Lovable web app into native mobile apps using a WebView approach. Your web app, built with Lovable, runs inside a native "shell" that we provide. This shell "bridges" the gap between your web code and the device's native features, like push notifications, haptics, and biometric auth.

What You'll Learn

This guide will walk you through converting your Lovable app to native mobile apps and optimizing it for the best mobile experience.

Median Integration Guide

This guide is structured in 5 parts:

Part 1: Getting Started - Understand the JavaScript Bridge and detect mobile app usage
Part 2: Push Notifications - Set up OneSignal and implement advanced notification features
Part 3: Haptic Feedback - Add tactile feedback to improve user experience

App Optimization Best Practices

You'll understand best practices for:

Mobile-responsive design principles
Touch-friendly interface design
Mobile performance optimization
Form and navigation optimization for mobile

Example Prompts

You'll get ready-to-use AI prompts for:

Adding the Median JavaScript Bridge to your project
Adding haptic feedback to a button
Adding a native QR/Barcode scanner
Making your app mobile-responsive

Prompt Best Practices (Median-Specific)

You'll learn how to:

Structure your prompts for the Lovable AI
How to avoid AI "hallucinations" by providing documentation
Test and validate the code your AI agent generates

Example walkthrough: Building a mobile-first todo list app

The following guides walk you through building a mobile-first todo list application in Lovble from scratch, then converting it to a native mobile app with Median.

We'll build the complete app using Lovable, then add native mobile features like push notifications and haptic feedback. We provide example prompts at every step so you can follow along or adapt them for your own projects.

What we'll build:

A responsive to-do list web app using Lovable
Push notifications when tasks are assigned or due
Haptic feedback when completing or deleting tasks
A native iOS and Android app powered by Median

Why a to-do list? It's simple enough to build quickly but complex enough to showcase real native features. The patterns you learn apply to any mobile app , from productivity tools to social networks.

By the end, you'll have a working example and the confidence to build your own mobile apps using the same approach.