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 👇