Startups - freeCodeCamp.org

How I Built a Custom Video Conferencing App with Stream and Next.js

Ankur Tyagi — Wed, 02 Oct 2024 17:46:39 +0000

Building full-stack apps can be tough. You have to think about frontend, APIs, databases, auth – plus you have to know how all of these things work together.

And building a project like a video conferencing app from scratch can feel even more overwhelming, especially with the complexities of managing video streams, user auth, and real-time interactions.

But what if I told you there’s an easier way to do this – one that lets you build your video conferencing app in a fraction of the time?

In this article, I’ll show you how I built a video conferencing app using Stream and Clerk in Next.js.

Here is the source code (remember to give it a star ⭐).

Before we start, let me tell you why I wrote this tutorial.

I’m a Software Engineer who cares about writing and I love to code, design, develop, and then teach people.

I've been using open-source projects, products, and services for a while now, and contributing to many of them to improve them how I can. Last month I built an open-source blog for “awesome developer tools“ called - devtoolsacademy

This article is about sharing the experience I’ve had using yet another awesome developer tool.

What is Stream?

Stream is an open-source cloud-based platform that provides APIs and SDKs for building scalable and feature-rich real-time applications. It offers pre-built UI components for creating enterprise-grade software apps with features like chat, video, audio, and activity feeds.

Here's how I'll use Stream while building the app:

Set up real-time video and audio calls
Use Stream's UI components to quickly build the interface
Implement key features like video and audio calls
Call Types – I'll implement instant meetings and pre-scheduled calls using Stream
Leverage Stream's call and participant objects to manage call state

Prerequisites

To fully understand the tutorial, you need to have a basic understanding of React and Next.js. You’ll also need the following:

Stream React SDK - provides pre-built UI components for adding video call features quickly.
Stream Node.js SDK - for managing server-side interactions and keeping Stream's state in sync.
Clerk - a comprehensive user management platform to handle authentication effortlessly.
Headless UI - provides accessible UI components for building user-friendly applications.
React Copy-to-Clipboard - allows users to easily copy meeting links within the app.
React Icons - offers a library of easily integrated icons.

How to Build the App Interface with Next.js

In this section, I'll guide you through creating the user interface for the video-conferencing app. The interface will allow users to easily create, join, and schedule meetings, as well as view their upcoming meetings.

First, let’s create a Next.js TypeScript project by running the code snippet below:

npx create-next-app facetime-app

Then install the following packages:

React icons - a popular React icons package
Headless UI - provides a set of accessible UI components
React-copy-to-clipboard - a lightweight package that enables us to copy meeting links.

npm install react-icons @headlessui/react react-copy-to-clipboard

Copy the code snippet below into the app/page.tsx file:

"use client";
import { useState } from "react";
import { FaLink, FaVideo } from "react-icons/fa";
import InstantMeeting from "@/app/modals/InstantMeeting";
import UpcomingMeeting from "@/app/modals/UpcomingMeeting";
import CreateLink from "@/app/modals/CreateLink";
import JoinMeeting from "@/app/modals/JoinMeeting";

export default function Dashboard() {
    const [startInstantMeeting, setStartInstantMeeting] =
        useState<boolean>(false);
    const [joinMeeting, setJoinMeeting] = useState<boolean>(false);
    const [showUpcomingMeetings, setShowUpcomingMeetings] =
        useState<boolean>(false);
    const [showCreateLink, setShowCreateLink] = useState<boolean>(false);

    return (
        <>
            

            'w-full h-screen flex flex-col items-center justify-center'>
                'font-bold text-2xl text-center'>FaceTime
                'flex flex-col'>
                    
                

                'flex items-center justify-center space-x-4 mt-6'>
                    
                    
                
            

            {startInstantMeeting && (
                
            )}
            {showUpcomingMeetings && (
                
            )}
            {showCreateLink && (
                
            )}
            {joinMeeting && (
                
            )}
        
    );
}

The code snippet above renders multiple buttons that allow users to perform actions like joining, creating, and scheduling a call. Each button opens a modal that prompts the user to provide additional details specific to the action they are performing.

Next, let’s create a modals folder within the Next.js app directory and add the following components to the modals folder:

cd app
mkdir modals && cd modals
touch CreateLink.tsx InstantMeeting.tsx JoinMeeting.tsx UpcomingMeeting.tsx

The CreateLink modal allows users to provide a description and schedule a time for the call. The InstantMeeting modal lets users start an instant meeting by providing a call description. The JoinMeeting modal enables users to enter a call link and join a meeting. And the UpcomingMeeting modal displays all scheduled upcoming calls.

Copy the code snippet below into the CreateLink modal:

"use client";
import {
    Dialog,
    DialogTitle,
    DialogPanel,
    Transition,
    Description,
    TransitionChild,
} from "@headlessui/react";
import { Fragment, SetStateAction, useState, Dispatch } from "react";
import CopyToClipboard from "react-copy-to-clipboard";
import { FaCopy } from "react-icons/fa";

export default function CreateLink({ enable, setEnable }: Props) {
    const [showMeetingLink, setShowMeetingLink] = useState(false);
    const [facetimeLink, setFacetimeLink] = useState<string>("");
    const closeModal = () => setEnable(false);

    return (
        <>
            as={Fragment}>
                as='div' className='relative z-10' onClose={closeModal}>
                    as={Fragment}
                        enter='ease-out duration-300'
                        enterFrom='opacity-0'
                        enterTo='opacity-100'
                        leave='ease-in duration-200'
                        leaveFrom='opacity-100'
                        leaveTo='opacity-0'
                    >
                        'fixed inset-0 bg-black/75' />
                    

                    'fixed inset-0 overflow-y-auto'>
                        'flex min-h-full items-center justify-center p-4 text-center'>
                            as={Fragment}
                                enter='ease-out duration-300'
                                enterFrom='opacity-0 scale-95'
                                enterTo='opacity-100 scale-100'
                                leave='ease-in duration-200'
                                leaveFrom='opacity-100 scale-100'
                                leaveTo='opacity-0 scale-95'
                            >
                                'w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white p-6 align-middle shadow-xl transition-all text-center'>
                                    {showMeetingLink ? (
                                        
                                    ) : (
                                        
                                    )}
                                
                            
                        
                    
                
            
        
    );
}

The code snippet above renders a form that allows users to input a description and select a time to schedule a call. Once the call is created, the generated link is displayed and can be copied.

Finally, add the MeetingForm and MeetingLink components below the CreateLink component:

const MeetingForm = ({
    setShowMeetingLink,
    setFacetimeLink,
}: {
    setShowMeetingLink: React.Dispatchboolean>>;
    setFacetimeLink: Dispatchstring>>;
}) => {
    const [description, setDescription] = useState<string>("");
    const [dateTime, setDateTime] = useState<string>("");

    const handleStartMeeting = async (e: React.FormEvent) => {
        e.preventDefault();
        console.log({ description, dateTime });
    };

    return (
        <>
            as='h3'
                className='text-lg font-bold leading-6 text-green-600'
            >
                Schedule a FaceTime
            

            'text-xs opacity-40 mb-4'>
                Schedule a FaceTime meeting with your cliq
            

            'w-full' onSubmit={handleStartMeeting}>
                'block text-left text-sm font-medium text-gray-700'
                    htmlFor='description'
                >
                    Meeting Description
                
                type='text'
                    name='description'
                    id='description'
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                    className='mt-1 block w-full text-sm py-3 px-4 border-gray-200 border-[1px] rounded mb-3'
                    required
                    placeholder='Enter a description for the meeting'
                />

                'block text-left text-sm font-medium text-gray-700'
                    htmlFor='date'
                >
                    Date and Time
                

                type='datetime-local'
                    id='date'
                    name='date'
                    required
                    className='mt-1 block w-full text-sm py-3 px-4 border-gray-200 border-[1px] rounded mb-3'
                    value={dateTime}
                    onChange={(e) => setDateTime(e.target.value)}
                />

                
            
        
    );
};

The MeetingForm component accepts the call description and scheduled time, while the MeetingLink component displays the generated call link and allows users to copy it.

const MeetingLink = ({ facetimeLink }: { facetimeLink: string }) => {
    const [copied, setCopied] = useState<boolean>(false);
    const handleCopy = () => setCopied(true);

    return (
        <>
            as='h3'
                className='text-lg font-bold leading-6 text-green-600'
            >
                Copy FaceTime Link
            

            'text-xs opacity-40 mb-4'>
                You can share the facetime link with your participants
            

            'bg-gray-100 p-4 rounded flex items-center justify-between'>
                'text-xs text-gray-500'>
                    {`${process.env.NEXT_PUBLIC_FACETIME_HOST}/${facetimeLink}`}
                

                `${process.env.NEXT_PUBLIC_FACETIME_HOST}/${facetimeLink}`}
                >
                    'text-green-600 text-lg cursor-pointer' />
                
            

            {copied && (
                'text-red-600 text-xs mt-2'>Link copied to clipboard
            )}
        
    );
};

Copy the following code snippet into the InstantMeeting modal:

"use client";
import {
    Dialog,
    DialogTitle,
    DialogPanel,
    Transition,
    Description,
    TransitionChild,
} from "@headlessui/react";
import { FaCopy } from "react-icons/fa";
import CopyToClipboard from "react-copy-to-clipboard";
import { Fragment, useState, Dispatch, SetStateAction } from "react";
import { useStreamVideoClient } from "@stream-io/video-react-sdk";
import { useUser } from "@clerk/nextjs";
import Link from "next/link";

export default function InstantMeeting({ enable, setEnable }: Props) {
    const [showMeetingLink, setShowMeetingLink] = useState(false);
    const [facetimeLink, setFacetimeLink] = useState<string>("");

    const closeModal = () => setEnable(false);

    return (
        <>
            as={Fragment}>
                as='div' className='relative z-10' onClose={closeModal}>
                    as={Fragment}
                        enter='ease-out duration-300'
                        enterFrom='opacity-0'
                        enterTo='opacity-100'
                        leave='ease-in duration-200'
                        leaveFrom='opacity-100'
                        leaveTo='opacity-0'
                    >
                        'fixed inset-0 bg-black/75' />
                    

                    'fixed inset-0 overflow-y-auto'>
                        'flex min-h-full items-center justify-center p-4 text-center'>
                            as={Fragment}
                                enter='ease-out duration-300'
                                enterFrom='opacity-0 scale-95'
                                enterTo='opacity-100 scale-100'
                                leave='ease-in duration-200'
                                leaveFrom='opacity-100 scale-100'
                                leaveTo='opacity-0 scale-95'
                            >
                                'w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white p-6 align-middle shadow-xl transition-all text-center'>
                                    {showMeetingLink ? (
                                        
                                    ) : (
                                        
                                    )}
                                
                            
                        
                    
                
            
        
    );
}

The code snippet above renders a form that allows users to provide a call description. Once the call is created, the link is generated and available to be copied before starting the call.

Finally, add the MeetingForm and MeetingLink components below the CreateLink component:

const MeetingForm = ({
    setShowMeetingLink,
    setFacetimeLink,
}: {
    setShowMeetingLink: Dispatchboolean>>;
    setFacetimeLink: Dispatchstring>>;
}) => {
    const [description, setDescription] = useState<string>("");

    const handleStartMeeting = async (e: React.FormEvent) => {
        e.preventDefault();
        console.log({ description });
    };

    return (
        <>
            as='h3'
                className='text-lg font-bold leading-6 text-green-600'
            >
                Create Instant FaceTime
            

            'text-xs opacity-40 mb-4'>
                You can start a new FaceTime instantly.
            

            'w-full' onSubmit={handleStartMeeting}>
                'block text-left text-sm font-medium text-gray-700'
                    htmlFor='description'
                >
                    Meeting Description
                
                type='text'
                    name='description'
                    id='description'
                    value={description}
                    required
                    onChange={(e) => setDescription(e.target.value)}
                    className='mt-1 block w-full text-sm py-3 px-4 border-gray-200 border-[1px] rounded mb-3'
                    placeholder='Enter a description for the meeting'
                />

                
            
        
    );
};

The MeetingForm component accepts the call description, while the MeetingLink component displays the generated call link and allows users to copy it before starting the call.

Copy the code snippet below into the JoinMeeting.tsx file. It renders a form that accepts the call link and redirects users to the call page.

"use client";
import {
    Dialog,
    DialogTitle,
    DialogPanel,
    Transition,
    TransitionChild,
} from "@headlessui/react";
import { useRouter } from "next/navigation";
import { Fragment, useState } from "react";

export default function JoinMeeting({ enable, setEnable }: Props) {
    const closeModal = () => setEnable(false);

    return (
        <>
            as={Fragment}>
                as='div' className='relative z-10' onClose={closeModal}>
                    as={Fragment}
                        enter='ease-out duration-300'
                        enterFrom='opacity-0'
                        enterTo='opacity-100'
                        leave='ease-in duration-200'
                        leaveFrom='opacity-100'
                        leaveTo='opacity-0'
                    >
                        'fixed inset-0 bg-black/75' />
                    

                    'fixed inset-0 overflow-y-auto'>
                        'flex min-h-full items-center justify-center p-4 text-center'>
                            as={Fragment}
                                enter='ease-out duration-300'
                                enterFrom='opacity-0 scale-95'
                                enterTo='opacity-100 scale-100'
                                leave='ease-in duration-200'
                                leaveFrom='opacity-100 scale-100'
                                leaveTo='opacity-0 scale-95'
                            >
                                'w-full max-w-2xl transform overflow-hidden rounded-2xl bg-white p-6 align-middle shadow-xl transition-all text-center'>
                                    
                                
                            
                        
                    
                
            
        
    );
}

Add the CallLinkForm below the JoinMeeting component:

const CallLinkForm = () => {
    const [link, setLink] = useState<string>("");
    const router = useRouter();

    const handleJoinMeeting = (e: React.FormEvent) => {
        e.preventDefault();
        router.push(`${link}`);
    };

    return (
        <>
            as='h3'
                className='text-lg font-bold leading-6 text-green-600'
            >
                Join FaceTime
            

            'w-full' onSubmit={handleJoinMeeting}>
                'block text-left text-sm font-medium text-gray-700'
                    htmlFor='link'
                >
                    Enter the FaceTime link
                
                type='url'
                    name='link'
                    id='link'
                    value={link}
                    onChange={(e) => setLink(e.target.value)}
                    className='mt-1 block w-full text-sm py-3 px-4 border-gray-200 border-[1px] rounded mb-3'
                    placeholder='Enter the FaceTime link'
                />

                
            
        
    );
};

Congratulations! You’ve completed the app’s interface.

How to Authenticate Users with Clerk

Clerk is a user management platform that enables you to add auth to web apps.

You can install the Clerk Next.js SDK by running the following code snippet in your terminal:

npm install @clerk/nextjs

Create a middleware.ts file within the Next.js src folder and copy the code snippet below into the file:

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";

const protectedRoutes = createRouteMatcher([
    "/facetime(.*)",
    "/dashboard",
    "/",
]);

//👇🏻 protects the route
export default clerkMiddleware((auth, req) => {
    if (protectedRoutes(req)) {
        auth().protect();
    }
});

export const config = {
    matcher: ["/((?!.*\\\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

The createRouteMatcher function accepts an array containing routes to be protected from unauthenticated users and the clerkMiddleware() function ensures the routes are protected.

Next, import the following Clerk components into the app/layout.tsx file and update the RootLayout function as shown below:

import {
    ClerkProvider,
    SignInButton,
    SignedIn,
    SignedOut,
    UserButton,
} from "@clerk/nextjs";
import "./globals.css";

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        
            'en'>
                
                    'w-full py-4 md:px-8 px-4 text-center flex items-center justify-between sticky top-0 bg-white '>
                        'flex items-center justify-end gap-5'>
                            {/*-- if user is signed out --*/}
                            
                                'modal' />
                            
                            {/*-- if user is signed in --*/}
                            
                                
                            
                        
                    

                    {children}
                
            
        
    );
}

After completing this, users will be prompted to create an account or sign in before they can access the application pages.

Finally, create a Clerk account and set up a new Clerk application. Add your Clerk publishable and secret keys to the .env.local file in your project.

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

How to Set Up Stream in a Next.js app

First, create a Stream account and set up an organization to house your app. Then, copy the following credentials into your .env.local file:

STREAM_APP_ID=
NEXT_PUBLIC_STREAM_API_KEY=
STREAM_SECRET_KEY=
NEXT_PUBLIC_FACETIME_HOST=http://localhost:3000/facetime

Next, install Stream React Video SDK and the Stream Node.js SDK.

npm install @stream-io/video-react-sdk @stream-io/node-sdk

Create a providers folder containing a StreamVideoProvider.tsx file and copy the following code snippet into the file:

"use client";
import { tokenProvider } from "@/actions/stream.actions";
import { StreamVideo, StreamVideoClient } from "@stream-io/video-react-sdk";
import { useState, ReactNode, useEffect } from "react";
import { useUser } from "@clerk/nextjs";

const apiKey = process.env.NEXT_PUBLIC_STREAM_API_KEY!;

export const StreamVideoProvider = ({ children }: { children: ReactNode }) => {
    const [videoClient, setVideoClient] = useState();

    const { user, isLoaded } = useUser();

    useEffect(() => {
        if (!isLoaded || !user || !apiKey) return;
        if (!tokenProvider) return;
        const client = new StreamVideoClient({
            apiKey,
            user: {
                id: user?.id,
                name: user?.primaryEmailAddress?.emailAddress,
                image: user?.imageUrl,
            },
            tokenProvider, //👉🏻 pending creation
        });

        setVideoClient(client);
    }, [user, isLoaded]);

    if (!videoClient) return null;

    return {children};
};

Let’s wrap the entire app with the StreamVideoProvider component, which initializes a Stream client to identify each user.

The StreamVideoClient function takes an object containing the API key, the user object with details from Clerk, and a tokenProvider.

Next, let’s create a Next.js server action (tokenProvider) that generates the token.

Create an actions folder, add a stream.actions.ts file, and copy the following code snippet into the file:

//👇🏻 tokenPrvoider function
"use server";

import { currentUser } from "@clerk/nextjs/server";
import { StreamClient } from "@stream-io/node-sdk";

const STREAM_API_KEY = process.env.NEXT_PUBLIC_STREAM_API_KEY!;
const STREAM_API_SECRET = process.env.STREAM_SECRET_KEY!;

export const tokenProvider = async () => {
    const user = await currentUser();

    if (!user) throw new Error("User is not authenticated");
    if (!STREAM_API_KEY) throw new Error("Stream API key secret is missing");
    if (!STREAM_API_SECRET) throw new Error("Stream API secret is missing");

    const streamClient = new StreamClient(STREAM_API_KEY, STREAM_API_SECRET);

    const expirationTime = Math.floor(Date.now() / 1000) + 3600;
    const issuedAt = Math.floor(Date.now() / 1000) - 60;

    //👇🏻 generates a Stream user token
    const token = streamClient.generateUserToken({
        user_id: user.id,
        exp: expirationTime,
        validity_in_seconds: issuedAt,
    });
    //👇🏻 returns the user token
    return token;
};

Finally, update the RootLayout function in the app/layout.tsx file by wrapping the entire application with the StreamVideoProvider component:

import "@stream-io/video-react-sdk/dist/css/styles.css";
import { StreamVideoProvider } from "./providers/StreamVideoProvider";

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        
            'en'>
                
                    
                        'w-full py-4 md:px-8 px-4 text-center flex items-center justify-between sticky top-0 bg-white '>
                            'flex items-center justify-end gap-5'>
                                {/*-- if user is signed out --*/}
                                
                                    'modal' />
                                
                                {/*-- if user is signed in --*/}
                                
                                    
                                
                            
                        

                        {children}
                    
                
            
        
    );
}

Congratulations! You've successfully integrated Stream into the Next.js app.

How to Create and Join Calls with Stream

In this section, you'll learn how to create, schedule, and join calls using the Stream SDK. You'll also learn how to set up the meeting room with the necessary components and fetch upcoming calls from Stream.

Creating and Scheduling calls

To create an instant meeting, execute the handleStartMeeting function. It generates a random ID for the call and creates the meeting using the current date and the provided description.

import { useStreamVideoClient } from "@stream-io/video-react-sdk";
import { useUser } from "@clerk/nextjs";
const client = useStreamVideoClient();
const { user } = useUser();

const handleStartMeeting = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!client || !user) return;
    try {
        const id = crypto.randomUUID();
        const call = client.call("default", id);
        if (!call) throw new Error("Failed to create meeting");

        await call.getOrCreate({
            data: {
                starts_at: new Date(Date.now()).toISOString(),
                custom: {
                    description,
                },
            },
        });

        setFacetimeLink(`${call.id}`);
        setShowMeetingLink(true);
    } catch (error) {
        console.error(error);
        alert("Failed to create Meeting");
    }
};

The call.getOrCreate() function accepts an optional call description along with the current date and time to initiate the call.

It also allows you to schedule calls for a specific time in the future. In this case, you can specify the desired date and time, and Stream will automatically schedule the call for that period.

import { useStreamVideoClient } from "@stream-io/video-react-sdk";
import { useUser } from "@clerk/nextjs";
const client = useStreamVideoClient();
const { user } = useUser();

const handleScheduleMeeting = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!client || !user) return;
    try {
        const id = crypto.randomUUID();
        const call = client.call("default", id);
        if (!call) throw new Error("Failed to create meeting");

        await call.getOrCreate({
            data: {
                //👇🏻 only necessary changes
                starts_at: new Date(dateTime).toISOString(),
                custom: {
                    description,
                },
            },
        });
        setFacetimeLink(`${call.id}`);
        setShowMeetingLink(true);
    } catch (error) {
        console.error(error);
        console.error("Failed to create Meeting");
    }
};

Joining calls and the Meeting Page

Recall that the meeting link in the app is declared as:

`${process.env.NEXT_PUBLIC_FACETIME_HOST}/${facetimeLink}`
// 👉🏻 format:

Therefore, we need to create the /facetime/ route to enable users to join a call. To do this, create a facetime folder with an [id] directory inside, and within that directory, add a page.tsx file. Then, copy the following code snippet into the file:

"use client";
import { useGetCallById } from "@/app/hooks/useGetCallById";
import { useUser } from "@clerk/nextjs";
import {
    StreamCall,
    StreamTheme,
    PaginatedGridLayout,
    CallControls,
} from "@stream-io/video-react-sdk";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function FaceTimePage() {
    const { id } = useParams<{ id: string }>();
    const [confirmJoin, setConfirmJoin] = useState<boolean>(false);
    const [camMicEnabled, setCamMicEnabled] = useState<boolean>(false);
    const router = useRouter();
    //👇🏻 gets call details by ID
    const { call, isCallLoading } = useGetCallById(id);

    useEffect(() => {
        if (camMicEnabled) {
            call?.camera.enable();
            call?.microphone.enable();
        } else {
            call?.camera.disable();
            call?.microphone.disable();
        }
    }, [call, camMicEnabled]);

    //👇🏻 enable users to join calls
    const handleJoin = () => {
        call?.join();
        setConfirmJoin(true);
    };

    if (isCallLoading) return Loading...;

    if (!call) return Call not found;

    return (
        'min-h-screen w-full items-center justify-center'>
            
                
                    {confirmJoin ? (
                        
                    ) : (
                        'flex flex-col items-center justify-center gap-5'>
                            'text-3xl font-bold'>Join Call
                            'text-lg'>
                                Are you sure you want to join this call?
                            
                            'flex gap-5'>
                                
                                
                            
                        
                    )}
                
            
        
    );
}

When users visit the meeting page, they are presented with a confirmation message, allowing them to confirm that they want to join the call.

In the code snippet above:

The useGetCallById hook is a custom function that retrieves call details based on the call ID.
The handleJoin function allows users to join the call and then displays the component.

Add the MeetingRoom component below the FaceTimePage component:

const MeetingRoom = () => {
    const router = useRouter();

    const handleLeave = () => {
        confirm("Are you sure you want to leave the call?") && router.push("/");
    };

    return (
        'relative min-h-screen w-full overflow-hidden pt-4'>
            'relative flex size-full items-center justify-center'>
                'flex size-full max-w-[1000px] items-center'>
                    
                
                'fixed bottom-0 flex w-full items-center justify-center gap-5'>
                    
                
            
        
    );
};

The PaginatedGridLayout arranges participants in a grid layout with pagination, allowing you to manage larger video calls by displaying a set number of participants per page.

The CallControls component provides built-in actions, such as muting, video toggling, and screen sharing, that can be performed during a call. Both components are part of the Stream SDK, making integration seamless.

Additionally, you can switch to the SpeakerLayout, which highlights the dominant speaker or shared screen while displaying other participants in a smaller view.

Finally, create a hooks folder containing the useGetCallById.ts file and copy the code snippet below into the file:

import { useEffect, useState } from "react";
import { Call, useStreamVideoClient } from "@stream-io/video-react-sdk";

export const useGetCallById = (id: string | string[]) => {
    const [call, setCall] = useState();
    const [isCallLoading, setIsCallLoading] = useState(true);

    const client = useStreamVideoClient();

    useEffect(() => {
        if (!client) return;

        const loadCall = async () => {
            try {
                const { calls } = await client.queryCalls({
                    filter_conditions: { id },
                });

                if (calls.length > 0) setCall(calls[0]);

                setIsCallLoading(false);
            } catch (error) {
                console.error(error);
                setIsCallLoading(false);
            }
        };

        loadCall();
    }, [client, id]);

    return { call, isCallLoading };
};

The code snippet above filters the call list and returns the call with a matching ID, allowing users to join the specified call.

Retrieving Upcoming Calls

To retrieve upcoming calls from Stream, you can create a custom hook that fetches all the calls created by the user, as well as the calls they are a member of.

import { useEffect, useState } from "react";
import { useUser } from "@clerk/nextjs";
import { Call, useStreamVideoClient } from "@stream-io/video-react-sdk";

export const useGetCalls = () => {
    const { user } = useUser();
    const client = useStreamVideoClient();
    const [calls, setCalls] = useState();
    const [isLoading, setIsLoading] = useState(false);

    useEffect(() => {
        const loadCalls = async () => {
            if (!client || !user?.id) return;
            setIsLoading(true);
            try {
                //👇🏻 gets all the calls the user is featured in
                const { calls } = await client.queryCalls({
                    sort: [{ field: "starts_at", direction: -1 }],
                    filter_conditions: {
                        starts_at: { $exists: true },
                        $or: [
                            { created_by_user_id: user.id },
                            { members: { $in: [user.id] } },
                        ],
                    },
                });

                setCalls(calls);
            } catch (error) {
                console.error(error);
            } finally {
                setIsLoading(false);
            }
        };

        loadCalls();
    }, [client, user?.id]);

    const now = new Date();

    //👇🏻 gets only calls that are yet to start
    const upcomingCalls = calls?.filter(({ state: { startsAt } }: Call) => {
        return startsAt && new Date(startsAt) > now;
    });

    return { upcomingCalls, isLoading };
};

The useGetCalls hook retrieves the list of upcoming calls, which can then be displayed in the UpcomingMeeting modal.

Congratulations! You’ve completed the project for this tutorial.

Check out the live app here.

Next Steps

So far, you’ve learned how to build a video conferencing app. If you'd like to learn more about how you can leverage Stream to build scalable apps, then check out these resources:

Before We End...

I hope you found it insightful and that it has given you enough motivation on how to build apps using awesome developer tools.

These are some of my other most recent blog posts.

Check out my blog for more tutorials like this on awesome developer tools.

Follow me on Twitter to stay updated on my side projects and ongoing learning.

Happy coding.

How a Czech DJ Built a 3D Printing Empire

freeCodeCamp — Wed, 31 Mar 2021 20:57:40 +0000

By Jaime Arredondo

In 2012, a young Czech DJ hobbyist was frustrated with the knobs and faders on his music controllers, so went looking for ways to improve them. That’s when he came across 3D printing, and one of the fastest-growing 3D printing companies in the world was born.

Today, I’m going to show you exactly how Prusa3D became one of the fastest-growing hardware manufacturers in Europe. Then you can take inspiration from their exact strategy to grow a hardware company and create a community of contributors who will help you develop and promote your project with close to no resources.

Some background on Prusa

Josef Prusa, Prusa Research’s founder, is a superstar in the 3D printers industry.

You might have already heard about him but if you haven’t…

Prusa Research was founded as a one-man startup in 2012 by Josef Prusa.
His goal with Prusa Research was to create a kind of Thermomix, Europe's favourite all-in-one, easy-to-use kitchen appliance, for 3D printing. He wanted to make a 3D printer that was easy enough that anyone could use it, with guidance on steps and materials.
In 2018 Prusa Research became the fastest-growing tech company in Central Europe (Deloitte Fast 50 2018) after growing 17,118% between 2014 and 2018
Prusa Research has grown from humble beginnings to selling 100,000 printers, employing over 410 employees, and setting up a factory in Prague with 9 floors and a hackerspace on the ground floor
The company brought the Maker Faire to Prague for the first time
Prusa’s website has over one million unique visitors per month, its YouTube Channel has more than 144,000 subscribers, and its forum has over 143,000 members

Josef Prusa was lucky, but also did a lot of things well that we can all learn from.

How? Let’s dive in.

How to solve a problem of your own, give back, and build trust in growing communities

Before the roller coaster started, Josef enrolled in an economics degree to make his parents proud. This resulted in a lot of spare time, so he and his brother began DJing and building their music controllers.

Josef (above), rocking his DJ skills. Little did he know how his life was about to change.

He was looking to make his own knobs and faders, but found the search into it too long and challenging. He then found the RepRap project and Mendel 3D printer.

As you may know, RepRap is a community project started by Doctor Adrian Bowyer at the University of Bath and it kickstarted the desktop 3D printing craze.

The basic idea is that a 3D printer can print as many parts as possible for another 3D printer and as a result, decreases its cost.

But when Josef was building his Mendel Printer, he was finding it too complex. It required many different screw sizes, there were no slots for nuts, and very few parts were push-to-fit.

So he improved the Mendel by making a simpler version; the Simplified Mendel [sic], and shared the designs on GitHub with the rest of the RepRap community.

The community caught up with his simplified model and started using it over the original, and that’s when people started noticing him.

Takeaways:

If you’re a student, have spare time, and/or have no dependents, enjoy this time to experiment and try new things. What are you curious about building?
Identify and solve a problem of your own. What tools are you using? What’s currently frustrating you about them?
Fix or simplify what’s not working. If you don’t know how, what skills would help you? Learn those.
Share your solution in a community that’s active and that has the same problem. You’ll benefit from exposure and feedback to make your solutions better. This way you’ll start building trust among a like-minded audience and you’ll be in touch with what people want.

How to create your first prototype

When Josef was trying to solve his problem, printers were still missing one key component to have the ABS plastic print successful: a heated bed. Without it, prints warped and deformed away from the bed.

To tackle this problem, he came up with a rudimentary prototype (shown above) which consisted of a resistance wire stuck between two sheets of acrylic. It didn’t last very long.

Without letting the setbacks defeat him, he went on to create a second version. This one used a tile instead of acrylics, which was an improvement. But still, it only reached about 90 degrees Celsius, which wasn’t enough either.

After nearly six months of persistent work, the PCB Heatbed MK1 (above) was complete. It was the first real product he created.

This new heatbed could reach 110ºC, more than enough for ABS and other high-temperature plastics.

But many parts of the heatbed were either too expensive or difficult to get, so he redid many on his own.

He soon started receiving requests to print his Prusa Mendel’s parts. He also organized a few local build events, where everybody could build their own parts.

There was so much demand that it was time for Josef to officially start Prusa 3D with his brother Michal.

What’s interesting is that he didn’t start with the company name, the logo, and so on – rather, he started with a problem he had himself, and then he shared publicly, both his problem and his solutions, with others.

By sharing what he was doing with others, people who had the same problem could order his solution. And there were many people who shared his problem, which translated into many orders.

It’s also important to appreciate the persistence and patience it takes to continue iterating for six months in order to create a product that works and one that people want to use.

Josef and his brother began selling their first parts without an e-shop and instead sold them through email and a phone number on a webpage. They also hadn’t perfectly optimized their packaging yet. In the beginning, they packed their heatbeds in a pizza box and shipped them off to their clients.

Josef and Michal didn’t let the lack of a perfect tech solution get in their way. They simply found a way that was good enough to get their idea out the door and then made it better as they went along.

They were also proactive in creating awareness and trust with their audience. In the early days, they kickstarted the community by organizing presentations and going to events to educate people about the possibilities of this new 3D printing idea.

Josef also embodied honesty in his sales. If people came to him but were looking for something he didn’t sell or was a poor fit, he just told them which technology they should use instead.

This earned him a community of loyal users who trusted him and regularly came back to share prints and hacks on the new Prusa Printer's online hub. Whenever Prusa was criticized in their Youtube comment section, a flock of fans spoke up in their defense.

Takeaways:

Start simple before having everything figured out.
Let go of perfectionism or trying to look like established companies. What is good enough for the stage you’re at to satisfy the needs of the people you can serve? If it’s packaging your products in a pizza box instead of providing a delightful unboxing experience, so be it. If it’s not having an e-shop but just an email and a phone number on a simple website, so be it.
Focus on creating a solution that solves the problem for good. It might take some time, but if it hasn’t been solved yet, there’s a good chance it’s because it’s hard to solve. Being persistent and patient requires you to commit and invest at the beginning, but once you get through the other side of the problem, you’ll have something people will flock to. It took Josef Prusa six months before he found a proper solution for his heatbed.
Be radically honest and defend the best interests of your customers. If there is someone else who can serve them better, redirect them there. This builds trust, as people will remember how you treated them with respect.

Should you do everything yourself, or delegate certain tasks?

When we start something and it gets some traction, or even if we just anticipate the traction it can get, thinking about everything that we have to deal with can become overwhelming.

There might be barcode visualization, trademark registration, label design, building walls, building websites, accounting, invoicing, digging drains, dealing with bankers, installing equipment, video-editing, dealing with customer support, and more.

Most of the time we’re not even remotely competent at more than one or two of those things.

So this is the time when we hit a fork in the road. Do we hire or outsource to delegate, or do we do it ourselves?

Prusa’s beginnings are an interesting example of how to go through this period and build for the long term. Below, Josef explains how they went about preparing to scale:

“We never had resellers so we were always in direct contact with the customers in the community and this proved very important for us because you have instant feedback from the people.

If you are just a manufacturer and somebody else is doing the selling for you, you don’t always get all the information back.

In the beginning, it was much tougher for us to do it this way because we not only needed to learn how to make the printers at scale but we also needed to learn how to run a big webshop and how to do the customer support for all these people. It was more difficult but now it’s paying off that we have this direct contact and know how to run every part of the business on our own.”

It wasn’t until October 2013, three years after finishing the initial prototype, that they hired their first employee, Hanka.

How do you get the cash flow to hire people? Well, you sell in advance and produce after. In the beginning, Prusa always had a two week lead time for customers to get a printer.

As they continued to grow, they also hired a Foxconn engineer to deal with quality and a couple more software engineers to lead the engineering team.

They could have spent months or years trying to raise funding through VC or Kickstarter in order to hire people, outsource production and grow much faster.

But they decided instead to invest in the slower and more demanding path of figuring it out on their own, and keeping contact with the customers and their needs. This path has proven to be a much better strategy in the long run.

In 2014, Prusa Research had a revenue of 149.000€, which then grew to 70 million €, employing over 250 employees in 2019 just by bootstrapping the business.

If you aim to change the system, you need to be able to exist independently of it.

Takeaways:

Embrace DIY and learn to do the critical parts of the business yourself. What skills do you need to learn? Where can you learn them?
Once you can no longer do it yourself, understand what needs to be done, and when you have enough cash flow, hire people to do the work with you.

What Prusa stands for

Prusa has exploded because it does a few things very well by always putting their customers' needs first without compromising their values or their price. This in turn helps them build a strong virtuous cycle for their development.

Prusa has a long-term vision

Josef knows what he wants Prusa to become. He wants his printers to be able to print any object with any material and through guided steps, much like a Thermomix for 3D printing. And he wants the least tech-savvy person to be able to operate it.

Having this clarity helps him and everyone in the company align their efforts towards a common goal.

They have amazing customer support

The company also keeps investing in the way it cares for its customers.

They go to great lengths to test every single part of their printers to ensure quality but even that isn’t enough to cover everything – so that’s why they have support.

Almost 20% of their employees work in customer support. They have 12,000 live chats per month in nine languages and deal with over 11,000 emails each month.

Prusa provides high quality products

Investing in making the designs of their 3D printers more functional, simple, and of high quality allows them to avoid competing with the nicer-looking but more expensive 3D printers.

They make an affordable printer

This means that they are not too expensive for everyday consumers, and not too cheap for companies.

They’ve also made their 3D printer upgradable because it saves money for their customers and it builds their clients’ autonomy by helping them learn about the construction of the printer’s hardware.

All Prusa's work is open source

Prusa’s clients are “normal Joes” as Josef describes them, and most don’t care much about open source. But the company does.

Those who care about open source provide valuable contributions that can be added back into the products. Some people will make improvements, some will fill in new code, and all of it helps make the printers better.

The open-source approach is also good for users. Those who want to do modifications find it much simpler because they have the original sources for the printer parts, the firmware, and the electronics.

Josef even has a tattoo of the OHSWA logo to keep himself accountable and honest to the open source vision.

Source: 3D printing Industry

Open source makes it easy for the idea to spread and upskill people who can find new use cases to increase the company’s pace of innovation, and it makes it more affordable to its clients.

They partner with distributors and support their clients even though it decreases their margins

Another counterintuitive thing Prusa does for its clients is that it supports the customers serviced by other distributors.

Many companies would forfeit this channel because it demands high margins and the distributors don’t do support. But they do these distribution partnerships anyway to make it easier for the people they serve to discover and access their printers.

And even if they make no extra money through these channels, they still give them the same level of support as those who buy from their website.

Why? Because caring for their customers is what makes it safe for them to then recommend Prusa to their friends and family, driving more business by word of mouth.

Takeaways:

What is the long term vision of what you’re doing? What happens as you keep developing your organization? What results are you helping people achieve?
How can you invest in better supporting your customers?
What parts of your project can you give away for people to build and learn with you?
What partnerships can you build to distribute your project in places where people need it?

How Prusa Builds and Invests in the Community

We’ve already spoken a lot about how much they invest in customer support, but Prusa also invests heavily in their community.

This does two things: it builds proof of what their product does in the world, and it helps scale even further what their customer support service can do.

To gather their community they do a few things.

The first thing Prusa does is offer two options to customers: They can either buy printers as kits or assembled. 80% of clients buy the printers in kits. Besides saving time in production, this allows the clients to learn how to build their printers and understand how they work.

This approach is raising a generation of makers who can create and fix instead of throw away, building a lot of goodwill for the Prusa brand.

To keep in touch with the community, in the early days Josef Prusa tried to go to as many shows as possible so that he could talk to fans face to face and hear about the awesome projects that could come to life with the help of their printers. He went to Maker Faires and to DIY or 3D-printing events.

Now that the company has grown so much, he can’t go to as many events. But before the pandemic started, there was a team of three to ten people traveling around the world two to four times a month. And they were also organizing their Maker Faire in the Czech Republic.

Takeaways:

Where are your community members hanging out? What blogs or magazines do they read? What podcasts do they listen to? What events do they go to? What youtube channels do they watch? What newsletters do they subscribe to? Who do they follow on Twitter, Facebook, or Linkedin? What forums or groups do they participate in?
What resources do they need to get started that you can facilitate? How can you give them the tools to create what you do?
How can you invite users to participate in the development of your product? Can you open your files and designs for them? How can you invite them to give back and showcase their work or the skills they’re building thanks to you? Where could you use this as proof that your product works?

How to Engage the Community

Many people understand the value of giving free stuff away online to attract a crowd. But I feel that many entrepreneurs haven’t embraced the opportunity and the value of connecting the people in their community with each other.

This is a very powerful idea that can go a long way in building trust and reciprocity with your brand and in getting the community members to spread the word and interact with stories of what you do.

One more powerful thing that Prusa is doing is figuring out how to connect the isolated Maker tribe, and at scale.

Once they gather their community by giving away their designs and connecting with them at events, the next challenge is getting these people to engage. And Prusa does a remarkable job at that.

They’ve created a series of resources that make it easy for people to learn the skills and tools they need to become active members of the community.

In their online hub, they share resources for learning and practice, such as a library of 3D printing models with files, and free guides on how to start 3D printing.

Once people are on their website to grab these resources, they can connect with each other locally or online through a map or in the forums to reach out for support or to go for a beer.

As a quick overview, Prusa provides the resources needed to learn the tools and the skills required to set up and hack a 3D printer. There are manuals, such as a free ebook to teach the basics of 3D printing, assembly instructions in video and ebook form, troubleshooting guides, and of course the downloadable drivers and firmware.

Once people have what they need to learn the basics, they can jump into the Forum to talk about their printer model, stay up to date with General Announcements and releases, find those community members in the Hall of Fame, and discuss the software.

Takeaways:

What resources does your audience need to develop the skills required to use your product and to participate in the community in order to help each other?
Once they trust you, how can you connect them to find support among their peers? What exchanges can you facilitate or what spaces can you create for them to gather and talk about their questions?

In Summary

Prusa’s approach helped them grow over 17,000% without a sales team, only through word of mouth.

It helps that they serve the fast-growing 3D printing market, but still.

Prusa has become a big player and a beloved brand in their industry, proving that you don’t need a huge marketing team or budget to get similar results. You just need a smart and intentional plan.

Here are the key takeaways you can borrow, modify, and adapt for your own business based on Prusa’s real-life marketing tactics:

Takeaway #1: Build a skill to solve a problem of your own

What tool are you using that is not working as you wish it did? Learn the skills to fix or simplify what’s not working.

Once you create your first working solution, share it with communities who already use these tools and have the same problem as you do.

This builds trust, reciprocity, and if people want to buy your solution or they have other problems you can build on, they can tell you.

Takeaway #3: If it’s your first time, be patient

When we first start, we don’t have all the skills we need to find a solution to a problem. Be patient and persistent and embrace failure and rejection. It’s by getting into action that you’ll figure out what’s not working or missing, and what needs adjusting.

Takeaway #4: Start simple, even if you don’t have everything figured out

Let go of perfectionism or trying to look like an established company. What is good enough at the stage you’re at to satisfy the needs of the people you can serve? What is good enough for now to solve other people's problems, build your product, and ship it?

Takeaway #5: Learn to do everything yourself and become autonomous

Don’t delegate too soon. If your goal is to change the system, you’ll have to learn to be autonomous early on and stay in close contact with your customers.

When the time comes to delegate, you’ll know what needs to be done and hire the right people for it.

Takeaway #6: Be radically honest and defend the interests of your customers

If there is a competitor who can serve them better, redirect them there. It will build trust as people will remember how you treated them with respect.

Takeaway #7: Be clear on what you stand for

What is the long term vision of your project? If money and growth is a means to an end, what is that end meant to achieve? What can you do to accelerate or scale this?

For Prusa, it was investing in outstanding customer support and sharing their work in open source to create both a delightful experience and to involve outside experts in their innovation.

Takeaway #8: Find and gather your community

Go meet your community where they hang out to stay in touch with their needs and to connect with them. What forums or groups do they participate in? What events do they go to?

Once you’ve found them, create spaces for them to gather and connect. Josef Prusa started by participating in the RepRap forums and by going to Maker events. Later on, they started organizing their Maker Faire in the Czech Republic.

Takeaway #9: Engage the community

Give them the resources and tools they need to get started. Then invite them to participate in the development of your product by opening your designs.

For those who contribute, you can showcase their work and skills to show your gratitude, and use these contributions also as proof that your product and community work.

Thanks for reading. Inspiration for this article came from The Road to 100,000 Original Prusa 3D printers. You can watch it here:

Why I Struggled to Price My Startup, and How I Finally Launched Tueri.io

freeCodeCamp — Wed, 14 Aug 2019 16:36:05 +0000

By Dane Stevens

Pricing can be the life or death of a bootstrapped startup.

When I started the process of trying to price my startup I became overwhelmed with questions and doubts. Should we have usage-based or a tiered pricing model? How much storage can we offer at each tier? Should we offer a free plan? What should the base price be? What if no one wants to pay for this? What if Tueri is a failure?

I have spent countless hours trying to answer these questions and pricing has been the single most daunting part of launching Tueri. Tueri is a completely bootstrapped startup and ultimately, pricing can be the life or death of it. Investor money is non-existent, meaning the company needs to be profitable at every stage of growth.

It boils down to these two essential questions:

Can I provide exceptional value and service to my customers at this price?
At this price, can Tueri continue to grow and be on the leading-edge so I can continue to deliver exceptional value and service?

These two questions may seem at odds, but they are essential for building a long-term, customer-centric company.

What is Tueri?

The word Tueri is a Latin word that means: preserve. Tueri is an image management and optimization platform based on the idea of an immutable master image.

Tueri uses just-in-time image transformation, compression and conversion to deliver the perfect image to each one of your users in just milliseconds.

The idea for Tueri came during my work as an application developer. As a developer, I build customer-incentive applications for automotive parts companies. The basic premise for these sites is the more auto parts a customer (mechanic shop) buys, the more points they earn. Customers redeem points online for everything from golf clubs to TVs to vacations.

These websites receive daily file feeds from vendors with new, discontinued, and updated products. There are thousands of products and no standardization on image dimensions, file sizes or image hosting HTTP protocol. I built Tueri to solve these problems.

The first version of Tueri was a simple proxy server designed to fetch remote HTTP images and re-serve them over HTTPS, removing insecure-content warnings on our customer-incentive sites.

The next version was a simple one-page PHP script using GraphicsMagick. This script fetched a remote image, resized the image if it was over a predefined width, stored it on the server and served the image over HTTPS.

These iterations soon progressed in scope and features and somewhere along the way, I realized it was saving me obscene amounts of time.

I needed to share this with other developers.

After a lot of work converting a personal project into something I could host for others, I was ready to launch. The only problem was, I had no idea how to price it.

Should we offer a free plan?

Here are some reasons why a free plan makes sense:

User Acquisition — Offering a free plan can help you acquire a ton of new users. This, in turn, should drive growth through word of mouth marketing.
Upselling — A user on the free plan can be upsold to a paid plan.
Supporting the Community — In my jobs as a developer, I have relied on countless free services and have benefited greatly from the open-source community.

My fear of not offering a free plan was that I would have a very hard time acquiring new users. I struggled with this question what seemed like hundreds of times, so I did some research.

I researched countless other startups. I wanted to know whether they offered a free plan, what features they included, what percentage of users were on it and if they were profitable.

I discovered the following:

Free users will drive growth through word of mouth, but they will drive more free plan growth.
A free plan will help you acquire more users, but only a very small percentage of those users will ever convert to a paid plan.
A huge percentage of support is dedicated to free users.
A free plan product is often inferior due to costs associated with back-end services.
This inferior product is the product that people come to know your business by.

The Free Plan Decision

I have decided not to offer a free plan in order to dedicate 100% of our resources to our paying customers. This ensures both the quality of the product and exceptional customer service.

Should we have a usage-based or tiered pricing model?

Usage-Based Pricing

Pros:

Only pay for what you use.
Better for companies with seasonal usage fluctuations.
Better for individual developers where low monthly spend is a priority.

Cons:

Difficult to understand what your actual monthly bill will be.
Potentially drastic monthly bill fluctuations.
Harder for a developer to pitch to their company.
Customer mentality is focused on limiting usage to keep costs down, thus decreasing the perceived value of the product.

Tiered Pricing

Pros:

Easy to understand your monthly bill.
No monthly bill fluctuations.
A fixed monthly amount is an easy pitch for a developer to make to their company.
Customer mentality is focused on getting the most value out of their plan, thus increasing the perceived value of the product.

Cons:

Harder to appeal to all use cases.
Not as ideal for seasonal use customers.
Hard to appeal to individual developers with a minimal budget.

I scoured hundreds of pricing pages from different Software as a Service (Saas) companies; some simple, some complex. I continually gravitated toward tiered pricing models based on the fact that they were easier to understand. Many companies with usage-based pricing dedicate an entire page to explaining how to calculate your monthly bill. Even after following the examples I still could not say for certain what they would cost me.

Let's talk about an example of usage-based pricing for Tueri. Let's say its priced per image transformation. You have a simple responsive website with 10 pages and 10 images per page for a total of 100 images. You check Google Analytics for device usage: you have one desktop resolution, one laptop resolution, two tablet resolutions (portrait and landscape) and two mobile resolutions (portrait & landscape). If every image on every page gets viewed ten times by each resolution you have a total of 6,000 transformations.

Easy right? Not exactly.

In reality, you may have 10,000, 50,000, 100,000 or more page views a month. You could have 20+ different resolutions, HiDPI displays, pages with varying levels of views, and new images added regularly.

You can see how this gets complicated.

The Pricing Model Decision

While it was not an easy decision to make, I concluded that tiered pricing was right for Tueri due to its transparency and simplicity.

What should the base price be?

This has to be the single most difficult question to answer, at least it was for me. One that I will continue to ask and re-evaluate throughout the lifetime of Tueri.

I had to assess:

Are we a premium or a value company?
What type of users do we want to focus our service on?
Do we want to serve millions of customers at a low price or thousands of customers at a higher price?
Can we continue to provide exceptional service to our customers at this price?
What is the time value we are providing to our customers?
What is the monetary value we are providing to our customers?
What does our competition charge, are they profitable, and is their business sustainable?

It boils down to defining priorities:

I want to provide an exceptional level of service to fewer customers.
I am in this for the long-haul and our pricing needs to be sustainable.

The Base Price Decision

Pricing should not be static, you should assess it over time based on feedback from customers, the added value from new features, and operating costs.

We are constantly evaluating our pricing and I would love to know your use case and if our pricing works for you.

Conclusion

I finally realized that I was never going to have it all figured out, so I made the best decisions I could with the available information and launched.

There is no definitive answer to pricing your startup, but keep these things in mind and you won't go wrong:

Exceed your customer's expectations in the service and value you provide.
Price your business for growth.
Launch your startup.
Reevaluate your pricing continually.

Do you have any tips or questions about pricing your startup? Get in touch at dane.stevens@tueri.io.

_Originally published at Tueri.io_

The boring technology behind a one-person Internet company

freeCodeCamp — Mon, 10 Jun 2019 21:51:00 +0000

By Wenbin Fang

Listen Notes is a podcast search engine and database. The technology behind Listen Notes is actually very very boring. No AI, no deep learning, no blockchain. “Any man who must say I am using AI is not using True AI” :)

After reading this post, you should be able to replicate what I build for Listen Notes or easily do something similar. You don’t need to hire a lot of engineers. Remember, when Instagram raised $57.5M and got acquired by Facebook for $1B, they had only 13 employees — not all of them were engineers. The Instagram story happened in early 2012. It’s 2019 now, it’s more possible than ever to build something meaningful with a tiny engineering team — even one person.

If you haven’t used Listen Notes yet , try it now:

https://www.listennotes.com/

Overview

Let’s start with requirements or features of this Listen Notes project.

Listen Notes provides two things to end users:

A website ListenNotes.com for podcast listeners. It provides a search engine, a podcast database, Listen Later playlists, Listen Clips that allows you to cut a segment of any podcast episode, and Listen Alerts that notifies you when a specified keyword is mentioned in new podcasts on the Internet.
Podcast Search & Directory APIs for developers. We need to track the API usage, get money from paid users, do customer support, and more.

I run everything on AWS. There are 20 production servers (as of May 5, 2019):

The servers that run Listen Notes

You can easily guess what does each server do from the hostname.

production-web serves web traffics for ListenNotes.com.
production-api serves api traffics. We run two versions of API (as of May 4, 2019), thus v1api (the legacy version) and v2api (the new version).
production-db runs PostgreSQL (primary and replica)
production-es runs an Elasticsearch cluster.
production-worker runs offline processing tasks to keep the podcast database always up-to-date and to provide some magical things (e.g., search result ranking, episode/podcast recommendations…).
production-lb is the load balancer. I also run Redis & RabbitMQ on this server, for convenience. I know this is not ideal. But I’m not a perfect person :)
production-pangu is the production-like server that I sometimes run one-off scripts and test changes. What’s the meaning of “pangu”?

Most of these servers can be horizontally scaled. That’s why I name them production-something1, production-something2… It could be very easy to add production-something3 and production-something4 to the fleet.

Backend

The entire backend is written in Django / Python3. The operating system of choice is Ubuntu.

I use uWSGI to serve web traffics. I put NGINX in front of uWSGI processes, which also serves as load balancer.

The main data store is PostgreSQL, which I’ve got a lot of development & operational experience over many years — battle tested technology is good, so I can sleep well at night. Redis is used for various purposes (e.g., caching, stats,…). It’s not hard to guess that Elasticsearch is used somewhere. Yes, I use Elasticsearch to index podcasts & episodes and to serve search queries, just like most boring companies.

Celery is used for offline processing. And Celery Beat is for scheduling tasks, which is like Cron jobs but a bit nicer. If in the future Listen Notes gains traction and Celery & Beat cause some scaling issues, I probably will switch to the two projects I did for my previous employer: ndkale and ndscheduler.

Supervisord is used for process management on every server.

Wait, how about Docker / Kubernetes / serverless? Nope. As you gain experience, you know when not to over-engineer. I actually did some early Docker work for my previous employer back in 2014, which was good for a mid-sized billion-dollar startup but may be overkill for a one-person tiny startup.

Frontend

The web frontend is primarily built with React + Redux + Webpack + ES. This is pretty standard nowadays. When deploying to production, JS bundles would be uploaded to Amazon S3 and served via CloudFront.

On ListenNotes.com, most web pages are half server-side rendered (Django template) and half client-side rendered (React). The server-side rendered part provides a boilerplate of a web page, and the client-side rendered part is basically an interactive web app. But a few web pages are rendered entirely via server side, because of my laziness to make things perfect & some potential SEO goodies.

Audio player

I use a heavily modified version of react-media-player to build the audio player on ListenNotes.com, which is used in several places, including Listen Notes Website, Twitter embedded player, and embedded player on 3rd party websites:

Embedded player on 3rd party websites

Podcast API

We provide a simple and reliable podcast API to developers. Building the API is similar to building the website. I use the same Django/Python stack for the backend, and ReactJs for the frontend (e.g., API dashboard, documentation…).

Listen API dashboard

Listen API documentation

For the API, we need to track how many requests a user use in current billing cycle, and charge $$$ at the end of a billing cycle. It’s not hard to imagine that Redis is heavily used here :)

DevOps

Machine provisioning & code deployment

I use Ansible for machine provisioning. Basically, I wrote a bunch of yaml files to specify what type of servers need to have what configuration files & what software. I can spin up a server with all correct configuration files & all software installed with one button push. This is the directory structure of those Ansible yaml files:

I could’ve done a better job in naming things. But again, it’s good enough for now.

I also use Ansible to deploy code to production. Basically, I have a wrapper script deploy.sh that is run on macOS:

./deploy.sh production HEAD web

The deploy.sh script takes three arguments:

Environment: production or staging.
Version of the listennotes repo: HEAD means “just deploy the latest version”. If a SHA of a git commit is specified, then it’ll deploy a specific version of code — this is particularly useful when I need to rollback from a bad deployment.
What kind of servers: web, worker, api, or all. I don’t have to deploy to all servers all at once. Sometimes I make changes on Javascript code, then I just need to deploy to web, without touching api or worker.

The deployment process is mostly orchestrated by Ansible yaml files, and of course, it’s dead simple:

On my Macbook Pro, if it’s to deploy to web servers, then build Javascript bundles and upload to S3.
On the target servers, git clone the listennotes repo to a timestamp-named folder, check out the specific version, and pip install new Python dependencies if any.
On the target servers, switch symlink to the above timestamp-named folder and restart servers via supervisorctl.

As you can see, I don’t use those fancy CI tools. Just dead simple things that actually work.

Monitoring & alerting

I use Datadog for monitoring & alerting. I’ve got some high level metrics in a simple dashboard. Whatever I do here is to boost my confidence when I am messing around the production servers.

Datadog dashboard for Listen Notes, as of Dec 2017.

I connect Datadog to PagerDuty. If something goes wrong, PagerDuty will send me alerts via phone call & SMS.

I also use Rollbar to keep an eye on the health of Django code, which will catch unexpected exceptions and notify me via email & Slack as well.

I use Slack a lot. Yes, this is a one-person company, so I don’t use Slack for communicating with human beings. I use Slack to monitor interesting application-level events. In addition to integrating Datadog and Rollbar with Slack, I also use Slack incoming webhooks in Listen Notes backend code to notify me whenever a user signs up or performs some interesting actions (e.g., adding or deleting things). This is a very common practice in tech companies. When you read some books about Amazon or PayPal’s early history, you’ll know that both companies had similar notification mechanism: whenever a user signed up, there would be a “ding” sound to notify everyone in the office.

Since launched in early 2017, Listen Notes hasn’t got any big outage (> 5 minutes) except for this one. I’m always very careful & practical in these operational stuffs. The web servers are significantly over-provisioned, just in case there’s some huge spike due to press events or whatever.

Development

I work in a WeWork coworking space in San Francisco. Some people may wonder why not just work from home or from some random coffee shops. Well, I value productivity a lot and I’m willing to invest money in productivity. I don’t believe piling time helps software development (or any soft of knowledge/creativity work). It’s rare that I work over 8 hours in a day (Sorry, 996 people). I want to make every minute count. Thus, a nice & relatively expensive private office is what I need :) Instead of optimizing for spending more time & saving money, I optimize for spending less time & making money :)

My office at WeWork

I’m using a MacBook Pro. I run the (almost) identical infrastructure inside Vagrant + VirtualBox. I use the same set of Ansible yaml files as described above to provision the development environment inside Vagrant.

I subscribe to the monolithic repo philosophy. So there’s one and only one listennotes repo, containing DevOps scripts, frontend & backend code. This listennotes repo is hosted as a GitHub private repo. I do all development work on the main branch. I rarely use feature branches.

I write code and run the dev servers (Django runserver & webpack dev server) by using PyCharm. Yea, I know, it’s boring. After all, it’s not Visual Studio Code or Atom or whatever cool IDEs. But PyCharm works just fine for me. I’m old school.

My PyCharm

Miscellaneous

There are a bunch of useful tools & services that I use to build Listen Notes as a product and a company:

iTerm2 and tmux for the terminal stuffs.
Notion for TODO lists, wiki, taking notes, design documents…
G Suite for @listennotes.com email account, calendar, and other Google services.
MailChimp for sending the monthly email newsletter.
Amazon SES for sending transactional & some marketing emails.
Gusto to pay myself and contractors who are not from Upwork.
Upwork to find contractors.
Google Ads Manager to mange direct sales ads and track performance.
Carbon Ads and BuySellAds for fallback ads.
Cloudflare for DNS management, CDN, and firewall.
Zapier and Trello to streamline the podcaster interview workflow.
Medium for the company blog (obviously).
Godaddy and Namecheap for domain names.
Stripe for getting money from users (primarily for API).
Google speech-to-text API to transcribe episodes.
Kaiser Permanente for health insurance.
Stripe Atlas to incorporate Listen Notes, Inc.
Clerky to generate legal documents for fund raising (SAFE) and hiring contractors who are not from Upwork.
Quickbooks for bookkeeping.
1password to manage login credentials for tons of services.
Brex for charge card — you can get incremental $5000 AWS credits, which can be applied on top of the AWS credits from WeWork or Stripe Atlas.
Bonvoy Business Amex Card — You can earn Marriott Bonvoy points for luxury hotels and flights. It’s the best credit card points for traveling :)
Capital One Spark for checking account.

Keep calm and carry on…

As you can see, we are living in a wonderful age to start a company. There are so many off-the-shelf tools and services that save us time & money and increase our productivity. It’s more possible than ever to build something useful to the world with a tiny team (or just one person), using simple & boring technology.

As time goes, companies become smaller and smaller. You don’t need to hire tons of full-time employees. You can hire services (SaaS) and on-demand contractors to get things done.

Most of time, the biggest obstacle of building & shipping things is over thinking. What if this, what if that. Boy, you are not important at all. Everyone is busy in their own life. No one cares about you and the things you build, until you prove that you are worth other people’s attention. Even you screw up the initial product launch, few people will notice. Think big, start small, act fast. It’s absolutely okay to use the boring technology and start something simple (even ugly), as long as you actually solve problems.

There are so many cargo-cult-type people now. Ignore the noises. Keep calm and carry on.

If you haven’t used Listen Notes yet , try it now:

https://www.listennotes.com/

Sending emails with Amazon SES

freeCodeCamp — Mon, 20 Mar 2017 02:49:59 +0000

By Kangze Huang

The Complete AWS Web Boilerplate — Tutorial 3

Part 0: Introduction to the Complete AWS Web Boilerplate

Part 1: User Authentication with AWS Cognito (3 parts)

Part 2: Saving File Storage Costs with Amazon S3 (1 part)

Part 3: Sending Emails with Amazon SES (1 part)

Part 4: Manage Users and Permissions with AWS IAM [Coming Soon]

Part 5: Cloud Server Hosting with AWS EC2 and ELB[Coming Soon]

Part 6: The MongoDB Killer: AWS DynamoDB [Coming Soon]

Part 7: Painless SQL Scaling using AWS RDS [Coming Soon]

Part 8: Serverless Architecture with Amazon Lambda [Coming Soon]

Download the Github here.

Setup

Sending emails with Amazon SES is really straightforward. Let’s start at the set-up. Go to Amazon SES and click Email Addresses in the sidebar. Then click Verify a New Email Address and enter an email you want to use for messaging in the app.

Now go to your email provider and click the verification link. After verifying, go back to Amazon SES Email Addresses tab. You should now see your email verified.

This was necessary for 2 reasons. First is that we need an email for sending a message, and the second is because we are in a sandbox environment. A sandbox environment means you can only send and receive emails from verified addresses, and prevents you from spamming people. This is all the set-up we need for this boilerplate.

If you want be able to send emails to any email address, you need to make a written request to Amazon to graduate from the sandbox environment. To do this, navigate to the top-right hand corner at Support &gt; Support Center.

At this next screen, click Create case.

This is a straightforward form, but we’ll briefly explain. Select Service Limit Increase and set the Limit Type to SES Sending Limits. Now create 2 requests, one where Limit is Desired Daily Sending Quota (how many emails can be sent in one day), and the other where Limit is Desired Maximum Send Rate. Set the New limit value to the amount that you need. Finally, optionally set the Mail Type as it increases you odds of approval. Use transactional if your emails are generated as a request of a user’s activity. There are others available for other use cases.

The rest of the request is easy. Make sure you agree to comply with the Terms of Service, and you have a process to handle bounces and complaints (for when users mark your email as spam). Finally, give a brief explanation of your use case.

Submit your code and you should get an email from Amazon with the results of your service increase request. Once approved, your app can send messages to any email.

The Code

We’re ready to dig into the code! Go to App/src/api/aws/aws_ses.js where the bulk of the code resides. Let’s take a look at the main function sendAWSEmail():

export function sendAWSEmail(email, message){ const ses = new AWS.SES({  region: 'us-east-1' }) const p = new Promise((res, rej)=>{  if(!email|| message){   rej('Missing user email or message content')  }else{   const params = createInquiryParamsConfig(email, message)   // console.log('Sending email with attached params!')   AWS.config.credentials.refresh(function(){    // console.log(AWS.config.credentials)    ses.sendEmail(params, function(err, data) {      if(err){        // console.log(err, err.stack); // an error occurred        rej(err)      }else{       // console.log(data);           // successful response     res('Success! Email sent')      }    })   })  } }) return p}

This is extremely straightforward. We receive two arguments, an email to send to, and a message to be sent. The first thing we do in this function is instantiate the AWS SES object for interacting with AWS by simply passing in the region. Next we check if there is a recipient email and a message. If both are provided, then we can actually send the email.

Assuming we have both a recipient email and message, we will create a params object for AWS SES to read for all the info & options necessary. This params object is created with createInquiryParamsConfig(). Before we dive into that rabbit hole, let’s just quickly finish up explaining the rest of sendAWSEmail(). We refresh AWS Cognito user’s credentials (that we set with AWS Cognito, explained in my other tutorial) and call ses.sendEmail with params and a response callback passed in. Reject the promise if there is an error, and resolve with a success message if there is no error. ses.sendEmail is the only AWS function we will use, and everything else is we need is determined in params.

Now let’s see how to make params with createInquiryParamsConfig().

function createInquiryParamsConfig(email, message){ const params = {   Destination: {      BccAddresses: [],     CcAddresses: [],     ToAddresses: [ email ]   },   Message: {      Body: {        Html: {         Data: generateHTMLInquiryEmail(landlordEmail, message),         Charset: 'UTF-8'       }     },     Subject: {        Data: 'Kangzeroos Boilerplate says hi ' + email,       Charset: 'UTF-8'     }   },   Source: 'yourApp@gmail.com',    ReplyToAddresses: [ 'yourApp@gmail.com' ],   ReturnPath: 'yourApp@gmail.com' } return params}

Pretty straightforward, we pass in email and message, and return a big javascript object. All the values you see here are necessary, but you can add a ton of other optional configurations too. The function we must pay attention to is generateHTMLInquiryEmail(). Let’s look at that.

function generateHTMLInquiryEmail(email, message){ return `                    title                                                                                                                                                                                                                   ${message}
                                                                
                          
                                        
                                                                                                                                                                        Send From: 
 ${email}                                                                
                          
                                        
              
                
      
       `}

All we are doing here is creating an HTML file and passing in the email and message to create a custom email. We use ES6 string literals to add in string variables with ${ } like so:

`${message`}.

And that’s it! You can use whatever front end code you want, simply pass in an `email` and `message` to `sendAWSEmail()`. Just remember `sendAWSEmail()` returns a promise, so you will have to handle that accordingly. If you don’t know how to handle promises, check out my other tutorial here.

See you next time!

Part 0: Introduction to the Complete AWS Web Boilerplate

Part 1: User Authentication with AWS Cognito (3 parts)

Part 2: Saving File Storage Costs with Amazon S3 (1 part)

Part 3: Sending Emails with Amazon SES (1 part)

Part 4: Manage Users and Permissions with AWS IAM [Coming Soon]

Part 5: Cloud Server Hosting with AWS EC2 and ELB[Coming Soon]

Part 6: The MongoDB Killer: AWS DynamoDB [Coming Soon]

Part 7: Painless SQL Scaling using AWS RDS [Coming Soon]

Part 8: Serverless Architecture with Amazon Lambda [Coming Soon]

This method was partially used in the deployment of renthero.ca

The State Of JavaScript 2016: Results

freeCodeCamp — Mon, 03 Oct 2016 14:24:20 +0000

By Sacha Greif

The Wait Is Over

I just looked through my inbox, and found a receipt for the awesome React for Beginners course dated November 4, 2015. So it’s been almost one full year since I ventured into the Wild West of modern JavaScript development.

I’m now fairly confident in my React skills, but it seems like as soon as I master one challenge, another one pops up: should I use Redux? Or maybe look into Vue instead? Or go full-functional and jump on the Elm bandwagon?

I knew I couldn’t be the only one with these question, so I decided to launch the State of JavaScript survey to get a more general picture of the ecosystem. Turns out I hit a nerve: within a week, I had accumulated over 9000 responses (no meme intended)!

It took me a while to go through the data, but the results are finally live!

Check out the survey results here

And if you’d like to know a little bit more about the whole enterprise, just read on.

Analyzing the Data

You might be wondering why it took me so long to analyze and publish the data. Hopefully this will become clear when you read through the report.

I didn’t want to simply publish a bunch of charts with no context. Raw stats are great if you already know what you’re looking for, but if you’re looking for guidance then they can just as well add to the overall noise.

Instead, I decided to use these stats as a basis for a detailed report on the current state of JavaScript.

The Authors

I was originally planning on writing the whole thing myself, but I quickly realized that A) this would be a lot of work and B) I didn’t want the report to be too biased by my own preconceptions.

So I asked a few developer friends to pitch in and write the various sections of the report. Not only is the overall report a lot more objective –and interesting– as a result, but I was also able to get experts for each topic (I’ll be the first to admit that there are entire swathes of the JavaScript world I know little about).

So a huge thank to all the authors who contributed to the report: Tom Coleman, Michael Rambeau, Michael Shilman, Arunoda Susiripala, Jennifer Wong, and Josh Owens.

The Charts

Here’s a little more info about the main types of chart you’ll see throughout the survey.

Stacked Bar Chart

This is the main chart for each section. For each technology, it shows the breakdown of developers who have never heard of it, have heard of it but aren’t interested/want to learn it, and have used it and would not/would use it again.

You can toggle between percents and absolute numbers as well as filter by interest or satisfaction. But note that when filtering, the percentages are relative to the currently selected value pair (in other words both numbers total 100%).

Heatmap

I also wanted to explore the correlations between each technology.

The heatmap charts achieve this by showing you how likely someone who uses one technology (defined as having selected “I have used X and would use it again”) is to use another technology, compared to the average.

Pink means very likely, blue means very unlikely. In other words, a deep pink tile in the React row and Redux column means “React users are a lot more likely than average to also use Redux”.

Built With

I decided to practice what I preached and build the survey app itself using modern JavaScript tools, namely React powered by the excellent Gatsby static site generator.

It might seem weird at first to use React for what is essentially a static HTML page, but it turns out this brings a ton of advantages: for example, you’re able to use React’s vast ecosystem of modules such as the great Recharts library.

In fact I believe this may just prove to be a new, better approach for developing static sites, and I hope to write a more detailed post about it soon.

Partners

Finally, I wouldn’t have been able to take a month off to work on this without financial support from some really cool people.

Both Wes Bos (who has put out the afore-mentioned React for Beginners as well as the new ES6 for Everybody) and egghead.io (which in my opinion is the single best resource out there for learning cutting-edge JavaScript development) accepted to sponsor the project. Thanks guys!

Support the Project

If you think what I’ve done here is valuable and would like to support the project, a tweet or share would be much appreciated!

Additionally, you can also contribute a donation to get access to the raw anonymized data (or just enter “0” to get it for free).

What’s Next

Now that the survey is over and we all know what the best technologies are, hopefully we can put any talks of “JavaScript fatigue” or “endless churn” to rest and move on with our programming lives.

Haha, as if!

If one thing has become clear to me, it’s that the growing pains that JavaScript is going through right now are only the beginning. While React has barely emerged as the victor of the Front-End Wars of 2015, some developers are already decrying React for not being functional enough, and embracing Elm or ClojureScript instead.

In other words, my job here isn’t done, and I fully intend to do this survey again next year! If you want to be notified when that happens, I encourage you to leave me your email here.

Until then, I can only hope these survey results will provide a little clarity in our never-ending quest to make sense of the JavaScript ecosystem!

Hard-Earned Android Programming Experiences

freeCodeCamp — Thu, 07 Jul 2016 15:42:18 +0000

By Arun (now voidmain.dev)

This post, like Kent Beck says in his book Implementation Patterns, “…is based on a rather fragile premise that good code matters…”. But we all know that clean code matters as we’ve had to deal for so long with its lack. And so does Kent.

Kent Beck

The Total Cost of Owning a Mess

A few years ago, like every naive Android developer working in an early-stage startup in India, I tried to “hack” real world problems, to “disrupt the industry” and to put a “dent in the universe”. Without a care in the world about good software design or architecture, I started writing code to build an Android app that would one day become one of the biggest consumer heath-care apps in India.

Sprint after sprint, hack after hack, features were built in a mad rush. Build. Measure. Learn. Time-to-market was important and every day mattered. Time flew by, we were growing at the rate of 1 team member every 6 months and the app had hit the million downloads mark.

Our app’s Google Play store downloads and rating.

By this time, the app had stopped being trivial and it had become a multi-tenant client, if that’s even a thing. Features that would take hours when we started now took days, sometimes weeks. Every Activity was 1000+ lines of spaghetti code as Android inherently doesn’t worry too much about the separation of concerns. The total cost of owning a mess had significantly slowed us down.

The Android Conundrum

The code looked ugly, Activities managed everything:

Threading
I/O
Computation
Layouts
Config changes
What not

After all, Activities are Controllers, right? Or are they Views? I didn’t know anymore.

MVC

The Grand Redesign In The Sky

We needed to design the app in a way that changing a line of code somewhere did not break something somewhere else. The app had to be, as Uncle Bob says, “robust but not rigid, flexible but not fragile”.

Robert “Uncle Bob” Martin

This was when my mentor and friend Kashif Razzaqui joined the team to help us alleviate the mess. The grand redesign never happened, but we refactored the hell out of our code:

We added a “service” layer and moved all the non-UI code into them, one service at a time.
We chucked AsyncTasks and moved to ListenableFutures using Guava.
We dumped AsyncHttpClient for OkHttp.
But more importantly, we started reading a lot: Clean Code, Clean Architecture, SOLID, DRY, The Pragmatic Programmer, Java Concurrency In Practice, Domain Driven Design, etc.

Soon we started seeing the benefits of our efforts. Productivity increased, we were writing things faster, everyone was happy.

This was until we unified our apps and all hell broke lose. Just having an additional service layer didn’t cut it.

The Art of Clean Code

After watching Uncle Bob’s videos on Clean Architecture multiple times and reading a lot on Android app architecture, I decided to experiment with the MVP design pattern and RxJava.

A few days into the experimentation, we decided to switch to RxJava and implement MVP using Clean Architecture. We made sure we encapsulated all layers behind interfaces and separated concerns well.

The View, usually implemented by a Fragment, contains a reference to the presenter. The only thing that the view will do is to call a method from the Presenter every time there is an interface action.
The Presenter is responsible to act as the middle man between View and Model. It retrieves data from the Model and returns it formatted to the View. But unlike the typical MVC, it also decides what happens when you interact with the View.
The Model is only the gateway to the domain layer or business logic.
The Interactor deals with I/O and is the provider of data to be displayed in the View.

Now it’s much easier to switch out one layer with a completely new implementation. Redesigning the UI, a part and parcel of Android app development, has become much easier. Things can finally move fast without breaking.

The Boy Scout Rule

It’s not enough to write code well, the code has to be kept clean over time. The fact of life is that software has a tendency for entropy. We’ve all seen code rot and degrade over time so we borrowed the simple boy scouts rule: “Leave the campground cleaner than you found it.”

If we all checked-in our code a little cleaner than when we checked it out, the code simply could not rot. The cleanup doesn’t have to be something big. Change one variable name for the better, break up one function that’s a little too large, eliminate one small bit of duplication, clean up one composite if statement.

Conclusion

Our way of building a scalable app might not be “correct” and you might not agree with this post. After all, not all martial artists agree about the best martial art, or the best technique within one ;)

There are many different approaches towards MVP and a lot of interesting solutions to adapt it to Android. The one fact that we can’t deny is that Clean Code matters and you just can’t sweep it under a rug.

This post borrows heavily from Uncle Bob’s Clean Code and steals the title from Kashif’s Droidcon talk from 2011.

If Clean Code matters to you, let’s chat :)
_Twitter: @_arunsasi_
LinkedIn: https://www.linkedin.com/in/arunsasidharan

Startups - freeCodeCamp.org

How I Built a Custom Video Conferencing App with Stream and Next.js

Table of Contents:

What is Stream?

Prerequisites

How to Build the App Interface with Next.js

'font-bold text-2xl text-center'>FaceTime

The Create Link Modal

The Instant Meeting Modal

The Join Meeting Modal

How to Authenticate Users with Clerk

How to Set Up Stream in a Next.js app

How to Create and Join Calls with Stream

Creating and Scheduling calls

Joining calls and the Meeting Page

'text-3xl font-bold'>Join Call

Retrieving Upcoming Calls

Next Steps

Before We End...

How a Czech DJ Built a 3D Printing Empire

Some background on Prusa

How to solve a problem of your own, give back, and build trust in growing communities

How to create your first prototype

Should you do everything yourself, or delegate certain tasks?

What Prusa stands for

Prusa has a long-term vision

They have amazing customer support

Prusa provides high quality products

They make an affordable printer

All Prusa's work is open source

They partner with distributors and support their clients even though it decreases their margins

How Prusa Builds and Invests in the Community

How to Engage the Community

In Summary

Takeaway #1: Build a skill to solve a problem of your own

Takeaway #2: Share your solution in public

Takeaway #3: If it’s your first time, be patient

Takeaway #4: Start simple, even if you don’t have everything figured out

Takeaway #5: Learn to do everything yourself and become autonomous

Takeaway #6: Be radically honest and defend the interests of your customers

Takeaway #7: Be clear on what you stand for

Takeaway #8: Find and gather your community

Takeaway #9: Engage the community

Why I Struggled to Price My Startup, and How I Finally Launched Tueri.io

Pricing can be the life or death of a bootstrapped startup.

What is Tueri?

Should we offer a free plan?

The Free Plan Decision

Should we have a usage-based or tiered pricing model?

Usage-Based Pricing

Tiered Pricing

The Pricing Model Decision

What should the base price be?

The Base Price Decision

Conclusion

The boring technology behind a one-person Internet company

Overview

Backend

Frontend

Audio player

Podcast API

DevOps

Machine provisioning & code deployment

Monitoring & alerting

Development

Miscellaneous

Keep calm and carry on…

Sending emails with Amazon SES

The Complete AWS Web Boilerplate — Tutorial 3

Table of Contents

Setup

The Code

${message}

Table of Contents

The State Of JavaScript 2016: Results

The Wait Is Over

Check out the survey results here

Analyzing the Data

The Authors

The Charts