Screenshots for Google Play Store

Required Screenshots

You need to capture 2-8 screenshots from the deployed PWA at https://app.placebo.mk

How to Capture Screenshots

Using Chrome DevTools (Recommended)

Open Chrome browser
Navigate to https://app.placebo.mk
Press F12 to open DevTools
Click the device toolbar icon (or press Ctrl+Shift+M)
Select device: Pixel 5 (1080 x 2340)
Capture each screen:
- Click the three dots menu in device toolbar
- Select "Capture screenshot"
- Save as PNG in this directory

Recommended Screenshots

Capture these key screens (in order):

screenshot-1-home.png - Homepage with hero article and latest articles
screenshot-2-article.png - Article detail page showing full article
screenshot-3-archive.png - Archive page with article grid
screenshot-4-live-blogs.png - Live blogs listing page
screenshot-5-live-blog-detail.png - Live blog detail with real-time updates
screenshot-6-categories.png - Category page (Sport/Art/Science)

Google Play Requirements

Format: PNG or JPEG (PNG recommended)
Minimum dimensions: 320px (shortest edge)
Maximum dimensions: 3840px (longest edge)
Aspect ratio: 16:9 or 9:16 recommended
File size: Under 8MB per screenshot
Quantity: Minimum 2, maximum 8

Current Device Settings

Using Pixel 5 emulation:

Resolution: 1080 x 2340 pixels
Pixel ratio: 2.75
Portrait orientation
This meets Google Play requirements perfectly

After Capturing

Once you've captured the screenshots:

Name them as: screenshot-1.png, screenshot-2.png, etc.
Place them in this directory (pwa/public/screenshots/)
Optionally add them to the PWA manifest for better install UX
Upload to Google Play Console when creating the app listing

Optional: Add to Manifest

If you want screenshots to appear in the browser install prompt, update vite.config.ts:

manifest: {
  // ... other config
  screenshots: [
    {
      src: '/screenshots/screenshot-1.png',
      sizes: '1080x2340',
      type: 'image/png',
      form_factor: 'narrow',
      label: 'Homepage with latest articles',
    },
    // Add more screenshots here
  ],
}

Tips for Great Screenshots

✅ Use actual content (not Lorem Ipsum)
✅ Show the app in use with real articles
✅ Capture different sections to show variety
✅ Make sure text is readable
✅ Use light mode (default theme)
✅ Clear navigation bar and UI elements
❌ Don't include device frames (Google Play adds them)
❌ Don't add text overlays (save for marketing images)
❌ Don't capture error states or empty screens

2.7 KiB Raw Blame History