Clubinho Academy — Members Platform & Enterprise LMS

Context and Engineering Challenge

Building modern video streaming and learning management (LMS/CMS) platforms requires high performance in file delivery, stringent intellectual property security, and the ability to scale elastically without infrastructure cost explosions.

Clubinho Academy was conceived as a streaming platform focused on family development, currently operating in stable production on Vercel and serving a real volume of over 10,000 active users. The major technical challenge of the project was to design a robust serverless ecosystem that ensured a seamless experience for streaming and downloading private content, multi-level data shielding for users, and asynchronous engagement telemetry, eliminating common network bottlenecks in high volumes of concurrent access.

Architecture Engineering and Layered Division

1. Presentation & Premium UX (Client-side & Vercel Edge)

• Front-end Architecture: Developed in React and TypeScript, using Vite as the build tool and packaged via Bun to ensure minimal build times and agile deployment. The application is globally distributed through Vercel's edge infrastructure, reducing Time to First Byte (TTFB).
• Design System & Micro-interactions: Responsive interface built with Tailwind CSS focusing on child and family usability (rounded corners rounded-xl and soft shadows). The typography adopts the Nunito font for headers and Inter for high-contrast reading. Framer Motion governs smooth tab transitions, dynamic progress bars, and real-time animated reactions.
• Playback Engine & Timeline: An intelligent video player that dynamically adapts to the content format (video, images, rich text, or attachments), integrated with a visual chronological progress sidebar that manipulates the state of lessons through reactive checkmarks.

2. Data Persistence and Enterprise Isolation (Supabase & PostgreSQL)

• Architecture Isolation: To mitigate data pollution and centralize the attack surface, the entire PostgreSQL database ecosystem is hosted under a structured and isolated schema (clubinhoacademy).
• Zero-Trust via Row-Level Security (RLS): Native security enforced at the database level. Strict policies ensure referential integrity and block tampering via API, validating that comments and reactions records strictly belong to the requesting user (auth.uid() = user_id).
• Private Storage and Signed URLs: Extra educational materials are stored in hidden buckets of Supabase Storage. Secure downloads are controlled by Supabase Edge Functions (Deno/TypeScript), which generate URLs with temporary signatures based on restricted service keys, preventing leaks and orphaned links.

3. Browser Workaround Engineering & Resilience

• Bypassing iOS/Safari Restrictions: The system implements a compatibility layer specifically for mobile devices:
  • Popup Blockers: Captures the user's click in a synchronous context to initiate the opening of the download tab before resolving the promise of the private link from the Edge Function.
  • Cross-Origin Blobs: To mitigate Safari's behavior of ignoring the download attribute on cross-origin media, the platform downloads the file asynchronously as a binary stream (Blob via stream), maps the progress, and generates a temporary local URL to enforce retention of the original file name.
• Event-Driven Failure Orchestration (n8n): In case of a connection failure in the protected download pipeline of the Edge Function, an asynchronous webhook is triggered to n8n carrying structured metadata (platform, browser, error payload, and user ID). The flow in n8n processes the alert and triggers automatic observability and active support routines.

Technical Highlights and Challenges Overcome

• Asynchronous Fire-and-Forget Audit Logging: Development of a highly resilient telemetry logging module (EngagementEvents and audit_events) configured to trigger in the background without blocking the main navigation thread of the interface. The pattern adopts an error handling approach that ensures analytics failures never interrupt the student's streaming experience.
• Fine Engagement Mapping: Detailed behavioral capture of critical interactions on the front-end (video_view, lesson_view, product_view), asynchronously feeding an administrative dashboard with real retention metrics.
• Administrative Tracking: Structuring a central audit table that immutably documents the exact payload of any structural modification in modules, dynamic showcases, or campaign banners made by panel operators.

Engineering Results and Impact

• Proven Production Scale: High-availability serverless architecture operating under a volume of over 10,000 active users, recording zero downtime and controlled latency.
• Omnichannel Compatibility: Complete resolution of inconsistencies in downloading protected binary files between desktop and mobile ecosystems (iOS/Android).
• Zero Link Leakage: Absolute governance of files and student data through the centralization of logic in PostgreSQL RLS and short-lived signed links generated at the edge.