How I Built a Free Tool to Generate Play Store Screenshots 🎨

Hey dev community! 👋

The Problem

As a developer, I've always found creating Play Store screenshots painful. Either spend hours in Figma/Photoshop or settle for basic screenshots. Neither option felt right.

The Solution

I built a simple tool that generates Play Store feature graphics in seconds - no design skills needed. Here's how it works:

Key Features

1. Perfect Dimensions: Auto-exports at 1024x500px
2. Templates: Start with professional layouts

Tech Stack

• Next.js 14 (App Router)
• TypeScript
• shadcn/ui
• Tailwind CSS
• Sharp for image processing

Implementation Highlights

interface PlayStoreTemplate { id: string; name: string; category: 'game' | 'app' | 'business' | 'education'; thumbnail: string; config: { background: BackgroundConfig; elements: PlayStoreElement[]; safeZone: boolean; deviceFrame?: DeviceFrameConfig; }; } interface PlayStoreElement { type: 'text' | 'image' | 'shape' | 'screenshot'; id: string; props: { x: number; y: number; width?: number; height?: number; content?: string; style?: ElementStyle; constraints?: SafeZoneConstraints; }; } 

Try It Out

The tool is completely free: gleam.so

What's Next

• More templates
• Additional platforms
• Advanced customization
• API access

Let me know what features you'd like to see! Drop your suggestions in the comments 👇