All projects

Real-Time Video Podcasting Production Studio as a web app

  • User Experience
  • Web Dev

Implementation of an intuitive, real-time broadcasting frontend for seamless podcast production.

Client VOKL Logo
Cover Image Additional Project Image

Project Details

Duration 6 months
Tools
  • TypeScript Logo
  • React Logo
  • NEXT.js Logo
  • Redux Logo
  • GraphQL Logo
  • URQL Logo
Project Lead:
Daniel Becker

Daniel Becker

Co-Founder, Head of Tech

Schedule Meeting

The challenge was managing and synchronizing complex application states and data streams in real time, while maintaining swift and seamless user and collaboration. The solution was a robust tech stack with modern tooling and a clear separation of concerns, allowing for individual component tweaking and optimization. This approach enabled the creation of an , coherent , providing an for all users.

Objective & Solution

Project Outcomes

  • Collaborative Live Editing & Viewer Engagements

    Developed an environment for efficient management of video signals, screenshares, stage layouts, branding, and audience interaction.

  • High-Quality Audio and Video Recording

    Implemented a system where local audio recordings are merged server-side with video to maintain high production quality, even in low-bandwidth scenarios.

  • Custom Component Library

    Created a bespoke, accessible component library to ensure a modular and consistent user interface across the application.

The Dinghy team assembles those unicorns that many tech teams wish for: awesome designers and equally great frontend developers, all in one team.

Silvia Thom
Silvia Thom Tech & Start Up Advisor | Tech & Product DD | Ex-CTO ZALORA Group

Deliverables

The following are some of the deliverables that were created for this project.

  1. Deliverable
    Interaction

    Responsive Frontend Development

    Crafted a responsive frontend, ensuring seamless functionality on both mobile and desktop devices.

  2. Deliverable
    Interaction

    State Management & Data Stream Synchronization

    Utilized Redux and GraphQL subscriptions to effectively handle real-time state management and data synchronization.

  3. Deliverable
    Interaction

    WebRTC Integration

    Incorporated WebRTC technology for live video streaming capabilities, essential for real-time podcasting.

  4. Deliverable
    Interaction

    User Interface Optimization

    Focused on optimizing the user interface to enhance accessibility and ease of use for all stakeholders.

  5. Deliverable
    Interaction

    Component Modularity

    Developed the UI components as independent modules, facilitating better design consistency and easier maintenance. These components were documented in an interactive guide.

Explore Next Project

Rapid User Testing of Landing Pages for a renowned German Bank

Project

Explore Project

Rapid User Testing of Landing Pages for a renowned German Bank