Lovable Desktop App

✨ A beautiful native Intel Mac application for Lovable.dev

Experience lovable.dev with an enhanced, modern UI in a dedicated desktop application

---

🎯 Features

🎨 Enhanced Modern UI Beautiful gradient-based design with smooth animations and a stunning loading screen featuring the app icon	🚀 Native macOS Experience Built specifically for Intel Mac computers with native integration and performance
🌐 Full Web Access Complete access to lovable.dev with all features and functionality	⚡ Fast & Responsive Optimized performance with Electron and hardware acceleration
💫 Smooth Animations Elegant loading screen with centered app icon and seamless transitions	🔒 Secure Context isolation and sandboxed environment for maximum security

---

🖼️ Screenshots

Loading Screen with Centered App Icon

The app features a beautiful loading screen with the app icon centered and animated:

• Stunning gradient background (dark navy to slate)
• Large centered app icon with pulse animation
• Smooth fade-in effects
• Animated loading dots
• "Initializing your creative workspace..." message

Main Application Window

• Clean, minimal interface
• Full-featured webview displaying lovable.dev
• Seamless integration with the Lovable platform
• Native macOS window controls

---

🚀 Quick Start

Get up and running in under 2 minutes:

# Clone the repository
git clone https://github.com/sumitduster-iMac/Lovable.git
cd Lovable

# Install dependencies
npm install

# Launch the app
npm start

That's it! The app will open with a beautiful loading screen featuring the centered app icon, then load lovable.dev.

---

📦 Installation

Prerequisites

• Node.js (v16 or higher) - Download
• npm or yarn - Comes with Node.js
• macOS (Intel-based Mac) - Required for building and running

Detailed Setup

1️⃣ Clone the Repository

git clone https://github.com/sumitduster-iMac/Lovable.git
cd Lovable

2️⃣ Install Dependencies

npm install

This will install:

• Electron framework
• Electron Builder (for packaging)
• Icon generation utilities

3️⃣ Run in Development Mode

npm start

The app will:

1. Generate required icons from SVG source
2. Launch the Electron application
3. Display the loading screen with centered app icon
4. Load lovable.dev in the webview

---

📦 Building the App

Build macOS Application (.app)

npm run build

Creates a macOS .app bundle in the dist folder:

• Ready to move to Applications folder
• Includes all assets and icons
• Optimized for Intel x64 architecture

Build DMG Installer

npm run build-dmg

Creates a distributable DMG file:

• Professional installer format
• Easy drag-and-drop installation
• Includes app icon and branding

---

🛠️ Development

Technology Stack

Technology	Purpose
Electron	Cross-platform desktop app framework
HTML/CSS/JS	Native web technologies, no frameworks needed
Modern CSS	Gradients, animations, and effects
SVG	Scalable app icon with beautiful gradient design

Project Structure

Lovable/
├── .github/
│   └── workflows/         # GitHub Actions CI/CD workflows
├── assets/
│   ├── icon.svg          # App icon (SVG source with gradient)
│   └── icon.png          # Generated PNG icon
├── scripts/
│   └── generate-icons.mjs # Icon generation utility
├── main.js               # Main Electron process
├── preload.js            # Preload script for security
├── index.html            # Main HTML with loading screen
├── styles.css            # Modern CSS with animations
└── package.json          # Project configuration

Key Files

• index.html: Contains the loading screen with centered app icon and webview
• styles.css: All styling including loading screen animations
• assets/icon.svg: Beautiful gradient app icon (Tahoe-style liquid glass design)
• main.js: Electron main process configuration

---

CI/CD

The project includes automated GitHub Actions workflows:

• Build and Release - Automatically builds the app on pushes and creates releases when version tags are pushed
• CI - Validates code quality, syntax, and project structure on every push and pull request

See .github/workflows/README.md for detailed workflow documentation.

To create a release:

# Update version in package.json, then:
git tag v1.0.1
git push origin v1.0.1

🎨 UI Enhancements

The app includes several UI enhancements over a basic web wrapper:

Loading Screen (⭐ New!)

• Centered App Icon: Large (200x200px) app icon with pulse animation
• Gradient Background: Dark navy gradient creating depth
• Smooth Animations:
  • Icon pulse effect (scale and opacity)
  • Title shimmer effect
  • Animated loading dots with staggered bounce
  • Fade-in entrance, fade-out exit
• Professional Feel: 2.5 second branded loading experience
• Drop Shadow: Icon has pink gradient glow for depth

Design Elements

1. App Icon Display - Prominently centered on loading screen with animations
2. Gradient Theme - Blue to pink gradient matching the app icon
3. Typography - System fonts with gradient text effects
4. Color Consistency - All UI elements match the icon's color scheme
5. Smooth Transitions - Hardware-accelerated animations
6. Modern Effects - Drop shadows, pulses, and shimmers

Visual Experience

┌────────────────────────────────────┐
│                                    │
│          [Loading Screen]          │
│                                    │
│        ╔════════════════╗          │
│        ║                ║          │
│        ║   [App Icon]   ║ ← Centered, Animated
│        ║                ║          │
│        ╚════════════════╝          │
│                                    │
│           L o v a b l e            │
│         (gradient text)            │
│                                    │
│            • • •                   │
│      (animated dots)               │
│                                    │
│  Initializing your creative...    │
│                                    │
└────────────────────────────────────┘
         ↓ Fades to ↓
┌────────────────────────────────────┐
│   lovable.dev full interface       │
│                                    │
└────────────────────────────────────┘

---

🤝 Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Maintain the existing code style
• Test on Intel Mac before submitting
• Update documentation for new features
• Ensure the app icon displays correctly

---

📝 License

MIT License - see LICENSE file for details

---

🌟 Acknowledgments

• App Icon: Beautiful Tahoe-style liquid glass heart design with gradient
• Lovable.dev: The amazing platform this app connects to
• Electron: Making cross-platform desktop apps possible

---

Made with ❤️ for the Lovable community

⬆ Back to Top