ShadeWin

Fast live predictions with instant results and synced rounds.

ShadeWin is a mobile-first web app for timed prediction rounds where users place a choice before the countdown ends and see the result instantly when the round closes. It is designed for high-frequency live participation, with a server-authoritative timer, history tracking, and an admin console for managing rounds, results, and platform health.

Business Goals

  • Reach 5,000 registered users within 90 days of launch.
  • Achieve a 35% first-session prediction submission rate within 60 days.
  • Maintain at least 25% weekly active user retention by week 8.
  • Keep admin result publishing errors below 0.5% of rounds.
  • Reduce support tickets related to sync or late-submission issues by 40% after release 1.0.

User Goals

  • Let users understand the current round status in under 3 seconds.
  • Allow predictions to be submitted in one tap or two taps on mobile.
  • Show clear feedback when a prediction is accepted, rejected, or too late.
  • Reveal round outcomes instantly without manual refresh.
  • Provide a reliable history view so users can review past rounds and their own activity.

Non-Goals

  • No real-money wagering, deposits, payouts, or financial settlement.
  • No social feed, chat, or community messaging in the initial release.
  • No complex recommendation engine or predictive analytics for users.
  • No native mobile apps in phase 1; web-first only with PWA-ready structure.

Casual Player Rina, 27 - Rina opens the app on her phone during short breaks and wants a quick, clear way to join live prediction rounds. She values speed, simplicity, and immediate feedback more than deep statistics.

Casual Player Rina, 27

  • As a casual user, I want to see the countdown and current round status immediately, so that I know whether I can still participate.
  • As a casual user, I want to choose a prediction mode in one tap, so that I can submit before the round closes.
  • As a casual user, I want to see the result reveal right after the timer ends, so that I know whether my prediction matched.

Returning User Ahmed, 34 - Ahmed uses the app regularly and checks his history to understand patterns in his own predictions. He wants a reliable account experience and an easy way to review prior rounds.

Returning User Ahmed, 34

  • As a returning user, I want to filter my history by today, 7 days, or custom range, so that I can review activity quickly.
  • As a returning user, I want to see the status of each round and my submitted choice, so that I can confirm what I entered.
  • As a returning user, I want login to persist securely, so that I do not need to authenticate every session.

Admin Operator Neha, 38 - Neha runs live rounds, publishes results, and monitors the system during peak traffic. She needs strict controls, audit logs, and health visibility to prevent mistakes.

Admin Operator Neha, 38

  • As an admin, I want to create and pause rounds, so that I can manage live timing safely.
  • As an admin, I want every result edit to be audited, so that changes are traceable and reversible in review.
  • As an admin, I want to see system health and active round sync status, so that I can spot issues before users do.

Live Round and Countdown · High priority

  • Show the active round, server-synced countdown, and round state with no page reloads.
  • The timer must be driven by server time and corrected on client connect, reconnect, and tab focus.
  • The screen must show states for upcoming, open, closing, closed, and result revealed.
  • If synchronization fails, show a stale or offline banner with the last successful sync time.
  • Countdown drift greater than 1 second must trigger an automatic resync from the server.

Prediction Submission · High priority

  • Allow users to submit exactly one prediction per round with idempotent behavior and validation.
  • Support three prediction modes: color, number bucket 0 to 4 or 5 to 9, and big/small.
  • Reject late submissions with a clear message showing the round close time and current server time.
  • Repeated taps or retries on the same round must not create duplicate predictions.
  • Store choiceType, choiceValue, submittedAt, and status for each prediction.
  • Display submission pending, accepted, rejected, or already submitted states in the UI.

History and Round Details · Medium priority

  • Provide a compact view of the last 20 rounds and a detailed per-round inspection path.
  • Show round number, scheduled times, final result, and the user’s prediction if present.
  • Support filters for today, last 7 days, and custom date range with validation.
  • Load history incrementally and preserve scroll position when navigating back from details.
  • Handle missing results or delayed publishing by displaying a clear pending state.

Authentication and Settings · Medium priority

  • Enable secure sign-in and configurable notifications and account controls.
  • Support phone OTP and email login with rate limiting and verification expiry.
  • Allow notification opt-in and preference edits for push and round reminders.
  • Provide account deletion with confirmation, grace-period messaging, and data export request guidance.
  • Persist session securely and handle token expiry without losing the current screen state.

Admin Dashboard and Auditability · High priority

  • Provide role-based admin controls for round creation, publishing, editing, pausing, and health monitoring.
  • Restrict admin routes by role and verify permissions on every server action.
  • Log every create, update, publish, pause, and delete action to an immutable audit trail.
  • Allow editing a published result only through an explicit override flow with reason capture.
  • Expose operational health indicators for API latency, WebSocket or SSE connectivity, and Redis freshness.

First-Time User Experience

  • Open the app and land on the Live Round screen with the current round state visible immediately.
  • See a server-synced countdown, result area, and the three prediction modes without scrolling.
  • Sign in with phone OTP or email if a prediction requires authentication.
  • Choose a prediction mode, tap submit, and receive inline confirmation within seconds.
  • If the round has closed, see a late-submission explanation and the next round countdown.
  • Time to value target: a new user should understand the current round and attempt a prediction within 15 seconds of landing.

1. View Current Round

  • The app opens on a mobile-first live view showing the active round, status, and countdown that matches server time.
  • Use a visible round state label and time remaining badge.
  • Auto-resync on tab focus, reconnect, or after suspected drift.
  • Show a stale indicator if the client has not received updates recently.

2. Choose Prediction Mode

  • Users tap one of the prediction modes and then pick the specific choice value.
  • Color mode should present only the allowed colors for that round format.
  • Number bucket mode must clearly show 0–4 and 5–9 options.
  • Big/Small mode should use large touch targets and high contrast labels.

3. Submit Before Close

  • Submission is validated against the server state and accepted only while the round is open.
  • Block duplicate submissions on the same round with idempotent server logic.
  • If the round closes during tap or network delay, return a friendly late message.
  • Show a pending state while the request is in flight and prevent double-taps.

4. Reveal Result Instantly

  • When the timer ends, the result area updates immediately and shows the final outcome.
  • Push updates through WebSockets or SSE without page reload.
  • Display revealedAt and any relevant round metadata.
  • If the connection drops, refresh from the API and mark the view stale until synced.

5. Review History and Account

  • Users can inspect recent rounds, filter their history, and manage settings.
  • Default to the last 20 rounds with pagination if needed.
  • Use clear validation for custom date ranges and empty states.
  • Provide account deletion and notification controls from settings without burying them.

Advanced and Edge Features

  • Reconnect-aware live updates that restore the current round state after network interruption.
  • Custom date-range history filtering with timezone-aware boundaries.
  • Admin override publishing with mandatory reason and audit log entry.
  • Health dashboard for monitoring live state freshness and notification delivery.
  • Graceful empty states for no history, no active round, or no notification permission.

Design and Accessibility Principles

  • Mobile-first layout with oversized primary buttons and thumb-friendly spacing.
  • High-contrast color system with accessible text contrast on all states.
  • Reduced-motion friendly countdown transitions with nonessential animation disabled.
  • Sticky action area for submit controls so key actions stay visible on small screens.
  • Clear offline, stale, pending, success, and error banners with plain language.

Rina opens ShadeWin during a lunch break and immediately sees the live round countdown. She taps a prediction mode, makes her choice, and gets instant confirmation that her entry was accepted before the round closes.

A few seconds later, the timer ends and the result appears without refresh. Rina can see whether her prediction matched, then checks the History screen to review the last few rounds and how her choices performed.

On the operations side, Neha uses the admin dashboard to create rounds, publish results, and monitor sync health. Because every change is audited and every round is server-authoritative, the team can run live experiences with far fewer mistakes and support issues.

User-Centric Metrics

  • At least 80% of active users understand the current round state within 3 seconds of landing.
  • At least 35% of authenticated first-time users submit a prediction in their first session.
  • Median prediction submission success time under 1.5 seconds on 4G mobile.
  • At least 95% of users see result reveal within 2 seconds of server publish.
  • Less than 2% of sessions show stale or offline sync state for more than 10 seconds.

Business Metrics

  • Reach 5,000 sign-ups in 90 days.
  • Achieve 25% weekly retention by week 8.
  • Convert 40% of registered users into repeat participants within 30 days.
  • Keep admin incident rate below 1 major issue per 1,000 rounds.
  • Drive at least 20% month-over-month growth in active users after launch.

Technical Metrics

  • 99.9% uptime for the live app and API.
  • P95 API response time under 300 ms for round state and history endpoints.
  • WebSocket or SSE reconnect success rate above 98%.
  • Zero unauthorized admin actions in audit reviews.

Tracking Plan

  • track_round_viewed with roundId, state, and serverTimeOffset.
  • track_prediction_mode_selected with choiceType and deviceType.
  • track_prediction_submitted with roundId, choiceType, latency, and outcome.
  • track_prediction_rejected with reason code such as late, duplicate, or invalid.
  • track_result_revealed with roundId and revealDelayMs.
  • track_sync_stale_shown with connection status and staleDuration.
  • track_admin_action with actionType, targetId, and reason.

Technical Needs

  • Next.js 14 or newer with TypeScript and app router for the frontend and server components.
  • Node.js backend with REST endpoints plus WebSockets or Server-Sent Events for live updates.
  • PostgreSQL as the system of record, using Prisma ORM and Zod validation.
  • Redis for live round state, countdown cache, idempotency keys, and pub or sub events.
  • Tailwind CSS for responsive UI and accessible component styling.
  • Sentry for error and performance monitoring.
  • PostHog or GA4 for analytics event capture and funnel reporting.

Integration Points

  • OTP provider such as Twilio Verify for phone login.
  • Email login and transactional email through Resend or SendGrid.
  • Push notifications through OneSignal or Firebase Cloud Messaging.
  • Hosting and deployment through Vercel for frontend and a container platform such as Render, Railway, or Fly.io for the backend.
  • Optional authentication session storage through NextAuth or custom JWT cookies with secure httpOnly handling.

Data Storage & Privacy

  • Store only necessary personal data and separate auth identifiers from profile data.
  • Encrypt sensitive data in transit with HTTPS and use secure cookies for sessions.
  • Implement GDPR and CCPA-friendly account deletion and data export workflows.
  • Record audit logs for all result changes and admin overrides with immutable history.
  • Add rate limiting and OTP abuse protection to reduce account takeover risk.

Scalability & Performance

  • Use Redis to offload hot round state reads and reduce PostgreSQL pressure during live traffic spikes.
  • Cache the current round payload and invalidate on publish or pause events.
  • Use server push only for active clients and fall back to polling for degraded connections.
  • Optimize the history query with indexes on userId, roundId, scheduledStart, and state.

Potential Challenges

  • Challenge: timer drift across devices. Mitigation: rely on server time offsets and resync on reconnect, focus, and every fixed interval.
  • Challenge: duplicate prediction submissions from retries. Mitigation: enforce unique userId plus roundId constraint and idempotency keys.
  • Challenge: late publish or delayed result reveal. Mitigation: show a clear pending state, log publish timestamps, and emit real-time update events.
  • Challenge: admin mistakes during live edits. Mitigation: require explicit confirmation, reason capture, and immutable audit logging.
  • Challenge: notification delivery inconsistency. Mitigation: store preference state, retry failed sends, and surface delivery status in admin health tools.

Team & resourcing - Small cross-functional team: 2 full-stack engineers, 1 product designer, part-time QA, and part-time PM.

Phase 1: MVP Live Rounds · Weeks 1 to 3

  • Next.js mobile-first shell with Live Round screen.
  • Server-authoritative round state API and countdown sync.
  • Prediction submission flow with idempotent validation.
  • Basic auth with phone OTP or email login.
  • Seeded demo data and a simple deployment pipeline.

Phase 2: History and Settings · Weeks 4 to 5

  • History screen with last 20 rounds and filters.
  • Per-round detail view and empty states.
  • Settings screen for notification opt-in and account deletion.
  • Accessibility pass for contrast, labels, and keyboard support.
  • Analytics and Sentry instrumentation.

Phase 3: Admin Dashboard · Weeks 6 to 7

  • Role-based admin dashboard with create, publish, pause, and edit flows.
  • Audit log for all result changes and overrides.
  • Health monitoring for live sync, Redis freshness, and delivery status.
  • Secure server-side permission checks for all admin routes.

Phase 4: Hardening and Launch · Week 8

  • Load testing and latency tuning.
  • Error handling for stale, offline, and reconnect states.
  • Production deployment runbook and seeded demo environment.
  • Final QA, analytics validation, and launch checklist.

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a mobile-first web app called ShadeWin for live timed prediction rounds.

Use Next.js 14+ with TypeScript, Tailwind CSS, Prisma, PostgreSQL, Redis, Zod, and a Node.js backend. Create a production-ready scaffold with realistic components, API routes, database schema, sample pages, seeded demo data, and a simple deployment path.

Core product requirements:
1. Live Round screen with server-synced countdown, current round status, prediction mode selection, submit button, submission state, and instant result reveal area.
2. History screen showing the last 20 rounds with filters for today, last 7 days, and custom date range, plus a per-round detail view.
3. Auth screen supporting phone OTP or email login.
4. Settings screen for notification opt-in, user preferences, and account deletion.
5. Admin dashboard for role-based round creation, publishing results, editing results with audit log, pausing rounds, and health monitoring.

Data model:
User, Round, Prediction, Result, NotificationPreference, AuditLog, AdminAction.
Prediction must belong to one User and one Round, be idempotent per round, and store choiceType, choiceValue, submittedAt, and status. Round stores scheduledStart, scheduledEnd, state, and publishedResult. Result stores number, color, bigSmall, and revealedAt.
Add proper indexes and unique constraints, especially userId plus roundId unique on Prediction.

Functional behavior:
Server-authoritative countdown and round state, no full page reloads, clear late-submission validation, stale or offline state when sync fails, accessible high-contrast mobile-first UI, role-based admin access, audit logging for all result changes, and clean error handling.

Implementation details:
Create reusable UI components for countdown, round status badge, prediction mode selector, submit state, history list, filters, auth forms, settings toggles, admin forms, audit log table, and health cards.
Create API routes or server actions for current round, submit prediction, history queries, auth, settings updates, admin round CRUD, result publishing, result editing, pause/resume, and audit retrieval.
Add WebSockets or Server-Sent Events for real-time updates to the Live Round screen and result reveal without reloads.
Use Sentry for errors and PostHog or GA4 analytics events.
Use OneSignal or Firebase Cloud Messaging integration stubs for push notifications.
Include seeded demo content for users, rounds, predictions, results, and audit logs.
Make the design clean, responsive, accessible, and optimized for mobile.
Output a working scaffold with sensible file structure, env examples, README setup steps, and deployment guidance.

Business Idea

Build a mobile-first web app called ShadeWin for live timed prediction rounds. The product shows a countdown to the next round, lets users pick a prediction mode (color, number bucket 0–4 or 5–9, and big/small), submits predictions before the round closes, and reveals the result instantly when the timer ends. Core screens: 1) Live Round screen with server-synced countdown, round status, primary prediction buttons, submit state, and result reveal area 2) History screen with last 20 rounds, filters by today / 7 days / custom range, and per-round detail 3) Auth screen using phone OTP or email login 4) Settings screen for notification opt-in, preferences, and account deletion 5) Admin dashboard for creating rounds, publishing results, editing with audit log, pausing rounds, and monitoring health Data model: User, Round, Prediction, Result, NotificationPreference, AuditLog, AdminAction Each Prediction must belong to one User and one Round, be idempotent per round, and store choiceType, choiceValue, submittedAt, and status. Round stores scheduledStart, scheduledEnd, state, and publishedResult. Result stores number, color, bigSmall, and revealedAt. Technical stack: Next.js + TypeScript frontend, Node.js backend, PostgreSQL database, Redis for live state/cache, WebSockets or Server-Sent Events for real-time updates, Tailwind CSS for UI, Zod for validation, Prisma for ORM, Sentry for error tracking, PostHog/GA4 for analytics, and OneSignal or Firebase Cloud Messaging for push notifications. Implementation requirements: - Server-authoritative countdown and round state - Client UI must update without full reloads - Handle late submissions with clear validation messages - Show stale/offline state if sync fails - Make the design clean, high-contrast, mobile-first, and accessible - Add role-based admin access and audit logging for all result changes - Include seeded demo data and a simple deployment path Build the full app scaffold with realistic components, API routes, database schema, and sample pages so it can be extended into production. Working app network website Bana do website banaa do

Make My PRD

Design by The Resonance | Powered by GPC – The AI Transformation Company

    PRD: Build a mobile-first web app called ShadeWin