Intermediate

Building Apps with Lovable

Learn to build various types of applications with Lovable, from portfolio sites to SaaS dashboards, using shadcn/ui components, responsive design, and multi-page navigation.

Building a Portfolio Site

Create a developer portfolio website with:
- Hero section with name, title, and animated gradient background
- About section with bio and skills (shown as badges)
- Projects section with 6 project cards (image, title, description, tech stack, links)
- Experience timeline with 3-4 positions
- Contact form with name, email, and message fields
- Smooth scroll navigation
- Fully responsive design
Use a dark theme with purple accent colors.

Building a SaaS Dashboard

Build a SaaS analytics dashboard with:
- Collapsible sidebar with navigation icons and labels
- Top bar with search, notifications bell, and user avatar
- Overview page with 4 KPI cards (revenue, users, conversion, growth)
- Charts section: line chart for trends, bar chart for comparisons
- Recent activity feed with timestamps
- Settings page with profile form
- Use shadcn/ui components throughout
Modern design with a white background and blue accents.

Building a Marketplace

Create a marketplace app for handmade crafts:
- Browse listings with grid/list view toggle
- Search with category filters (jewelry, pottery, textiles, etc.)
- Product detail page with image gallery, description, price, and seller info
- Seller profile pages with their listings
- Shopping cart with quantity controls
- Clean, warm design with earthy colors

Building a Blog

Build a modern blog platform with:
- Home page with featured post and recent posts grid
- Blog post page with rich text content, author info, and reading time
- Category and tag filtering
- Search functionality
- Author page with bio and their posts
- Newsletter signup form in the footer
- Clean typography-focused design

Working with shadcn/ui Components

Lovable uses shadcn/ui as its primary component library, providing beautiful, accessible UI components built on Radix UI and Tailwind CSS:

• Buttons, Inputs, Forms: Polished form controls with consistent styling
• Cards, Dialogs, Sheets: Container components for content organization
• Tables, Data displays: Structured data presentation
• Navigation: Tabs, breadcrumbs, menus, and sidebars
• Feedback: Toasts, alerts, tooltips, and loading states

You can request specific components in your prompts: "Use a shadcn Sheet component for the mobile menu" or "Add a shadcn Dialog for the confirmation modal."

Responsive Design

Lovable generates responsive designs by default, but you can be explicit:

"Make the product grid show 4 columns on desktop,
2 columns on tablet, and 1 column on mobile.
The sidebar should collapse into a hamburger menu on mobile."

Theming and Styling

Lovable uses Tailwind CSS for styling. You can control the theme through prompts:

• Color scheme: "Use a dark theme with emerald green accents"
• Typography: "Use Inter for headings and system fonts for body text"
• Spacing: "Add more whitespace between sections for a premium feel"
• Animations: "Add fade-in animations when cards scroll into view"

Multi-Page Navigation

Lovable uses React Router for multi-page applications:

"Create the following pages with navigation:
- Home (/) with hero and features overview
- Products (/products) with filterable product grid
- About (/about) with team section and company story
- Contact (/contact) with form and office locations map
Add a sticky header with navigation links and a mobile hamburger menu."

Forms and Data Handling

Lovable handles forms with validation and data management:

• Form validation: Required fields, email format, min/max length
• Error messages: Inline validation feedback
• Loading states: Submit button loading indicators
• Success feedback: Toast notifications or success pages
• Local state: React state management for form data