DEV Community: chamupathi mendis

How I Made an Unreliable External API Reliable;

chamupathi mendis — Mon, 14 Jul 2025 23:44:31 +0000

Using Supabase Edge Functions (Without Breaking the External API Quota)

Third-party APIs are great… until they’re not.

Recently, I ran into a challenge where I had to integrate with a flaky external API, while also respecting a limited quota and dealing with internal service calls that weren't smart enough to stop hitting it over and over. And to make things worse, implementing internal caching wasn’t an option.

So, I came up with a simple and cost-effective solution using Supabase Edge Functions and a Supabase Database — and it worked like a charm.

Here’s how I did it.

🚧 The Problem

Here's what I was dealing with:

I needed to fetch data from a third-party API.
The API was unreliable — it sometimes timed out or returned errors.
We had a quota for how many times we could call it.
Our internal services would sometimes call the same endpoint multiple times in quick succession.
Implementing caching inside each internal service was too expensive or complex at the moment.
We were okay serving slightly stale data if the API was unavailable.
I needed a reliable, cost-effective buffer in front of the API.
I wanted the proxy service to cache it all without configuring

“Sounds familiar? You have a quota-limited external API, but your backend services love hammering it as if rate limits don’t exist. And caching it internally? A refactor no one wants to touch right now.”

🧠 The Idea

I didn’t want to spin up Redis or deploy a new caching layer just for this. But I did need:

A place to store cached API responses.
A lightweight service that could check if data was cached, and only fetch from the external API when needed.
A fallback mechanism to return cached data when the API fails.

💡 That's when I thought: Why not use Supabase Edge Functions (which are serverless and fast) with a Supabase Postgres table to cache results?

🗺️ Solution Architecture

Here's the basic flow:

Internal services now hit my Edge Function instead of calling the external API directly.

The Edge Function:

Checks if the data exists in the Supabase DB and is still fresh.

If fresh: returns it.

If stale: tries to fetch from the external API.

If successful: updates the DB and returns the data.

If the API fails: returns the last known cached value.

✅ Why Supabase Was a Great Fit

Free for small projects.

Edge Functions are super fast and easy to deploy.

Postgres + JSONB = flexible caching store.

No need for external infra like Redis or server instances.

🤔 Lessons Learned

When you can’t control the external API, build a reliable layer around it.

Supabase gives you the speed of serverless and the power of a real database.

Sometimes, the best solution is not the fanciest, but the most practical.

Check the code

https://github.com/chamupathi/proxy-cache-supabase

Integrate Microsoft Clarity with Your Next.js App

chamupathi mendis — Sun, 23 Mar 2025 00:28:02 +0000

Why Track User Behavior?

Understanding how users interact with your website is crucial for improving the user experience. Behavior analytics tools help identify friction points, optimize conversions, and provide insights into how users navigate your application.

Why Microsoft Clarity?

Microsoft Clarity is a free behavior analytics tool that offers:
✅ Heatmaps – Visualize where users click and scroll.
✅ Session Recordings – Replay user sessions to understand their journey.
✅ Insights – Identify pain points and engagement metrics.
✅ Google Analytics Integration – Combine behavioral data with standard analytics.

In this guide, we’ll integrate Microsoft Clarity into a Next.js app and ensure it runs efficiently without affecting server-side rendering (SSR). Let’s get started!

Video of Clarity dashboard

1. Create a next app

If you don’t have an existing Next.js project, create one using:

npx create-next-app ms-clarity-example

2. Install Microsoft Clarity

Install the Clarity package using:

npm install @microsoft/clarity

3. Get Your Clarity Project ID

2.1. Create a project via
https://clarity.microsoft.com/

2.2. Navigate to Settings → Overview and copy the Project ID.

4. Initializing Clarity in Next.js

To start tracking user sessions, we need to initialize Clarity using:

Clarity.init(<project-id>);

🚨 The Catch: Run Clarity on the Client Side Only

Clarity should not run on the server side, as it relies on window.
We must use useEffect to ensure it runs only in the browser.
The best place to initialize Clarity is in the top-level layout.tsx file.

❌ Initial Approach: Adding it Directly in RootLayout.tsx

"use client"

/* Rest of the code */
export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {

    useEffect(() => {
        if (typeof window !== "undefined") {
            Clarity.init(process.env.NEXT_PUBLIC_CLARITY_ID!);
        }
      }, []);

/* Rest of the code */

⚠️ Problem: RootLayout Becomes a Client Component

By adding "use client", we force RootLayout to be client-rendered, preventing Next.js from utilizing SSR and static generation. Instead, we should move Clarity initialization to a separate component.

Hook vs a component

Hook

If the logic is moved to a hook we have the same problem RootLayout needs to be a client component.

import Clarity from "@microsoft/clarity";
import { useEffect } from "react";

export default function useMsClarity() {
    useEffect(() => {
        if (typeof window !== "undefined") {
            Clarity.init(process.env.NEXT_PUBLIC_CLARITY_ID!);
        }
      }, []);
}

// Rootlayout.tsx
"use client"
export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {

    // use hook
      useMsClarity();

Component

Lets create a client component to hold the logic

"use client";
import Clarity from "@microsoft/clarity";
import { useEffect } from "react";

export default function useMsClarity() {
    useEffect(() => {
        if (typeof window !== "undefined") {
            Clarity.init(<project-id>);
        }
      }, []);

    return null;
}

Use the component in root layout.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import BaseLayout from "./ui/layouts/BaseLayout";
import ClarityInit from "./ui/analytics/clarity-init";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
    title: "MS clarity test",
    description: "MS clarity test",
};

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {

    return (
        <html lang="en">
            <body className={inter.className}>
                <ClarityInit />
                <BaseLayout>
                    {children}
                </BaseLayout>
            </body>
        </html>
    );
}

By moving the logic to a separate component (ClarityInit), we avoid making RootLayout a client component, allowing the rest of the app to benefit from Server-Side Rendering (SSR).

6. Store the Clarity Project ID Securely

finally move the clarity-project-id to an env variable to make sure that it doe not pushed to version control system.

Clarity.init(process.env.NEXT_PUBLIC_CLARITY_ID!);

Note
The NEXT_PUBLIC_ prefix is needed so that nextjs can read the env variable.

add it to .env file as well

NEXT_PUBLIC_CLARITY_ID=<clarity-project-id>

Ms-clarity will start to collect sessions and you can see them in the dashboard.

git hub link with code example.
https://github.com/chamupathi/ms-clarity

🚀 Building a RESTful API in Go: A Practical Guide

chamupathi mendis — Sun, 05 Jan 2025 16:31:48 +0000

From Setup to CRUD Operations with Gin & PostgreSQL

Golang is a fantastic programming language! If you're just starting out, the official documentation is a great resource. But when it comes to practical application, things can get tricky.

Many developers have asked me how to build a RESTful API using Go, so I decided to create a minimal working REST API with step-by-step guidance. Let's dive in! 🔥

🛠 Step-by-Step Guide to Building a REST API in Go
We'll be using:
✅ Gin (Fast & lightweight web framework)
✅ GORM (ORM for PostgreSQL)
✅ Docker (To run PostgreSQL in a container)

Step 1: Setting Up the Project & Installing Dependencies

First, create a new Go project:

mkdir go-rest-api && cd booking-app
go mod init booking-app

Next, install Gin:

go get -u github.com/gin-gonic/gin

Create the initial route

create file routes/booking.go

package routes

import (
    "net/http"

    "github.com/gin-gonic/gin"
)

func GetBookings(c *gin.Context) {
    var bookings []string = []string{"abc"}
    c.JSON(http.StatusOK, bookings)
}

func SetupRoutes(router *gin.Engine) {
    router.GET("v1/bookings", GetBookings)
}

To use above route in main.go, create a file main.go

package main

import (
    "booking-app/routes"
    "fmt"

    "github.com/gin-gonic/gin"
)

func main() {
    // Setup Gin Router
    router := gin.Default()

    routes.SetupRoutes(router)

    // Start the server
    port := ":8080"
    fmt.Println("Server is running on port", port)
    router.Run(port)
}

run

go run main.go

visit http://localhost:8080/v1/bookings you should get a response with ["abc"]

Step 2: Setting Up PostgreSQL Using Docker:

Instead of installing PostgreSQL manually, let's use Docker.

To make sure that the starting docker container lives with the application itself, let create a docker-compose

docker-compose.yml

version: '3.8'

services:
  postgres:
    image: postgres:latest
    container_name: postgres_container
    restart: always
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: yourpassword
      POSTGRES_DB: booking_db
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

run

docker-compose up -d

make sure that the docker is running in background

adding DB connectivity to the app

create the file config/database.go

package config

import (
    "fmt"
    "log"

    "gorm.io/driver/postgres"
    "gorm.io/gorm"
)

var DB *gorm.DB

func ConnnetDatabse() {
    dsn := "host=localhost user=postgres password=yourpassword dbname=booking_db port=5432 sslmode=disable"
    db, err := gorm.Open(postgres.Open(dsn), &gorm.Config{})

    if err != nil {
        // log.Fatal will log the message to terminal and exit the program
        log.Fatal("Failed to connect to the database:", err)
    }

    DB = db

    fmt.Println("Connected to PostgreSQL!")
}

add following line at the top of the function main in main.go to initialise the database connection.

    config.ConnnetDatabse()

The step 2 github link

Step 3: Adding a Data Model & First Route (Create a Resource)

Let's define a model for our API.

First, install GORM and the PostgreSQL driver:

go get -u gorm.io/gorm
go get -u gorm.io/driver/postgres

create the modal

package models

import "gorm.io/gorm"

type User struct {
    gorm.Model
    Name  string `json:"name" binding:"required" gorm:"not null"`
    Email string `json:"email" binding:"required,email" gorm:"not null"`
    Date  string `json:"date"`
}

gorm.Modal adds few default fields to the struct as ID, CreatedAt, UpdatedAt, DeletedAt and managed by it self.

bindind make sure that the fileds are validate when the json is binded to the modal.

lets create a controller to for bookings

controller/bookings.go

package controllers

import (
    "booking-app/config"
    "booking-app/models"
    "net/http"

    "github.com/gin-gonic/gin"
)

func GetBookings(c *gin.Context) {
    var bookings []models.Booking
    config.DB.Find(&bookings)
    c.JSON(http.StatusOK, bookings)
}

func CreateBooking(c *gin.Context) {
    var booking models.Booking

    if err := c.ShouldBindJSON(&booking); err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
        return
    }

    config.DB.Create(&booking)
    c.JSON(http.StatusCreated, booking)
}

We have created a handler for creating bookings and moved the logic to get bookings from routes file as well.

now update the routes/booking.go as well.

package routes

import (
    "booking-app/controllers"

    "github.com/gin-gonic/gin"
)

func SetupRoutes(router *gin.Engine) {
    router.GET("v1/bookings", controllers.GetBookings)
    router.POST("v1/bookings", controllers.CreateBooking)
}

now let's test the endpoint

curl -X POST http://localhost:8080/v1/bookings -H "Content-Type: application/json" -d '{"name":"John Doe", "email":"john@example.com"}'

code for step 3

Step 4: Get a booking by ID

Lets update the controller to get a booking

func GetBookingsById(c *gin.Context) {
    id := c.Param("id")

    var booking models.Booking

    err := config.DB.First(&booking, id).Error
    if err != nil {
        c.JSON(http.StatusNotFound, nil)
        return
    }

    c.JSON(http.StatusOK, booking)
}

lets add the route to routes/booking.go

router.GET("v1/bookings/:id", controllers.GetBookingsById)

By re-running the application you should be able to fetch booking by id

code for step 04

Step 5: Update & Delete Operations

now you guessed right. know the drill. update the controller, ad it to route.

controllers/booking.go

type UpdateBookingRequest struct {
    Name  string `json:"name"`
    Email string `json:"email"`
    Date  string `json:"date"`
}

func UpdateBooking(c *gin.Context) {
    var id = c.Param("id")
    var booking models.Booking
    var updateRequest UpdateBookingRequest

    err := config.DB.First(&booking, id)

    if err != nil {
        c.JSON(http.StatusNotFound, gin.H{"error": "Booking not found"})
    }

    if err := c.ShouldBindJSON(&updateRequest); err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
        return
    }

    if err := config.DB.Model(&booking).Updates(updateRequest).Error; err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": "Internal server error"})
        return
    }

    c.JSON(http.StatusOK, booking)
}

func DeleteBooking(c *gin.Context) {
    var id = c.Param("id")
    var booking models.Booking

    if err := config.DB.First(&booking, id).Error; err != nil {
        c.JSON(http.StatusNotFound, gin.H{"error": "Booking not found"})
        return
    }

    if err := config.DB.Delete(&booking).Error; err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": "Internal server error"})
        return
    }

    c.JSON(http.StatusOK, booking)
}

wait, there is a new struct for updates, Yes. that's because we have already added validations for bookings modal as both name and email are required, but for an update we might only need to update one of it not both. other than that this enables adding custom validations only for update request if needed.

routes/booking.go

    router.PUT("v1/bookings/:id", controllers.UpdateBooking)
    router.DELETE("v1/bookings/:id", controllers.DeleteBooking)

here is the code after adding delete and update operations.

🎉 Conclusion

Congratulations! You’ve built a fully functional RESTful API in Go with: ✅ Gin for routing

✅ PostgreSQL (via Docker) for storage
✅ GORM for database interactions
✅ CRUD operations

Hope you enjoyed this guide! Let me know your thoughts in the comments. 🚀