System Requirements Document for giant-hy

1. Introduction

LLxSCORPION GAMING (where LL = LETHAL LEGEND) is a production-ready, full-stack gaming clan website for a competitive BGMI/PUBG mobile esports clan. The product presents the clan's identity, roster, live and recorded YouTube presence, updates, and rules to the public, and gives registered users a path to apply for clan membership, manage their profile, receive notifications, and participate in a realtime community chat. A protected admin dashboard lets clan leadership manage members, applications, characters, YouTube configuration, live stream status, updates, chat moderation, rules, and social links/settings.

The audience is competitive mobile esports players and viewers aged roughly 16–28 who live in Discord, YouTube, and Twitch. The register is aspirational, aggressive, and cinematic: visitors should feel like operators inside a game, not users of a website. Trust is earned through real numbers and real squad slots — never fabricated metrics.

The site is delivered as a responsive web application (desktop and mobile) with a premium dark BGMI/PUBG esports aesthetic: black background, red neon and electric-blue accents, HUD/glass effects, cinematic visuals, particles, and smooth lightweight animations.

2. System Overview

LLxSCORPION GAMING is a single first-party web application backed by Supabase (Auth, PostgreSQL, Storage, Realtime). It has three active human roles: Visitor / Fan, Registered Member / Applicant, and Clan Admin.

Public surfaces (Home, About, Squad, Live, YouTube, Updates, Rules) are reachable without an account. Identity-bearing surfaces (Join Clan, Profile, Notifications, Community Chat) require an authenticated session. The Admin dashboard is restricted to the Clan Admin role and its routes are protected. Login and Sign Up are the anonymous entry points that establish identity.

The squad is a hard-bounded roster of exactly five slots: Slot 1 is permanently LLxSCORPION — Founder/Leader; Slots 2–5 begin OPEN and are filled only through the accepted-application flow, which assigns the first free slot and never exceeds five. Join Clan applications require a gaming name that begins with LLx; submissions that fail this rule are blocked with a clear error. Applications remain PENDING until the admin accepts or rejects them.

YouTube integration is configurable: channel, official subscribe link, API subscriber count with a clearly labeled manual fallback, latest videos, and a configurable YouTube Live embed/status. The system never fakes viewers or subscribers, and no static-only buttons or fabricated data are permitted anywhere.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The site is a first-party application. All public content surfaces, the member workspace, and the admin dashboard are owned and rendered by the application itself. Supabase provides identity, database, storage, and realtime transport; YouTube provides channel, video, subscriber, and live-stream data through its public API and embeds. The application never claims ownership of YouTube content or metrics.

Identity and access. Visitors browse public surfaces anonymously. To apply to the clan, edit a profile, receive notifications, or use community chat, a user must register and log in — this is application-owned identity, established through Sign Up and verified through Login. The Admin dashboard is protected and reachable only by an authenticated Clan Admin; admin routes are guarded server-side.

Current vs. future. Everything described in this document is current. No future-horizon features are committed. Where the source is silent (e.g., specific hosting, CI, or analytics), no capability is invented.

Explicit exclusions. No fake data, no fake viewers or subscribers, and no static-only buttons. The generic indigo/blue-on-white SaaS template look is forbidden.

2b. Source Content Inventory

Not applicable — no reference directive with content_source authority was supplied.

2c. Page Content and Component Coverage

Home

• Information / state: Hero wordmark "LLxSCORPION GAMING", tagline "LL — LETHAL LEGEND", slogan "BORN TO PLAY. BUILT TO DOMINATE.", Join and Watch CTAs, character slider, live telemetry strip (real subscriber count, live status, squad slots filled), latest update ticker.
• Primary actions: Join Clan (routes to Join Clan), Watch Live (routes to Live), open character slider, navigate to any public surface.
• Supporting actions: Subscribe to YouTube channel, open latest update.
• Domain entities: Character (image, order), Squad slot summary, YouTube channel metrics, Live status, Update.
• Component responsibilities: Hero scene (WebGL scorpion core on desktop; static render under 768px or reduced motion), character slider (admin-managed order), telemetry strip (tabular mono, MANUAL tag when fallback in use), sticky navbar.
• States: Loading (skeleton for slider and telemetry), empty (no characters uploaded → placeholder frame with admin hint), success (slider and telemetry render), error (YouTube API unavailable → labeled manual fallback; storage error → retry), recovery (retry fetch; fallback values clearly labeled).

About

• Information / state: Clan identity, "LL — LETHAL LEGEND" meaning, mission and competitive context.
• Primary actions: Navigate to Squad, Join Clan, YouTube.
• Supporting actions: Open social links.
• Domain entities: Clan profile content (admin-editable).
• Component responsibilities: HUD-framed content panels, social link row.
• States: Loading (content skeleton), empty (admin prompt if content unset), success, error (retry), recovery.

Squad

• Information / state: Exactly five slots. Slot 1 permanently "LLxSCORPION — Founder/Leader". Slots 2–5 initially OPEN. Member profiles for filled slots.
• Primary actions: Open a member profile, click "+ OPEN SLOT" (routes to Join Clan).
• Supporting actions: Horizontal scroll on mobile.
• Domain entities: Squad slot (index, status, member reference), Member profile.
• Component responsibilities: Five-slot rail (Slot 1 solid red frame; Slots 2–5 dashed cyan frames), member profile card, occupancy gauge (5 segments).
• States: Loading (slot skeletons), empty (all of Slots 2–5 OPEN), success, error (retry), recovery.

Live

• Information / state: Configurable YouTube Live embed and live status; red pulsing LIVE dot when live.
• Primary actions: Watch live stream (embed), open on YouTube.
• Supporting actions: Navigate to YouTube page.
• Domain entities: Live status (live/offline), Live embed configuration.
• Component responsibilities: Live embed frame, status bar with scanning line, offline state panel.
• States: Loading, empty/offline (clear "not live" state, no fake viewer counts), success (embed playing), error (embed unavailable → link to channel), recovery.

YouTube

• Information / state: Configurable channel, official subscribe link, API subscriber count with clearly labeled manual fallback, latest videos list.
• Primary actions: Subscribe (opens official subscribe link), watch a video, open channel.
• Supporting actions: Navigate to Live.
• Domain entities: Channel configuration, subscriber count (API or manual, labeled), video (title, thumbnail, link, published date).
• Component responsibilities: Subscriber readout (tabular mono, MANUAL tag when fallback), video grid, subscribe CTA.
• States: Loading, empty (no videos returned), success, error (API failure → labeled manual fallback; never fabricated), recovery.

Updates

• Information / state: Editable clan updates (title, body, date), newest first.
• Primary actions: Read an update, open detail.
• Supporting actions: Navigate to Rules, Join Clan.
• Domain entities: Update (title, body, published date, author).
• Component responsibilities: Update list, marquee ticker for latest update.
• States: Loading, empty (no updates published), success, error (retry), recovery.

Rules

• Information / state: Maintained clan rules (admin-editable).
• Primary actions: Read rules.
• Supporting actions: Navigate to Join Clan.
• Domain entities: Rule (title, body, order).
• Component responsibilities: Rules list with HUD framing.
• States: Loading, empty (admin prompt), success, error (retry), recovery.

Join Clan

• Information / state: Application form (gaming name, additional applicant details), current application status (PENDING / ACCEPTED / REJECTED), assigned slot when accepted.
• Primary actions: Submit application; view status.
• Supporting actions: Navigate to Profile, Notifications.
• Domain entities: Application (applicant, gaming name, status, submitted date, decision), Squad slot assignment.
• Component responsibilities: Application form with inline LLx validation error, status panel, slot assignment display.
• States: Loading, empty (no application yet → form), success (submitted → PENDING), error (validation failure with clear message; server error → retry), recovery (edit and resubmit while PENDING; view decision after resolution).
• Access: Authenticated (role_restricted).

Profile

• Information / state: Member's own profile fields (display name, gaming name, avatar, bio, social handles).
• Primary actions: Edit and save profile.
• Supporting actions: Navigate to Notifications, Community Chat.
• Domain entities: Member profile.
• Component responsibilities: Profile form, avatar upload (Supabase Storage), save/cancel controls.
• States: Loading, empty (first-time profile), success (saved confirmation), error (validation or upload failure → retry), recovery.
• Access: Authenticated (role_restricted).

Notifications

• Information / state: Member notifications, including application status changes.
• Primary actions: Open a notification, mark as read.
• Supporting actions: Navigate to Join Clan, Profile.
• Domain entities: Notification (recipient, type, payload, read state, created date).
• Component responsibilities: Notification list, unread badge (navbar bell).
• States: Loading, empty (no notifications), success, error (retry), recovery.
• Access: Authenticated (role_restricted).

Community Chat

• Information / state: Realtime "LLxSCORPION COMMUNITY CHAT" message stream.
• Primary actions: Send a message; report a message.
• Supporting actions: Scroll history, view sender profile.
• Domain entities: Chat message (author, body, timestamp, moderation state), report.
• Component responsibilities: Realtime message list (Supabase Realtime), composer with anti-spam feedback, XSS-safe rendering, moderation indicators.
• States: Loading, empty (no messages yet), success (message delivered), error (rate-limited → clear message; connection lost → reconnect), recovery.
• Access: Authenticated (role_restricted).

Admin

• Information / state: Admin-only dashboard with sections: members, applications, characters, YouTube, live stream, updates, chat moderation, rules, social links/settings.
• Primary actions: Accept/reject applications; manage members and squad slots; upload/reorder/delete characters; configure YouTube channel, subscribe link, subscriber count (API or manual fallback), latest videos, and live embed/status; edit updates, rules, and social links/settings; moderate chat.
• Supporting actions: Navigate between dashboard sections.
• Domain entities: Member, Application, Character, YouTube configuration, Live configuration, Update, Rule, Social link, Settings, Chat moderation record.
• Component responsibilities: Left-rail navigation (240px), dense data grids with ruled rows and inline status pills, upload/reorder controls, configuration forms.
• States: Loading, empty (no pending applications, no characters), success (action confirmation), error (permission denied → redirect to Login; validation error → inline), recovery.
• Access: Authenticated + Clan Admin (role_restricted).

Login

• Information / state: Email/password sign-in form; error messaging.
• Primary actions: Sign in; navigate to Sign Up.
• Supporting actions: Password reset entry.
• Domain entities: Session.
• Component responsibilities: Auth form (Supabase Auth), error display.
• States: Loading, empty (form), success (redirect to intended destination), error (invalid credentials → clear message), recovery.
• Access: Public (none).

Sign Up

• Information / state: Registration form (email, password, display name).
• Primary actions: Create account; navigate to Login.
• Supporting actions: Accept terms/rules link.
• Domain entities: Account, Session.
• Component responsibilities: Registration form (Supabase Auth), password strength feedback, error display.
• States: Loading, empty (form), success (account created → redirect to Join Clan or Profile), error (email in use, weak password → clear message), recovery.
• Access: Public (none).

3. Functional Requirements

Each requirement is a distinct story point with provenance, lifecycle facts, and observable acceptance.

FR-01 — Clan identity and branding (explicit) As a Visitor / Fan, I should see the site presented as LLxSCORPION GAMING with the meaning LL = LETHAL LEGEND clearly communicated, so that I understand the clan's identity.

• Trigger: any page load.
• Observable result: wordmark and tagline render consistently across surfaces.
• Failure/recovery: if content fails to load, a retry is offered.
• Continuation: navigation to About, Squad, or Join Clan.

FR-02 — Premium dark esports visual style (explicit) As a Visitor / Fan, I should experience a premium dark BGMI/PUBG esports aesthetic — black background, red neon and electric-blue accents, HUD/glass effects, cinematic visuals, particles, and smooth lightweight animations — so that the site feels like a competitive esports product.

• Trigger: any page load.
• Observable result: dark canvas with red/cyan accents, HUD panels, particles, and lightweight motion.
• Failure/recovery: motion degrades gracefully under prefers-reduced-motion.
• Continuation: uninterrupted browsing.

FR-03 — Responsive layout (explicit) As a Visitor / Fan, I should be able to use the site comfortably on desktop and mobile, so that I can browse from any device.

• Trigger: viewport change.
• Observable result: layout adapts; heavy WebGL degrades to a static render under 768px.
• Failure/recovery: fallback render if WebGL unavailable.
• Continuation: full feature access on both form factors.

FR-04 — Supabase-backed platform (explicit) As the system, I should use Supabase for Auth, PostgreSQL database, storage, and realtime chat, so that identity, content, media, and chat are durable and consistent.

• Trigger: any authenticated or data-backed operation.
• Observable result: data persists in PostgreSQL; media in Storage; chat over Realtime.
• Failure/recovery: transient errors surface with retry.
• Continuation: normal operation resumes.

FR-05 — Sticky navbar (explicit) As a Visitor / Fan, I should see a sticky navbar with destinations Home, About, Squad, Join Clan, Live, YouTube, Updates, Rules, Login/Profile/Admin, so that I can navigate the site from anywhere.

• Trigger: scroll.
• Observable result: navbar remains visible; active item marked with a red underline; Login/Profile/Admin reflects session state.
• Failure/recovery: if session state is unknown, Login is shown.
• Continuation: navigation to any destination.

FR-06 — Hero section (explicit) As a Visitor / Fan, I should see a hero with "LLxSCORPION GAMING", "LL — LETHAL LEGEND", "BORN TO PLAY. BUILT TO DOMINATE.", and Join and Watch buttons, so that I immediately understand the clan and can act.

• Trigger: Home load.
• Observable result: hero renders with both CTAs functional.
• Failure/recovery: if the hero scene fails, a static render is shown.
• Continuation: Join routes to Join Clan; Watch routes to Live.

FR-07 — Character slider with admin management (explicit) As a Clan Admin, I should be able to upload, reorder, and delete character slider images, so that the Home slider reflects current clan characters.

• Trigger: admin action in the characters section.
• Observable result: slider updates in the stored order; deletions remove the item.
• Failure/recovery: upload/storage errors surface with retry.
• Continuation: slider reflects the new state on Home.

FR-08 — Five-slot squad with permanent Slot 1 (explicit) As a Visitor / Fan, I should see exactly five squad slots, with Slot 1 permanently LLxSCORPION — Founder/Leader and Slots 2–5 initially OPEN, so that the roster is unambiguous.

• Trigger: Squad load.
• Observable result: five slots render; Slot 1 locked; Slots 2–5 show OPEN until filled.
• Failure/recovery: if slot data fails, retry is offered.
• Continuation: "+ OPEN SLOT" routes to Join Clan.

FR-09 — Admin member management (explicit) As a Clan Admin, I should be able to manage members, so that the roster stays accurate.

• Trigger: admin action in the members section.
• Observable result: member records and slot assignments update.
• Failure/recovery: validation errors surface inline.
• Continuation: Squad reflects changes.

FR-10 — Registration and login (explicit) As a Registered Member / Applicant, I should be able to register and log in, so that I can access member features.

• Trigger: Sign Up or Login submission.
• Observable result: account created or session established.
• Failure/recovery: clear error on invalid credentials or duplicate email.
• Continuation: redirect to intended destination.

FR-11 — Profile editing (explicit) As a Registered Member / Applicant, I should be able to edit my profile, so that my public identity is accurate.

• Trigger: Profile save.
• Observable result: profile persists and is reflected on Squad when slotted.
• Failure/recovery: validation or upload errors surface with retry.
• Continuation: return to Profile or Notifications.

FR-12 — Join Clan application with LLx validation (explicit) As a Registered Member / Applicant, I should be able to submit a Join Clan application, and my gaming name MUST start with LLx; otherwise submission is blocked with a clear error.

• Trigger: application submit.
• Observable result: valid submissions create a PENDING application; invalid ones are blocked with a clear message.
• Failure/recovery: server-side validation mirrors client-side; errors are shown inline.
• Continuation: applicant can correct and resubmit while PENDING.

FR-13 — PENDING application lifecycle (explicit) As a Registered Member / Applicant, my application should remain PENDING until the admin accepts or rejects it, so that I know my status.

• Trigger: submission.
• Observable result: status is PENDING until a decision.
• Failure/recovery: if status cannot be fetched, retry is offered.
• Continuation: status updates on decision.

FR-14 — Automatic first-free-slot assignment, never exceeding 5 (explicit) As a Registered Member / Applicant, when my application is accepted I should automatically receive the first free slot, and the squad must never exceed 5 slots.

• Trigger: admin acceptance.
• Observable result: the first free slot among 2–5 is assigned; if none is free, acceptance is blocked.
• Failure/recovery: if no slot is free, the admin sees a clear error and the application is not accepted.
• Continuation: Squad reflects the new member.

FR-15 — Notifications (explicit) As a Registered Member / Applicant, I should receive notifications, including application status changes, so that I stay informed.

• Trigger: status change or admin action.
• Observable result: notification appears in Notifications and as a navbar badge.
• Failure/recovery: if delivery fails, it is retried.
• Continuation: user opens and marks as read.

FR-16 — Member profiles (explicit) As a Visitor / Fan, I should be able to view member profiles, so that I can learn about the squad.

• Trigger: open a member from Squad.
• Observable result: profile renders with public fields.
• Failure/recovery: retry on load failure.
• Continuation: return to Squad.

FR-17 — Admin-only dashboard (explicit) As a Clan Admin, I should have an admin-only dashboard covering members, applications, characters, YouTube, live stream, updates, chat moderation, rules, and social links/settings, so that I can manage the site.

• Trigger: navigation to Admin.
• Observable result: dashboard renders with all sections.
• Failure/recovery: unauthorized access is redirected to Login.
• Continuation: admin performs management actions.

FR-18 — Configurable YouTube integration (explicit) As a Clan Admin, I should be able to configure the YouTube channel, official subscribe link, API subscriber count with a clearly labeled manual fallback, latest videos, and a configurable YouTube Live embed/status, so that the site reflects the real channel.

• Trigger: admin configuration.
• Observable result: YouTube page and Live page reflect configuration; fallback is labeled.
• Failure/recovery: API failure falls back to the labeled manual value.
• Continuation: public surfaces update.

FR-19 — Never fake viewers or subscribers (explicit) As a Visitor / Fan, I should only ever see real viewer and subscriber numbers, with a clearly labeled manual fallback when the API is unavailable, so that I can trust the metrics.

• Trigger: any metric display.
• Observable result: metrics are real or explicitly labeled manual; never fabricated.
• Failure/recovery: fallback is labeled.
• Continuation: normal browsing.

FR-20 — Realtime community chat with anti-spam, moderation, XSS protection (explicit) As a Registered Member / Applicant, I should be able to participate in the realtime LLxSCORPION COMMUNITY CHAT, with anti-spam, moderation, and XSS protection, so that the community is safe and usable.

• Trigger: send a message.
• Observable result: message appears in realtime; abusive content is moderated; input is sanitized.
• Failure/recovery: rate-limited users see a clear message; connection loss triggers reconnect.
• Continuation: chat remains usable.

FR-21 — Editable updates, rules, social links (explicit) As a Clan Admin, I should be able to edit updates, rules, and social links, so that public content stays current.

• Trigger: admin edit.
• Observable result: public surfaces reflect edits.
• Failure/recovery: validation errors surface inline.
• Continuation: public pages update.

FR-22 — SEO, sitemap, robots.txt, image optimization (explicit) As the system, I should provide SEO metadata, a sitemap, robots.txt, and image optimization, so that the site is discoverable and performant.

• Trigger: crawl or page load.
• Observable result: metadata, sitemap, and robots.txt are served; images are optimized.
• Failure/recovery: missing metadata falls back to defaults.
• Continuation: normal operation.

FR-23 — Rate limiting, secure password hashing, protected admin routes, environment variables (explicit) As the system, I should enforce rate limiting, secure password hashing, protected admin routes, and environment-variable configuration, so that the platform is secure.

• Trigger: any request.
• Observable result: limits enforced; passwords hashed; admin routes guarded; secrets in env vars.
• Failure/recovery: violations return clear errors.
• Continuation: normal operation.

FR-24 — Setup documentation for YOUTUBE_API_KEY and CHANNEL_ID (explicit) As a Clan Admin, I should have setup documentation for YOUTUBE_API_KEY and CHANNEL_ID, so that I can configure YouTube integration.

• Trigger: reading docs.
• Observable result: documentation covers both variables and their use.
• Failure/recovery: n/a.
• Continuation: admin configures integration.

FR-25 — No fake data or static-only buttons (explicit) As a Visitor / Fan, I should never encounter fabricated data or buttons that do nothing, so that the site is trustworthy.

• Trigger: any interaction.
• Observable result: every button performs a real action; no fabricated data.
• Failure/recovery: unavailable actions are disabled with explanation, not faked.
• Continuation: normal browsing.

FR-26 — Self-service registration (required_inference) As a prospective member, I should be able to register myself, so that I can apply to join.

• Trigger: Sign Up submission.
• Observable result: account created.
• Failure/recovery: clear errors.
• Continuation: proceed to Join Clan.

FR-27 — Returning verification through Login (required_inference) As a Registered Member / Applicant, I should verify my identity through Login before protected work, so that my state is bound to me.

• Trigger: Login submission.
• Observable result: session established.
• Failure/recovery: clear errors.
• Continuation: access protected surfaces.

FR-28 — Protected admin verification and authorization (required_inference) As a Clan Admin, I should be verified and authorized before accessing Admin, so that admin work is protected.

• Trigger: navigation to Admin.
• Observable result: only authorized admins reach the dashboard.
• Failure/recovery: unauthorized users are redirected to Login.
• Continuation: admin work proceeds.

FR-29 — Pending application review before decision (required_inference) As a Clan Admin, I should review pending applications before accepting or rejecting, so that decisions are informed.

• Trigger: open applications section.
• Observable result: pending applications listed with details.
• Failure/recovery: retry on load failure.
• Continuation: accept or reject.

FR-30 — Server-side LLx validation and five-slot enforcement (required_inference) As the system, I should enforce LLx validation and the five-slot cap server-side, so that rules cannot be bypassed.

• Trigger: submission or acceptance.
• Observable result: invalid submissions rejected; slot cap enforced.
• Failure/recovery: clear errors returned.
• Continuation: valid operations proceed.

FR-31 — Configured YouTube credentials with labeled manual fallback (required_inference) As the system, I should use configured YOUTUBE_API_KEY and CHANNEL_ID for live YouTube data, with a clearly labeled manual subscriber fallback, so that metrics are real or explicitly labeled.

• Trigger: YouTube data fetch.
• Observable result: live data or labeled fallback.
• Failure/recovery: fallback labeled.
• Continuation: normal display.

FR-32 — Supabase services availability (required_inference) As the system, I should have Supabase Auth, PostgreSQL, Storage, and Realtime available, so that identity, content, media, and chat are durable.

• Trigger: any operation.
• Observable result: services respond.
• Failure/recovery: transient errors surface with retry.
• Continuation: normal operation.

4. User Personas

Visitor / Fan

• Product context: A non-registered visitor who discovers LLxSCORPION GAMING through search