How to build on Huddle01 SDK + 5 Awesome Ideas to Build

Winifred John
7 min readMay 30, 2024

--

The pros and cons of remote working dawn on us when the phone bills come in. We sometimes hope to save on data costs while enjoying a safe, reliable video conferencing platform.

What if I told you that you could save up to 95% on data without compromising your latency and earn from selling unused bandwidth?

Yes, there is such a platform, and it’s called Huddle01.

What you will learn :

In this tutorial, you will learn about Huddle01 SDK, its functionalities, and offerings.

This tutorial will also include a hands-on section where you will be guided on how to integrate the Huddle01 SDK into your project. Additionally, we will explore potential project ideas for Huddle01 SDK together.

Prerequisite:

Your interest! It is totally fine if you have never worked with SDKs before; this tutorial will guide you each step of the way. Have fun building 😌

Introduction:

Before we start building, it is important to understand what we know and ensure every term makes sense. Let’s start with the owners of the SDK, Huddle01.

What is Huddle01?

Huddle01 is a dePIN platform on a mission to provide seamless digital connectivity through audio and video conferencing.

Huddle01 uniquely offers very low rates onbandwidth by utilizing unused bandwidth around the globe, saving 95% of server costs compared to AWS.

Image showing Hudde01 Video and audio conferencing

Imagine Google Meet and a VPN provider having a baby—that would be Huddle01.

You can read more about the unique features of Huddle 01 here.

What is Huddle SDK?

We agreed to break down every term. Let's start with what an SDK is.

SDK stands for Software Development Kit. The word "kit" can give an insight into what an SDK does. An SDK is a set of tools, software, and programs needed to build an application on a specific platform, which in our case is Huddle01.

Image credit: Ascendix Tech

Huddle SDK is a set of development tools and programs needed to build an application on Huddle01. You can think of it as a Lego set box—you just have to assemble the pieces together and build your application.

Sounds easy, right?

Functionalities of Huddle01 SDK

The functionalities of an SDK refer to the set of tools, libraries, documentation, code samples, processes, and guides provided to developers to help them create software applications for specific platforms or environments.

For Huddle01 SDK, here are the functionalities:

CLI Tools:

With the Command Line Interface (CLI), you can quickly clone example apps for Next.js, React.js, and Vanilla JS. You can also get example apps for iFrame (web).

The CLI tools provided by our SDK are designed to help you manage your projects efficiently. These tools automate common tasks such as setup and deployment.

Getting Started with CLI Tools

See the full guide on how to integrate CLI tools: https://docs.huddle01.com/docs/cli-tool.

Sample Code Snippet

# Using our CLI tool, you can quickly clone example apps for Next.js, React, Vanilla JS, or iFrame.

# Quick Start
npx create-huddle01

# Give a name to your project
# This will be the folder name for the cloned example app.

# Pick an SDK
# Choose between Client SDK or iFrame.

# Pick a platform (for Client SDK only)
# Options: Web or Mobile.

# Pick a framework
# For Web: Vanilla, Next.js, Vite JS
# For Mobile: React-Native, Flutter

# Choose project type (not applicable for Flutter)
# Options: JavaScript or TypeScript (recommended)

# Install dependencies (prefer bun over pnpm, yarn, or npm)
npm install

# Create .env.local file
# Copy contents of .env.example and add your API Key and Project ID from the API Keys Page.

# Run the project
npm run dev

Please refer to the full documentation to use other package managers such as yarn, pnpm, and bun.

JavaScript SDK:

The Huddle01 JavaScript SDK offers a comprehensive list of methods and event listeners for you to incorporate real-time audio and video communication into applications with just few lines of code.

Getting Started with JavaScript SDK

To build with JavaScript SDK, you will be importing lots of methods and event listeners into your code.

See the comprehensive list of methods and event listeners for your next project 😌

JavaScript Methods

Pre Requisites

Before using the Huddle01 Javascript SDK, you must have Node.js installed on your machine.

You can install Node.js using one of the following methods:

After installing Node.js, verify it's installed by running the following command in your terminal:

node --version

Here’s a quick guide to building your first JavaScript project with Huddle01 SDK 👇

Quick Guide

ReactJS SDK:

To build with ReactJS SDK, you will be importing lots of methods and event listeners into your code.

See the comprehensive list of React Hooks and event listeners for your next project 😌

ReactJS Hooks

Pre Requisites

Make sure you have NodeJS Installed in your machine.

Here’s a quick guide to building your first ReactJS project with Huddle01 SDK 👇

Quick Guide

Flutter SDK:

The Huddle01 Flutter SDK offers a comprehensive list of methods and event listeners for you to incorporate real-time audio and video communication into mobile applications with just few lines of code.

Getting Started with Flutter SDK

To build with Flutter SDK, you will be importing lots of methods and event listeners into your code.

See the comprehensive list of methods and event listeners for your next project 😌

Flutter Methods

Prerequisites:

Before using the Huddle01 Flutter SDK, you must have Flutter and its build tools installed on your machine.

  • Install Flutter by following the instructions on this Official Flutter Page
  • Download Android Studio or XCode to go ahead with Flutter development.
  • After installing Flutter, verify it's installed by running the following command in your terminal:
flutter doctor

Building with a Flutter App with Huddle01

Before building yuu have to install and intialize the SDK

Install:

flutter pub add huddle01_flutter_client

Create a room:

import 'dart:convert';
import 'package:http/http.dart' as http;

//Auth token we will use to generate a meeting and connect to it
String apiKey = "<Generated-from-docs>";

// API call to create meeting
Future<String> createMeeting() async {
final http.Response httpResponse = await http.post(
Uri.parse("https://api.huddle01.com/api/v1/create-room"),
headers: {'Authorization': apiKey},
);

//Destructuring the roomId from the response
return json.decode(httpResponse.body)['roomId'];
}

Initialize SDK:

import 'package:huddle01_flutter_client/huddle01_flutter_client.dart';

String projectId = 'YOUR-PROJECT-ID';
String roomId = 'YOUR-ROOM-ID';

HuddleClient huddleClient = HuddleClient(projectId);
huddleClient.joinRoom(roomId, token);

Proceed to building your first Flutter App on Huddle 01 using the detailed documentation below👇

https://docs.huddle01.com/docs/Flutter/walkthrough

Quick Integrations:

Build in few minutes using quick integrations such as Huddle01 iFrame.

Huddle01 iFrame:

Huddle01 iFrame provides a way for you to integrate Huddle01 Web App into your website with just few lines of code 😲.

You can make your fastest build and integrate functionalities such as hosting a meet, sharing projects or presentation into your website in few minutes !!

Find out how to get started with Huddle01 iFrame here.

Build using any of these frameworks 👇

Vanilla JS iFrame ||| React JS iFrame

Ideas to Build Using Huddle01 SDK

Here are some projects you can build using Huddle01 SDK 👇

1. EventLive: A virtual event platform for hosting webinars, conferences, and workshops. Attendees can register for events, join live sessions, participate in Q&A sessions, and access recorded content.

Integration with Huddle01 SDK

  • Use the Huddle01 SDK to host live video and audio sessions. Embed the video conferencing component within your event pages.
  • Utilize the SDK’s capability to create multiple breakout rooms for group discussions and networking.

2. BookaCall: A call booking platform similar to Calendly, where users can schedule and manage calls with others.

Integration with Huddle01 SDK
Use Huddle01 SDK to create and manage video conferencing links for each scheduled call. Embed the video call interface in the user dashboard.

3. Teamspace: A virtual workspace where teams can collaborate on projects, hold meetings, and manage tasks. It includes project rooms, document sharing, and integrated communication tools.

Integration with Huddle01 SDK:

  • Create virtual rooms for teams using Huddle01’s video conferencing features.
  • Use Huddle01’s secure communication channels to share and discuss documents.

See What Others have built using Huddle01 SDK 🤭

Access more examples here

  1. Meet With Wallet:
    Meeting Scheduler for Web3. Schedule meetings with your friends and colleagues using your wallet address.
Meetwithwallet

2. Buttrfly
A Web3 Social Explorer build on lens protocol. You can experience audio spaces built with Huddle01 SDK.

Buttrfly

3. SyncX
SyncX is a tool that enables you to connect with your audience through 1:1 sessions.

SyncX

What next?

After building your next project you can join the Huddle01 Community here 👇

Discord |||| Twitter/X

Access all documentation Resources

--

--

Winifred John

An experienced Technical Writer that focuses on clarity and explains the most technical concepts to beginners. Portfolio https://www.clippings.me/winifredjohnnn