X Xx Vidos May 2026

| Layer | Recommended Tech | Rationale | |-------|------------------|----------| | Frontend | React + TypeScript + Vite (SPA) → Next.js for SSR of public pages | Component reuse, excellent ecosystem for drag‑drop, progressive web app (PWA) support. | | Design System | Tailwind CSS + Headless UI | Rapid theming, responsive out‑of‑the‑box. | | Video Player | Video.js (HLS plugin) or Shaka Player | Handles adaptive streaming, captions, DRM‑ready if needed later. | | Backend (API) | Node.js (NestJS) or Go (Fiber) – REST + GraphQL | Strong typing, easy integration with AWS services. | | Storage & CDN | Amazon S3 for raw uploads → AWS Elemental MediaConvert for transcoding → CloudFront CDN for HLS playback | Scalable, pay‑as‑you‑go, global low‑latency. | | Database | PostgreSQL (primary) + Redis (caching, rate‑limiting) | Relational consistency for user/channel/video relations; Redis for fast view‑count increments. | | Background Jobs | BullMQ (Node) or AWS SQS + Lambda workers | Queue heavy transcoding, thumbnail generation, email notifications. | | Search | Elasticsearch (or OpenSearch) | Full‑text, tag filtering, fast suggestions. | | Authentication | OAuth2 / OpenID Connect (Auth0 or Supabase Auth) | Secure, social login, email verification out‑of‑the‑box. | | Payments | Stripe Connect (for payouts) + PayPal Adaptive Payments (optional) | Supports one‑time tips, pay‑per‑view, and scheduled payouts to creators. | | Moderation AI | Perspective API + custom classifier (TensorFlow/PyTorch) | Flag toxic comments, auto‑hide before human review. | | Monitoring | Grafana + Prometheus (metrics) + Sentry (error tracking) | End‑to‑end observability. |

Users currently have to navigate through multiple screens (profile → library → playlists) to discover short, bite‑size videos. This friction leads to:

X XX Vidos solves this by providing a dedicated, algorithm‑driven “Short‑Video Feed” that lives on the home screen and supports creation, consumption, and interaction in a single, fluid UI. x xx vidos

| Phase | Scope | Timeline | |-------|-------|----------| | Alpha (Internal) | Core feed UI, basic recommendation (pop‑ular videos), capture flow, moderation stub. | 4 weeks | | Beta (External Invite‑Only) | Personalised recommendations, analytics, ad insertion, accessibility polish. | +6 weeks | | GA (General Availability) | Full localisation, offline download (future), advanced ML ranking, A/B test framework. | +8 weeks after Beta start | | Post‑Launch | Monitoring, performance tuning, incremental feature flags (e.g., duet mode, reaction emojis). | Ongoing |

[Home Screen] ──► [X XX Vidos Feed] (full‑screen vertical scroll)
   ├─ Video Cell (auto‑play, muted)
   │    ├─ Top‑right: Creator avatar (tap → profile)
   │    ├─ Bottom‑left: Like ♥  (tap → toggle)
   │    ├─ Bottom‑center: Comment bubble (tap → comment sheet)
   │    ├─ Bottom‑right: Share arrow (tap → share sheet)
   │    └─ Swipe up → Creator profile
   └─ Floating “+” button (bottom‑right) → Capture Flow

Capture Flow

| Document | Link / Location | |----------|-----------------| | Feature Spec (this doc) | Confluence > Media > X XX Vidos | | UI Mock‑ups | Figma file: X_XX_Vidos_2026_Q2 | | API Contracts | Swagger Hub: feed-api.yaml, video-upload.yaml | | Moderation Guidelines | Internal Wiki > Safe Content Policy | | Analytics Event Schema | DataDog > Event Catalog > video_* |

| # | Feature | User Story (simplified) | Acceptance Criteria | |---|---------|--------------------------|----------------------| | 1 | One‑Click Upload & Auto‑Transcode | As a creator, I want to drop a video file onto a web page and have it instantly appear on my channel. | • Accepts MP4, MOV, WebM up to 5 GB.
• Shows progress bar and estimated time.
• Video is available for playback within 30 seconds of upload completion. | | 2 | Channel Pods (Mini‑Sites) | As a creator, I want a personal page where my videos are grouped, with a custom header, logo, and color scheme. | • Each pod has a unique URL (e.g., x.xx/yourname).
• Creator can edit header image, avatar, theme colors, and “About” text.
• Responsive layout (mobile‑first). | | 3 | Monetization Toolbox | As a creator, I want to earn money directly from viewers. | • “Tip‑Jar” button (PayPal/Stripe/crypto).
• “Pay‑Per‑View” toggle per video (price granularity $0.01‑$10).
• Dashboard shows earnings, payouts, and transaction history. | | 4 | Community Interaction | As a viewer, I want to comment, like, and share videos. | • Like/Dislike toggle.
• Threaded comments (max depth 3).
• Share via link, embed code, or direct social‑media export. | | 5 | Reputation‑Based Moderation | As a community member, I want safe, spam‑free discussions. | • Users earn “moderation points” by receiving up‑votes on helpful flags.
• When a user’s reputation > X, their flag automatically hides the comment pending AI review.
• Admins can override any action. | | 6 | Analytics Dashboard | As a creator, I want to see how my videos perform. | • Views, unique viewers, watch‑time, geographic heat‑map.
• Revenue breakdown (tips vs. pay‑per‑view).
• Export CSV / PDF. | | 7 | Search & Discovery | As a visitor, I want to find videos relevant to my interests. | • Full‑text title/description search.
• Tag‑based filters & “Related Channels”.
• Trending carousel based on recent view spikes. | | 8 | Embedding & API | As a developer, I want to embed videos on external sites. | • <iframe> embed code with optional autoplay & start‑time.
• Public REST API for retrieving video metadata, channel info, and stats (rate‑limited). | | 9 | Privacy Controls | As a creator, I want to decide who can view a video. | • Visibility options: Public, Unlisted (URL‑only), Private (invite‑only).
• Password‑protected videos (optional). | |10 | Accessibility | As a viewer with disabilities, I need a usable experience. | • Captions (auto‑generated + manual upload).
• Keyboard‑navigable UI.
• ARIA‑compliant markup. | | Layer | Recommended Tech | Rationale |