A real-time web dashboard that monitors Google Play Store app listings by displaying periodically captured screenshots from the backend service.
It automatically updates live via Server-Sent Events (SSE) whenever the backend captures a new screenshot — no refresh or polling required.

🔗 PlayStore Monitoring Dashboard — Live Site

✅ Real-time updates using Server-Sent Events (SSE)
✅ Automatic refresh of app screenshots when backend updates the database
✅ Add new app via Play Store URL — triggers backend screenshot capture
✅ Sidebar with monitored apps
✅ Screenshot timeline with newest first
✅ Loading indicators for better UX
✅ Built with React + TypeScript + Vite

frontend/ ├── src/ │ ├── api/ │ │ └── api.ts # Axios API client │ ├── components/ │ │ ├── AddAppForm.tsx # Add new Play Store app │ │ ├── AppSidebar.tsx # Sidebar with app list │ │ ├── ScreenshotTimeline.tsx # Displays screenshots chronologically │ │ └── ScreenshotCard.tsx # Individual screenshot UI │ ├── pages/ │ │ └── Dashboard.tsx # Main dashboard logic │ ├── App.tsx │ ├── main.tsx │ └── index.css ├── package.json └── vite.config.ts 

Make sure you have:

• Node.js ≥ 18
• npm ≥ 9
• The backend service running at http://56.228.15.190

npm install

Configure environment variables

VITE_API_URL=http://56.228.15.190/api/ 

npm run dev 

Then open your browser at: 👉 http://localhost:5173

1. Paste a Play Store URL (e.g. https://play.google.com/store/apps/details?id=com.activision.callofduty.shooter)

2. Enter an app name

3. Click “Add App”

The backend captures a screenshot, saves metadata to the database, and streams the new image to the dashboard.

• The first app in the sidebar loads automatically on page load.
• Screenshots are displayed in descending order (newest first).
• When the backend captures new screenshots (cron job), the timeline updates instantly via SSE.

No polling or manual refresh — the frontend subscribes to the backend’s SSE stream:

GET /api/events 

Whenever a new screenshot is saved, the backend broadcasts a JSON event like:

{ "appId": "com.activision.callofduty.shooter", "appName": "Call of Duty Mobile", "imageUrl": "/public/screenshots/com.activision.callofduty.shooter/...png", "capturedAt": "2025-10-29T12:50:32.345Z" } 

The frontend receives and renders it immediately.

Dashboard UI

+-----------------------------------------------------+ | Monitored Apps | Play Store Monitoring | |-----------------------|------------------------------| | Call of Duty Mobile | [Add App Form] | | Clash of Clans | [Screenshot Timeline] | | ... | [Latest Screenshot ↓] | +-----------------------------------------------------+ 

• The first app in the list automatically loads on page initialization.
• The system uses Server-Sent Events (not WebSockets) for simplicity and efficiency.
• No setInterval or polling is used anywhere — updates are push-based.
• When the backend cron captures new screenshots, the dashboard reflects them in real time.
• You can extend this UI with Material UI, Tailwind, or Recharts for analytics.

• 🕓 “Last updated” indicator for each app
• 📊 Diff-viewer (highlight what changed between screenshots)
• 🗑 Screenshot cleanup / retention control
• 🧭 Filter and search apps
• 🧱 Authentication & user management