Lovable Prompts — Build Apps with Natural Language

Build a {{app_type}} web application for {{target_audience}}.

Core features:
- {{feature_1}}
- {{feature_2}}
- {{feature_3}}
- Dashboard with key metrics and recent activity feed

Data model:
- {{entity_1}} has many {{entity_2}}
- {{entity_2}} belongs to {{entity_1}}
- Each {{entity_2}} has: {{entity_2_fields}}

Design: Professional and clean. {{primary_color}} accent color. Sidebar navigation with icons. Card-based layouts for data display. Mobile responsive.

Include: Loading spinners for async operations, empty states with helpful messages, toast notifications for user actions.

Add a {{feature_name}} feature to the existing app.

What it does: {{feature_description}}

User flow:
1. User navigates to {{entry_point}}
2. User {{action_1}}
3. System {{response_1}}
4. User sees {{result}}

UI requirements:
- Place the entry point in {{ui_location}}
- Use the existing design system (same colors, spacing, components)
- Include form validation with inline error messages
- Add a confirmation step before destructive actions

Data: {{data_requirements}}

Do not modify existing features. Do not change the navigation structure. Only add new components and routes as needed.

Improve the visual design and UX of the {{page_name}} page:

1. Spacing and alignment:
   - Increase padding inside cards to 24px
   - Add 16px gap between grid items
   - Align all section headings consistently

2. Visual hierarchy:
   - Make the page title larger (text-2xl, font-bold)
   - Add subtle gray-50 background to alternating sections
   - Use {{accent_color}} for primary actions, gray for secondary

3. Micro-interactions:
   - Hover effects on clickable cards (shadow + slight lift)
   - Smooth transitions on all interactive elements (200ms)
   - Button press feedback (scale 0.98)

4. Empty and loading states:
   - Skeleton loaders that match the actual content layout
   - Friendly empty state messages with suggested actions

5. Mobile: Stack all grids to single column below 768px. Full-width buttons on mobile.

Do not change any functionality, routes, or data logic. Only modify styling and UX.

Set up the Supabase database for this application:

Tables:
1. {{table_1}}
   - id (UUID, primary key, auto-generated)
   - {{table_1_fields}}
   - user_id (UUID, foreign key to auth.users)
   - created_at (timestamp with timezone, default now())
   - updated_at (timestamp with timezone)

2. {{table_2}}
   - id (UUID, primary key, auto-generated)
   - {{table_2_fields}}
   - {{table_1}}_id (UUID, foreign key)
   - created_at, updated_at

Row Level Security:
- Users can only read/write their own {{table_1}} rows (WHERE user_id = auth.uid())
- Users can read/write {{table_2}} rows that belong to their {{table_1}}

Indexes: Add indexes on user_id, {{table_1}}_id, and any field used for sorting or filtering.

Generate the corresponding TypeScript types and Supabase query functions for CRUD operations on each table.

Add complete authentication to this app using Supabase Auth:

Auth methods:
- Email and password (with email confirmation)
- Google OAuth
{{additional_auth_methods}}

Pages:
- /login — email/password form + Google button + link to signup
- /signup — email/password form + Google button + link to login
- /forgot-password — email input to send reset link
- /reset-password — new password form (accessed from email link)

Post-auth flow:
- On signup: create a user profile row with display name from email
- On login: redirect to {{default_route}}
- On logout: redirect to /login, clear local state

Protected routes: All routes under {{protected_prefix}} require authentication. Redirect unauthenticated users to /login with a return URL parameter.

UI: Center auth forms, max-width 400px. Show password strength indicator on signup. Display auth errors inline (not alerts). Loading state on submit buttons.

Prepare this Lovable app for production deployment:

1. Environment variables:
   - Verify all Supabase credentials use environment variables (not hardcoded)
   - Ensure NEXT_PUBLIC_ prefix only on client-safe vars
   - Create a .env.example listing every required variable

2. Error handling:
   - Add global error boundary component that shows a friendly error page
   - Add try/catch to all Supabase queries with user-facing error messages
   - Log errors to console in development, suppress in production

3. Performance:
   - Add loading.tsx files for route-level suspense boundaries
   - Lazy load heavy components (charts, rich text editors)
   - Optimize images with next/image where applicable

4. SEO basics:
   - Add metadata (title, description) to each page
   - Add Open Graph tags for {{app_name}}
   - Generate a sitemap.xml

5. Security:
   - Verify all RLS policies are active
   - Remove any console.log statements with sensitive data
   - Set secure cookie options for auth tokens

Do not change features or UI. Only add production infrastructure.