DEV Community: Shubhdeep Chhabra

Ion - A Realtime Ride Coordination Platform

Shubhdeep Chhabra — Thu, 07 May 2026 05:14:11 +0000

Most motorcycle group rides are honestly chaotic.

Someone always misses a turn.
Someone gets stuck behind a signal.
Half the group disappears after 10 minutes.
And communication while riding is terrible.

People usually rely on:

Bluetooth helmet communicators
random WhatsApp calls
location sharing apps
or straight-up shouting at fuel stops

None of those really solve the actual problem.

So during the MeDo hackathon, I decided to build something specifically for motorcycle groups.

That project became Ion.

A realtime platform where riders can:

see each other live on a map
talk using push-to-talk voice
send SOS alerts
coordinate rides directly in the browser

No app installs.
No setup headaches.
Just create a ride and share a room code.

The Original Idea

The idea started very small.

I just wanted:

“a simple live map for group rides.”

But once realtime syncing started working properly, the project kept expanding.

Suddenly it became:

live GPS tracking
realtime member presence
voice communication
hazard markers
ride events
emergency alerts
automatic ride cleanup
mobile-first UI

And honestly, this project became way more technically complex than I initially expected.

Building Realtime Systems Is Weird

The hardest part was not the UI.

It was syncing everything reliably in realtime.

I used:

React + TypeScript
Vite
Supabase
PostgreSQL
Supabase Realtime
WebRTC
Leaflet maps

The realtime architecture became the core of the project.

Every rider joining a ride creates a live synchronized session:

location updates
ride events
chat
presence state
emergency alerts

Everything updates instantly across all connected riders.

One of the best decisions during development was using Supabase Realtime subscriptions instead of manually building websocket infrastructure.

That alone saved an insane amount of time.

The Feature That Surprised Me the Most

Ironically, the most impressive feature was not voice chat.

It was automatic ride cleanup.

Sounds boring, but it solved a real problem.

Imagine this:

everyone closes the tab
someone loses internet
the ride creator disconnects
nobody clicks “End Ride”

Without cleanup logic, rides would stay alive forever as ghost sessions.

I explained this problem conversationally while building with MeDo, and it generated:

PostgreSQL cleanup functions
realtime triggers
SECURITY DEFINER helpers
recursion-safe logic
abandoned ride handling

It even handled edge cases I had not considered:

browser crashes
temporary disconnects
simultaneous exits

One helper function looked like this:

CREATE FUNCTION has_active_members(ride_id_param uuid) RETURNS boolean LANGUAGE sql SECURITY DEFINER SET search_path = public STABLE AS $$ SELECT EXISTS ( SELECT 1 FROM members WHERE ride_id = ride_id_param AND connection_status != 'offline' ); $$;

That entire cleanup system probably saved me weeks of future debugging.

WebRTC Was Both Fun and Painful

Push-to-talk voice communication was another huge challenge.

WebRTC gets complicated very fast:

signaling
peer connections
reconnect handling
audio state management
browser inconsistencies

Initially I expected this part to completely break the project.

But surprisingly, MeDo helped generate large parts of the signaling flow and realtime communication logic.

Eventually I had working browser-based group voice chat running directly between riders.

That was probably the moment Ion started feeling like a real product instead of a hackathon experiment.

Security Became Important Very Quickly

Once live location sharing entered the picture, security became critical.

I used Supabase Row Level Security heavily throughout the project.

The challenge was making sure:

riders only see their own ride data
non-members cannot access live locations
creators and members have different permissions
realtime subscriptions stay secure

A lot of the backend work ended up revolving around secure access patterns and realtime-safe database logic.

This was also where MeDo genuinely helped a lot because debugging RLS issues manually can become painful very quickly.

The Biggest Difference While Building With MeDo

The biggest mindset shift was this:

I stopped describing implementations.

And started describing problems.

Instead of saying:

“Create a PostgreSQL trigger.”

I would say:

“Rides should automatically end if everyone disconnects.”

Instead of:

“Implement websocket subscriptions.”

I would say:

“Everyone should see rider movement instantly.”

That workflow changed how I approached development during the hackathon.

It felt less like prompting an AI for snippets and more like collaborating with an engineer during rapid prototyping.

The Project Grew Faster Than Expected

Ion was built in around a week.

The final project included:

realtime GPS tracking
push-to-talk voice communication
SOS alerts
shared ride coordination
hazard markers
ride timelines
realtime presence tracking
automatic ride cleanup
responsive mobile UI
browser-first architecture

Without AI-assisted development, this realistically would have taken me months longer.

Especially the realtime and WebRTC parts.

What I Learned

A few things surprised me during this project:

Realtime UX matters more than fancy UI

If updates lag even slightly, the whole experience feels broken.

Browser-based apps are much more capable now

A few years ago, I would never attempt something like this fully in-browser.

WebRTC is powerful but unforgiving

Once it works, it feels magical.
Until then, it feels cursed.

Describing problems works better than micromanaging implementations

This completely changed how I used AI tools during development.

Final Thoughts

Ion started as:

“What if motorcycle groups had a live coordination layer?”

But it ended up becoming one of the most technically interesting projects I’ve built.

The coolest part was not just shipping features quickly.

It was being able to experiment with ambitious realtime ideas without getting stuck for weeks on infrastructure and implementation details.

That changed the pace of development completely.

And honestly, building this was just fun.

What is Design Tokens? How to create a Design Token in react?

Shubhdeep Chhabra — Sat, 05 Nov 2022 03:33:08 +0000

Have you ever heard of Design tokens?
Design tokens, to put it simply, are all the CSS-related values of your product that are kept in one location and utilized as needed.

Simple? Isn't it?😅

And it is more simple to use and implement also.

Let's deep dive and learn how to create one 🚀🚀.

We will be creating a React app with a CSS-in-JS library named Styled Components.

Styled Components Basics would be helpful if you are new to the Styled Components.

Just want to let you know, we will not learn how to write code instead we will be focusing on the practice to store and create design tokens in an app.

Let's begin the steps: -

Install Styled Components and create a new React app using the Guide to construct a new React App.

OR

You may make use of your ongoing project.
Create a basic component, for now, I am creating a profile card. Make a profile card as seen below without worrying about the design token.

If you are creating on your own, otherwise 👇

Here is the code for that component.
Codesandbox link

There are no design tokens in this.

Now there is a task for you -> change the color of the button and all social media links and decrease the size of the text by 2px.

Hope you completed the task, So I want to ask my last question here - don't you feel that you kept changing the same value at different locations?
If yes, I think you understand the need for design tokens.

Let's create some.

Here is the Codesandbox link of the project but with design tokens.

Understanding how we developed the design token is crucial.
For the sake of the example, we made an object with two keys that represented the theme: light and dark.

export default {
  light: {
    fontSize: {
      text: {
        small: 20,
        medium: 23,
        large: 30
      },
      button: {
        small: 15,
        medium: 17,
        large: 20
      }
    },
    color: {
      text: {
        primary: "#252525",
        secondary: "#26235C",
        white1: "#FFFFFF"
      },
      background: {
        primary: "#FFFFFF"
      },
      border: {
        primary: "#26235C"
      },
      button: {
        blue1: "#26235C"
      },
      icon: {
        blue1: "#26235C",
        yellow1: "#F7DF1E",
        black1: "#000000"
      }
    },
    fontWeight: {
      small: 200,
      medium: 400,
      large: 700
    }
  },
  dark: {
    fontSize: {
      text: {
        small: 20,
        medium: 23,
        large: 30
      },
      button: {
        small: 15,
        medium: 17,
        large: 20
      }
    },
    color: {
      text: {
        primary: "#FFFFFF",
        secondary: "#A79AE0",
        white1: "#FFFFFF"
      },
      background: {
        primary: "#26235C"
      },
      border: {
        primary: "#A79AE0"
      },
      button: {
        blue1: "rgba(144, 130, 236, 0.65)"
      },
      icon: {
        blue1: "#A79AE0",
        yellow1: "#F7DF1E",
        black1: "#000000"
      }
    },
    fontWeight: {
      small: 200,
      medium: 400,
      large: 700
    }
  }
};

You can see that we assigned values for text size, button color, background color, and all other CSS attributes used in our profile card here.

And these are used everywhere instead of hard coding the colors.

We now have a central location for changing the CSS properties like button color, etc wherever needed.

Isn't that easy?
And design tokens are exactly this.

Although not all aspects, such as having distinct styles for various screen sizes, are covered by this example.
But understanding is sufficient to begin making your own Design Tokens.

Depending on the product, a design token may have a variety of layers.

That's the end of this blog.

I hope you find this helpful. 🙌 Please tell me in the comments. 📪

Happy reading

For more of this type of stuff, follow me on Twitter — @ShubhInTech

Structuring SEO and Format of a page in Next.js Effectively

Shubhdeep Chhabra — Sat, 10 Sep 2022 18:33:28 +0000

Organizing your Next.js application and using components.

Imagine you want to use Next.js to build an application and that you want each page to have a distinct SEO strategy as well as the same header, footer, and navbar.

What you can manage to do?

The simple option is to build a shared component that is called repeatedly on each page.

But, You might try this 👇

I hope you have already developed a Next.js app before reading this.
If not, visit this page 👉 https://nextjs.org/docs/getting-started
Create two components with the names Format and SEOSetup in a new folder called components inside the src directory.
This component, “Format,” refers to the layout of the page.
Here, in this case, the layout of every page will be in this flow Navbar then Main content, and then a Footer.
And, We are therefore defining it below 👇

import { FC } from 'react';

import Footer from '../Footer';
import Navbar  from '../Navbar';

const Format: FC = (props) => {
  return (
    <>
      <Navbar />
      <Main>{props.children}</Main>
      <Footer />
    </>
  );
};

export default Format;

In SEOSetup, we’re really constructing a common tag with data supplied as props for the meta and title tag fields. So that we may utilize this SEOSetup component each time we need to define SEO-related information on a page rather than creating a head tag repeatedly.

import Head from 'next/head';

export interface MetaData {
  title: string;
  description: string;
}

const SEOSetup: FC<MetaData> = (props) => {
  const {
    title,
    description,    
  } = props;

return (
    <Head>
      <title>{title}</title>
      <meta name={'title'} content={title} />
      <meta name={'description'} content={description} />
    </Head>
  );
};

export default SEOSetup;

Finally, utilize them on a page. Here we are just wrapping the page with the Format component and setting up SEO with our custom SEOSetup tag.

import type { NextPage } from 'next'

import Format from '../components/Format';
import SEOSetup from '../components/SEOSetup';

const Home: NextPage = () => {
  return (
    <Format>
      <SEOSetup
        title="This is title of the Home Page"
        description="This is description of Home Page"
      />
      <div>
        This is Home Page.
      </div>
    </Format>
  )
}

export default Home;