Screeny — Compose Multiplatform Wallpaper App

A modern, dark-first wallpaper client crafted with Compose Multiplatform for Android, iOS, Web (Wasm), macOS, Windows, and Linux.

🚀 Live Web App • Web Showcase • Desktop Showcase • Mobile Showcase • Features • Tech Stack • Getting Started • Shortcuts

---

🌐 Web Showcase (Kotlin/Wasm)

Screeny runs natively in modern web browsers powered by Kotlin/Wasm and Compose Multiplatform. It renders high-performance 60 FPS graphics directly to HTML5 canvas using Skiko, featuring an adaptive wide layout, 1:1 dark glass skeleton shimmers with zero layout shift, and in-browser asynchronous Blob streaming for direct wallpaper downloads.

• 🚀 Live Demo on GitHub Pages: https://shahidzbi4213.github.io/WallpaperApp-Cmp/
• 🎬 Product Walkthrough: ▶️ Watch HD Web Demo Video (media/screeny-web-demo.mp4)

---

🖥️ Desktop Showcase

Screeny features a desktop experience built to macOS, Windows, and Linux conventions with a persistent sidebar, instant search, numbered pagination, and high-resolution preview modes.

🔍 Immersive Full-Screen Lightbox Preview

Preview original high-resolution photography with a toggleable glassmorphic HUD, photographer metadata, direct profile links, and keyboard navigation.

---

🗂️ Browse Feed with Numbered Pagination & Detail Pane

Browse 16:9 wallpapers with quick-action hover buttons, contextual master-detail pane, and jump-to-page navigation.

---

📂 Curated Categories & Offline Favourites

Organize wallpapers into categories or save high-resolution favorites offline powered by multiplatform Room SQLite.

Curated Categories	Offline Favourites

---

📱 Mobile Showcase

Screeny delivers fluid edge-to-edge gesture navigation, infinite scrolling feeds, and shared element transitions on Android and iOS.

Curated Feed	Wallpaper Detail	Similar Wallpapers

---

✨ Key Features

• 🖥️ Tailored Desktop Experience (macOS, Windows, Linux):
  • Fixed glassmorphic sidebar with Screeny signature branding.
  • Persistent instant-search toolbar (⌘ / Ctrl + F).
  • Numbered page navigation (40 items/page) with direct jump-to-page dialog.
  • Quick-action card hover overlays and right-click context menus.
  • Native window size and position persistence.
  • Native OS wallpaper setting (osascript on macOS, PowerShell on Windows, gsettings on Linux).
• 🔍 Full-Screen Lightbox Viewer:
  • Displays original high-resolution imagery.
  • Click anywhere or press Space to toggle the floating glass HUD.
  • Photographer credit, resolution info, and quick profile navigation.
  • Seamless in-viewer feed browsing with ← / → arrow keys.
• 🌐 Web (Kotlin/Wasm):
  • High-performance Skiko canvas rendering running at 60 FPS in modern browsers via WebAssembly.
  • 1:1 pixel-perfect dark glass shimmer skeletons with zero layout shift during asset loading.
  • Responsive wide layout with master-detail side pane tailored for 16:9 HD wallpapers.
  • In-browser asynchronous Blob streaming for direct wallpaper downloads without server roundtrips.
  • Automated continuous deployment to GitHub Pages via GitHub Actions.
• 📱 Mobile UI (Android & iOS):
  • Infinite scroll feed powered by Paging 3 Multiplatform.
  • Gesture-driven bottom sheets, shared element transitions, and parallax scrolling.
• 🎨 Mesh Gradient Generator:
  • Interactive multi-point aurora gradient presets with instant wallpaper application and PNG export.
• 💾 Local Persistence:
  • Offline favourites, user preferences, and search history powered by Room (KMP SQLite).
• 🌐 Internationalization:
  • Multi-language support with runtime locale switching across 20+ languages.
• 🔒 Zero-Leak Secret Architecture:
  • Dynamic build-time config via local.properties or environment variables without committing secrets to git.

---

🛠️ Tech Stack & Architecture

┌─────────────────────────────────────────────────────────────┐
│                   Compose Multiplatform UI                  │
│   ┌───────────────────────────┐ ┌───────────────────────┐   │
│   │   Mobile UI (Navigation3) │ │ Dedicated Desktop/Web │   │
│   │       (Android & iOS)     │ │  (macOS/Win/Linux/Wasm)│  │
│   └─────────────┬─────────────┘ └───────────┬───────────┘   │
└─────────────────┼───────────────────────────┼───────────────┘
                  ▼                           ▼
┌─────────────────────────────────────────────────────────────┐
│                 Shared ViewModels & Domain Models           │
├─────────────────────────────────────────────────────────────┤
│         Koin DI (Annotations)  •  Mappers & UseCases       │
├─────────────────────────────────────────────────────────────┤
│   Ktor Client (OkHttp/Darwin/Js)│   Room Database (KMP SQLite)│
└─────────────────────────────────────────────────────────────┘

Layer	Library / Technology
UI Framework	Compose Multiplatform (Kotlin 2.4 / AGP 9.1)
Dependency Injection	Koin + Koin Annotations (KSP)
Networking	Ktor 3.5 (OkHttp on Android & Desktop, Darwin on iOS, Js/Wasm on Web)
Local Database	Room KMP 2.8 + SQLite
Paging	CashApp Multiplatform Paging 3
Image Loading	Landscapist + Coil 3
Design System	Glassmorphism (Ink950 dark space palette, Aurora gradients, frosted scrims)

---

🚀 Getting Started

1. Clone the repository

git clone https://github.com/Shahidzbi4213/WallpaperApp-Cmp.git
cd WallpaperApp-Cmp

2. Configure your Pexels API Key

Get a free API key at pexels.com/api. Copy local.properties.example to local.properties and paste your key:

PEXELS_API_KEY=your_pexels_api_key_here

(You can also set PEXELS_API_KEY as an environment variable).

---

3. Build & Run

🖥️ Desktop (macOS, Windows, Linux)

# Run the application
./gradlew :desktopApp:run

# Package native installers
./gradlew :desktopApp:packageDmg   # macOS (.dmg)
./gradlew :desktopApp:packageMsi   # Windows (.msi)
./gradlew :desktopApp:packageDeb   # Linux (.deb)

🌐 Web (Kotlin/Wasm)

# Run local development server with hot reload (http://localhost:8080)
./gradlew :composeApp:wasmJsBrowserDevelopmentRun

# Build production distribution for deployment (composeApp/build/dist/wasmJs/productionExecutable)
./gradlew :composeApp:wasmJsBrowserDistribution

🤖 Android

./gradlew :androidApp:assembleDebug

🍎 iOS

Open iosApp/iosApp.xcodeproj in Xcode and press Run, or run via Fleet / Android Studio.

---

⌨️ Desktop Keyboard Shortcuts

Shortcut	Action
⌘ / Ctrl + F	Focus search bar
⌘ / Ctrl + ,	Open Settings
Esc	Close preview / full-screen viewer / navigate back
Space	Toggle HUD controls in full-screen lightbox
← / →	Browse previous / next wallpaper in full-screen
F	Toggle favourite status

---

🧪 Testing

# Run multiplatform shared unit tests
./gradlew :composeApp:allTests

# Run Desktop UI smoke tests & headless preview renders
./gradlew :composeApp:desktopTest

---

👨‍💻 Author

Developed by Shahid Iqbal — Senior Android & Kotlin Multiplatform Engineer.

Connect: Portfolio • LinkedIn • GitHub • X (Twitter)

---

💖 Star the Repo

If you enjoy Screeny or find this Compose Multiplatform reference helpful, please give it a ⭐ on GitHub!

---

_{Built with ❤️ using Kotlin & Compose Multiplatform.}