Forem: Kunga Tashi

Bunkr - the flatmate finder, built with React Native and Expo.

Kunga Tashi — Thu, 22 May 2025 14:58:08 +0000

Recently, on 11th May 2025, we took our app bunkr - the flatmate finder live. You can download it on both Playstore and Appstore through this link bunkr. Here, I wanted to share the various tools and libraries we used in it and the experience of taking the project live.

Expo:

Building with expo was a no brainer especially with a generous free tier for builds and updates, instead of dealing with painful headaches of gems for ios and gradle in android, we can just run build for both the platforms with one command and focus on shipping features and resolving bugs.

Currently we still run build commands and submit manually for each version that we want to send for review, but we will soon be integrating CI / CD builds along with expo access token to make our deployment more streamlined.

Reanimated gestures and interpolation:

One of the key aspects of using bunkr is the all too familiar swipe gesture that lets you like or dislike a potential flatmate. To achieve smooth swiping animations, having the bunch of UI calculations like gestures detection and rotation interpolation being done on the UI thread was a must and reanimated by software mansion does the job perfectly. They are currently working on a VSCode extension that gives a much richer experience developing react native apps, so do check that out.

Tamagui as UI library:

If you want to build a universal app, tamagui is the way to go. its compatible with ios, android and the web while also giving great primitives to build our design system. One problem we faced was the lack of documentation but cursor's @doc feature helped a ton.

Tanstack Query:

All of our network requests are done using tanstack query and why not? Having a great data fetching library is the corner stone for a good db state management. I am extremely bullish on any software Tanner works on, as there is a guarantee of maintenance, code mods for migration and type safety.

This was my first time submitting apps to play store and app store and I wasn't aware of the amount of changes that would be requested, that too sequentially. For any body else thinking of sending their apps for review, do it as soon you get your core feature built as going through app store review might involve integrating apple's authentication system, drastic changes to onboarding flows and user data access and you would want those feed back reaching you in your early days of building your app.

While building bunkr was a ton of fun and we learned a lot, it can be painful at times when app store reviews take longer than expected, when taking out time for bunkr with a full time job seems impossible and the involuntary procrastination which constantly gives you the anxiety that this project might also not see the light of day.

So, what's next? Currently bunkr is available for use in the city of Bangalore and the idea would be to make bunkr the go to app to find virtue aligned flatmates, whether you're a working professional, college student, startup founder or anyone in between. Feel free to contact me at support@bunkr.in for any feature requests or bug fixes.

Scale font size the right way.

Kunga Tashi — Wed, 13 Mar 2024 21:05:51 +0000

Hey there, I recently found this simple way of organising font sizes for different html semantics like h1, h2, p etc and also maintain the visual hierarchy among them.

Here is the snippet of it.

root: {
    --p: 1rem;
    --font-scale: 1.2;
    --h5: calc(var(--p) * var(--font-scale));
    --h4: calc(var(--h5) * var(--font-scale));
    --h3: calc(var(--h4) * var(--font-scale));
    --h2: calc(var(--h3) * var(--font-scale));
    --h1: calc(var(--h2) * var(--font-scale));
}

This has mainly two benefits:
first: you always maintain the hierarchy, the magnitude depends on what you set for --font-scale variable so tinker with it to get your perfect size.
second: when building responsive web apps with media queries, you only have to apply media query for --p, the rest will scale w.r.t to that value.

Configure this in your Tailwind config to use these variables.

const config = {
 theme: {
  extend: {
   fontSize: {
     p: "var(--p)",
     h5: "var(--h5)",
     h4: "var(--h4)",
     h3: "var(--h3)",
     h2: "var(--h2)",
     h1: "var(--h1)",
    },
  }
 }
}

I hope this helps bring font size consistency in your next project.

Follow me [twitter].(https://twitter.com/kuntashTweets/)
I also run a small web agency actualizeui.

Make your product collaborative with Convex

Kunga Tashi — Wed, 13 Mar 2024 17:04:15 +0000

Hey there, this blog will guide you on how you can turn your product into a collaborative environment using Convex. We will build a simple text editor as our product and integrate realtime collaboration into it.

Repository Setup:

Let us start by scaffolding a new ( Typescript + Next.js ) repo. We will also use Tailwind CSS and Shadcn to easily build the UI.

npx create-next-app@latest

Next, lets integrate Shadcn by running the following command:

npx shadcn-ui@latest init

Lets build the UI:

Go to page.tsx and remove the boiler plate UI. We will make the container fit the screen and give it a light slate background to give a good contrast with the text editor which will be white.
Here is how page.tsx should look like:

import { TextEditor } from "@/components/editor";

export default function Home() {
  return (
    <main className="min-h-screen flex justify-center bg-slate-100">
      <TextEditor />
    </main>
  );
}

Next we will build the TextEditor component using the react-quill package. Lets start by installing it.

npm i react-quill

Lets use the package to render a text editor and create a header to show avatars of users working on it:

"use client";

import React, { useState } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.bubble.css";

export const TextEditor = () => {
  const [value, setValue] = useState("<p>Write something here</p>");
  return (
    <div className="max-w-[800px] w-full flex flex-col gap-y-4 items-center">
      {/* Container for avatars  */}
      <div className="bg-white w-full rounded-lg shadow-md p-2 h-10">

      </div>
      {/* Editor */}
      <div className="flex-1 bg-white w-full rounded-lg shadow-md overflow-hidden p-4">
        <ReactQuill
          value={value}
          onChange={(changedHTML) => {
            setValue(changedHTML);
          }}
          theme="bubble"
          className="h-full"
        />
      </div>
    </div>
  );
};

We are using bubble theme because the UI feels, we now should have a controlled text editor that looks like this:

Integrating with convex:

Let us start, working on integrating convex. Start by creating a new convex account, then create a project. I am calling it edit-now.

Now install convex's SDK with npm install convex.

After that run npx convex dev, this will prompt you to login with your convex credentials, and choose your project. After the authentication is done, it will create a convex/ folder in your root dir in which you will define your schemas, queries and actions. It will create .env.local file if you don't already have done to configure your dev URL.
Note: the command won't exit since it tracks your changes in the convex/ folder and syncs it with your dashboard in realtime.

Provider: Wrap your app with as shown below.

"use client";
import { TextEditor } from "@/components/editor";
import { ConvexProvider, ConvexReactClient } from "convex/react";

const client = new ConvexReactClient(
  process.env.NEXT_PUBLIC_CONVEX_URL as string
);

export default function Home() {
  return (
    <ConvexProvider client={client}>
      <main className="min-h-screen flex justify-center bg-slate-100 p-4">
        <TextEditor />
      </main>
    </ConvexProvider>
  );
}

You can only run queries and mutation inside your

Before working on the Schema, lets dive into how the application will work.

User lands on the website: We will create a user record in the table with a random name, with a *last_seen_online * property that we will keep updating every minute.
User types in the editor: We will update the document with the new content, we will also use debounce so that that document only changes when the user stops typing.
Start a cron job: To manage active users, we have a last_seen_online property that changes every minute so whenever a user is not active their property won't get updated and so we will get all the users where the difference between the current time and last_seen_online property is more than 1 minute and then delete all of them. We will run this function 5 minutes using a cron job.
Fetch list of users: Since we now know that all the record in users table are active users, we will basically fetch all of them to render on the UI.

Defining Schema: Create a schema.ts file inside the convex folder to create your schemas.

import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
  documents: defineTable({
    body: v.string(),
  }),
  users: defineTable({
    name: v.string(),
    last_seen_online: v.number(),
  }),
});

We have two tables, documents will store multiple document records but in our case we only have one, users will store all the active users.

If you now go and check your Dev Dashboard you will see all the tables are already defined. Go ahead and create a record in documents which will be the document we will work on.

Following are the mutations and queries we will create.

Mutations: createUser, updateLastSeenOnline, deleteUsers, updateDocument.

Queries: getActiveUsers, getCurrentDocument

If you don't know what Mutations or Queries mean, mutations are basically async functions that modify your data either by creating, deleting or updating while queries are async functions that return data from your table. Convex also has internal functions which can only be called by mutations or queries for better security.
We will use a folder structure like -> convex/${function}/${resource} to create our mutations and queries.
So convex/mutations/users.ts will have these mutations defined:

import { v } from "convex/values";
import { mutation } from "../_generated/server";

// Create user mutation
export const createUser = mutation({
  args: {
    name: v.string(),
  },
  handler: async (ctx, args) => {
    const users = await ctx.db.query("users").collect();
    if (users.length > 10) return null;
    const newUserId = await ctx.db.insert("users", {
      name: args.name,
      last_seen_online: Date.now(),
    });
    return newUserId;
  },
});

// updates last_seen_online property
export const updateLastSeenOnline = mutation({
  args: {
    id: v.id("users"),
  },
  handler: async (ctx, args) => {
    try {
      await ctx.db.patch(args.id, {
        last_seen_online: Date.now(),
      });
    } catch (error) {
      console.log(error);
    }
  },
});

// mutation which we will run as a cron job
export const deleteInActiveUsers = mutation({
  handler: async (ctx) => {
    const inActiveUsers = await ctx.db
      .query("users")
      .filter((q) => {
        return q.gte(q.sub(Date.now(), q.field("last_seen_online")), 60000);
      })
      .collect();
    inActiveUsers.forEach((inActiveUser) => {
      ctx.db.delete(inActiveUser._id);
    });
  },
});

Similarly, in convex/mutations/documents.ts:

import { v } from "convex/values";
import { mutation } from "../_generated/server";

export const updateDocument = mutation({
  args: {
    body: v.string(),
    id: v.id("documents"),
  },
  handler: async (ctx, args) => {
    return await ctx.db.patch(args.id, {
      body: args.body,
    });
  },
});

convex/queries/documents.ts: Just fetch first document, since we are working on just one currently.

import { query } from "../_generated/server";

export const getDocument = query({
  handler: async (ctx) => {
    try {
      const document = (await ctx.db.query("documents").collect())?.[0];
      return document;
    } catch (error) {}
    return null;
  },
});

And convex/queries/users.ts:

import { query } from "../_generated/server";

export const getActiveUsers = query({
  handler: async (ctx) => {
    try {
      const users = await ctx.db.query("users").collect();
      return users;
    } catch (error) {
      console.log(error);
    }
  },
});

Cron to delete inactive users every minute at convex/crons.ts:

import { cronJobs } from "convex/server";
import { api } from "./_generated/api";

const crons = cronJobs();

crons.interval(
  "clear inactive user every minute",
  { minutes: 1 },
  api.mutations.users.deleteInActiveUsers
);

export default crons;

Tip: You can visit Convex dashboard and in the functions section, all your functions will be there, you can test your functions there to see if they are working correctly. Further more, since convex always syncs, if there is any error in the function definition you can see it in your shell.

Calling Convex mutations and queries from client:

We will start by creating a user record whenever a user visits the page and updating last_seen_online property every minute with setInterval.
Convex provides client side hooks like useMutation and useQuery similar to tanstack-query for using your functions easily from the client.
Since we have wrapped in page.tsx we cannot use queries and mutations inside there so we will create an component and call our page wide mutations there.

page.tsx:

"use client";
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { App } from "@/components/app";

const client = new ConvexReactClient(
  process.env.NEXT_PUBLIC_CONVEX_URL as string
);

export default function Home() {
  return (
    <ConvexProvider client={client}>
      <App />
    </ConvexProvider>
  );
}

components/app.tsx:

/* ----- Necessary imports ----*/

import React, { useEffect, useState } from "react";
import { TextEditor } from "./editor";
import { generateRandomCapitalLetter } from "@/util";
import { useMutation } from "convex/react";
import { api } from "../../convex/_generated/api";
import { Id } from "../../convex/_generated/dataModel";

export const App = () => {
  const createUserMutation = useMutation(api.mutations.users.createUser);
  const updateLastSeenOnlineMutation = useMutation(
    api.mutations.users.updateLastSeenOnline
  );

  const [currentUserId, setCurrentUserId] = useState<Id<"users"> | null>(null);

  useEffect(() => {
    const createUser = async () => {
      const firstName = generateRandomCapitalLetter();
      const lastName = generateRandomCapitalLetter();
      try {
        const userId = await createUserMutation({
          name: `${firstName}.${lastName}`,
        });
        setCurrentUserId(userId as Id<"users">);
      } catch (error) {
        console.log(error);
      }
    };
    createUser();
    const intervalId = setInterval(() => {
      if (currentUserId)
        updateLastSeenOnlineMutation({
          id: currentUserId,
        });
    }, 60000);
    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return (
    <main className="min-h-screen flex justify-center bg-slate-100 p-4">
      <TextEditor />
    </main>
  );
};

If you now check the users table in Convex's dashboard, you should see a record created and if you close the tab, the record will get deleted the next time cron runs.

Now, lets fetch the online users and render them as Avatars.

First go the Shadcn's website and install the Avatar component by running:

npx shadcn-ui@latest add avatar

Next, open editor.tsx file and inside the TextEditor component, write following query logic to fetch users, render them in the container we designed.

Similary, we will fetch the document, set it to react state and create a useEffect dependent on the document, so that whenever document changes we update the local state.

After that, create a function that accepts HTML and updates our document, now we don't want to update whenever user types, so we will create a useDebounce hook for it. Then call it inside the onChange callback of react quill.

useDebounce hook:

import { debounce } from "lodash";
import { useEffect, useMemo, useRef } from "react";

export const useDebounce = (callback: any) => {
  const ref = useRef<any>();

  useEffect(() => {
    ref.current = callback;
  }, [callback]);

  const debouncedCallback = useMemo(() => {
    const func = () => {
      ref.current?.();
    };

    return debounce(func, 1000);
  }, []);

  return debouncedCallback;
};

Text Editor:

"use client";

import { useMutation, useQuery } from "convex/react";
import React, { useEffect, useState } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.bubble.css";
import { api } from "../../convex/_generated/api";
import { Avatar, AvatarFallback } from "./ui/avatar";
import { useDebounce } from "@/hooks/use-debounce";

export const TextEditor = () => {
  const activeUsers = useQuery(api.queries.users.getActiveUsers);
  const updateDocumentMutation = useMutation(
    api.mutations.documents.updateDocument
  );
  const document = useQuery(api.queries.documents.getDocument);

  const [value, setValue] = useState("<p>Write something here</p>");

  const updateChangedHTML = async () => {
    console.log("Update html");
    if (document?._id)
      await updateDocumentMutation({
        id: document?._id,
        body: value,
      });
  };

  const debouncedUpdateChangedHTML = useDebounce(updateChangedHTML);

  const onChange = (changedHTML: string) => {
    setValue(changedHTML);
    debouncedUpdateChangedHTML();
  };

  useEffect(() => {
    setValue(document?.body as string);
  }, [document]);

  return (
    <div className="max-w-[800px] w-full flex flex-col gap-y-4 items-center">
      {/* Container for avatars  */}
      <div className="bg-white w-full rounded-lg shadow-md p-2 flex gap-x-2">
        {activeUsers?.map((activeUser) => (
          <Avatar
            key={activeUser?._id}
            className="bg-white border border-green-500"
          >
            <AvatarFallback className="text-sm">
              {activeUser?.name}
            </AvatarFallback>
          </Avatar>
        ))}
      </div>
      {/* Editor */}
      <div className="flex-1 bg-white w-full rounded-lg shadow-md overflow-hidden p-4">
        <ReactQuill
          value={value}
          onChange={onChange}
          theme="bubble"
          className="h-full"
        />
      </div>
    </div>
  );
};

Production Deployment:

If you see the Convex Dashboard carefully, you can change between Dev mode and Prod mode. Till now we have been working with Dev mode but when you deploy you want to be in prod mode therefore you need to make some minor changes.

Second: Go to your Prod dashboard's setting, environment variable section and Click one generate production key. Copy this key and set it as CONVEX_DEPLOY_KEY env variable in vercel prod.

Here is the link to the github repo

Thats it, Congrats you now know how to build a realtime collaboration tool. You can extend this project by implementing live cursors, different colors for different users, authenticating etc but the goal of this blog was to introduce you to how I would go about implementing realtime collaborative feature in a product.

Feel free to leave any comments if you have any doubts or got stuck somewhere.

Follow me on twitter
I also run a small web agency that helps develop your ideas into marketable MVPs, check it out here.