Tunegram

Tunegram is an advanced, high-load social-streaming platform engineered natively as a Telegram Mini App. Merging the virality of Audio-to-Earn mechanics with real-time media distribution, the platform ecosystem allows users to accumulate rewards by listening to live audio broadcasts while empowering content creators with robust digital broadcasting tools.

NSWEB was retained as the core engineering partner, taking complete development ownership across the full-stack architecture. Our team engineered the entire client-side frontend, built the enterprise backend infrastructure, integrated complex interactive Spline WebGL assets provided by design partners, and developed the custom media casting routing matrix.

1. Tunegram high-fidelity streaming interface developed by NSWEB

The Challenge

Building high-fidelity audio applications inside embedded mobile environments introduces extreme device resource constraints. For Tunegram, operating inside the restricted Telegram Webview container introduced severe engineering hurdles:

• Hardware Casting Incompatibilities: Standard Audio-to-Earn mechanics fail when a user casts media via AirPlay or Chromecast. Casting protocols process audio-only streams differently, often cutting off background execution tokens and breaking client-side balance calculation algorithms.
• Heavy WebGL Integration Overheads: The client required an immersive, interactive 3D centerpiece on the main dashboard to drive engagement. Compiling and running these complex custom assets inside a mobile web view typically leads to massive battery drain and layout lag if the underlying React execution pipeline is unoptimized.
• Segmented High-Friction Onboarding: The platform required two fundamentally different data models and user journeys: an ultra-fast, zero-friction path for ordinary listeners and an extensive verification and management dashboard for onboarded influencers and creators.

Our Solutions

Next.js

NestJS

1. WebGL Spline 3D Client Engineering & UI Optimization

While the 3D visual assets were supplied by design partners, our team took full ownership of their technical integration, embedding them flawlessly into the webview application.

• Optimized Spline Integration: We integrated the real-time Spline 3D simulation directly into the Next.js frontend core. By separating the layout execution blocks and stripping redundant runtime variables, we successfully isolated the WebGL context, allowing the 3D asset to animate smoothly without dropping rendering frames inside Telegram.
• Throttled State Architecture: Wrapped the 3D execution layers into reactive state boundaries, ensuring that heavy rendering processes hibernate whenever the user navigates away from the primary player screen, lowering hardware strain.

2. Adaptive Casting Redirection & Audio Infrastructure

Our team engineered the logical bridging layer that handles external hardware event triggers and coordinates with media streaming servers.

• Dynamic Fallback Stream Switcher: We developed an automated media protocol interception script on the frontend. When the Next.js client detects an active AirPlay or Chromecast transmission event, the system automatically redirects the device routing requests.
• Stream-Mapping Management: Instead of pushing raw audio tracks (which break casting interfaces), our NestJS backend intercepts the session state and dynamically requests an optimized, lightweight HLS video track overlay from the media servers. This ensures the external hardware renders a continuous video stream while perfectly preserving server-side tracking and reward integrity.

3. Full-Stack Multi-Role Onboarding Engine

We architected the underlying data schemas and authentication flows to accommodate different user roles seamlessly.

• Zero-Touch Listener Onboarding: Standard listeners are funneled through a frictionless Telegram initData automatic login path, initializing secure session keys and granting access to the audio layer in under two seconds.
• Creator Studio Backend: Engineered an isolated onboarding and analytics dashboard within the app for content creators. We built secure backend endpoints in NestJS allowing creators to manage active stream channels, verify operational metrics, set reward pools, and access structured database analytical insights.

The Business Outcome

• Unbroken Casting Compatibility: Successfully preserved 100% data and reward tracking across smart devices by engineering on-the-fly streaming redirection during active AirPlay and Chromecast sessions.
• Liquid-Smooth 3D Engagement: The optimized Next.js frontend architecture achieved a stable mobile frame execution rate, delivering premium gamified visuals without device overheating reports.
• High-Velocity Viral Growth: The separate onboarding architecture successfully converted millions of listeners through frictionless entry loops, while providing professional-grade management toolsets for creators.
• Enterprise Product Structure: Provided a clean, typed architecture (TypeScript end-to-end) linking the interactive Next.js application with a high-throughput NestJS server layer, fully prepared for mass international deployment.