# Bibek Timsina ## Profile - Name: Bibek Timsina - Role: Full-stack software engineer and AI product engineer - Location: Kathmandu, Nepal - Website: https://bibek-timsina.com.np - Email: timsinabibek960@gmail.com - GitHub: https://github.com/bimsina - LinkedIn: https://www.linkedin.com/in/bimsina/ - X/Twitter: https://x.com/bimsina - Google Scholar: https://scholar.google.com/citations?hl=en&user=-PP4XLoAAAAJ - ResearchGate: https://www.researchgate.net/profile/Bibek-Timsina ## Summary Bibek Timsina is an AI full-stack engineer building products end-to-end for remote teams with TypeScript, Cloudflare, PostgreSQL, and LLMs. AI full-stack engineer based in Kathmandu, Nepal with more than 6 years of professional experience shipping software for remote teams. Currently leads engineering at Growthzilla, building Proma.ai with a remote US-based team. Previously co-founded Khellabs and built Callbreak Multiplayer to more than 1,000,000 downloads on Google Play. ## Core Areas - AI-powered products, LLM integrations, and agent workflows - Full-stack product engineering with TypeScript, React, PostgreSQL, and Cloudflare - Developer tools and infrastructure products - Edge platforms including Cloudflare Workers - Mobile products with Flutter - Search, realtime, collaboration, and internal tooling ## Experience ### Lead Engineer - Growthzilla / Proma.ai - Building an AI-powered productivity platform with a remote US-based team - Architecting full-stack systems across TypeScript, PostgreSQL, LLM layers, and Cloudflare - Building LLM integration layers and prompt workflows - Designing realtime collaboration features ### Co-Founder and CTO - Khellabs - Built Callbreak Multiplayer from zero to more than 1,000,000 downloads - Architected realtime multiplayer infrastructure using Firebase - Worked across product, engineering, experimentation, and growth ## Projects ### Proma.ai Engineering Lead engineering work on an AI productivity platform: LLM integration layers, real-time collaboration, database design, and Cloudflare deployment. - Project page: https://bibek-timsina.com.np/projects/proma-ai-engineering/ - Demo: https://proma.ai - Tags: ai, typescript, postgresql, cloudflare, remote I lead engineering for Proma.ai at Growthzilla. Proma.ai is an AI productivity platform built by a remote US-based team. My role spans product architecture, implementation, deployment, and iteration. This case study covers only public information. It describes the engineering approach, not private metrics or internal implementation details. ## My role - Lead engineering across full-stack product development - Design database structures and application boundaries for AI-driven workflows - Build LLM integration layers, prompt and tooling infrastructure, and product-facing AI features - Design real-time collaboration flows and state management across client and server - Own deployment and operational decisions on Cloudflare's edge platform - Turn ambiguous product requirements into shipped, maintainable systems ## Engineering focus The core challenge is making AI features feel like dependable product features instead of demos. That means treating prompts, tools, data access, fallbacks, latency, and observability as part of the product architecture. The work crosses several layers: - **Product layer:** user-facing workflows, collaboration states, and iteration speed - **AI layer:** LLM orchestration, tool use, prompt infrastructure, and structured outputs - **Data layer:** PostgreSQL-backed persistence, schema design, and product analytics needs - **Infrastructure layer:** Cloudflare deployment, edge runtime constraints, and production operations ## Remote engineering The team works remotely, so I optimize for clear written decisions, small reviewable changes, and enough documentation that future work does not depend on memory or meetings. That matters more in AI product work because the product changes quickly. Clear writing keeps the system understandable while... ### Flaremender Open-source agent that explores your app in a real browser, writes and repairs Playwright tests, and runs them on a schedule. Self-hosted on your own Cloudflare account with a one-click deploy. - Project page: https://bibek-timsina.com.np/projects/flaremender/ - GitHub: https://github.com/bimsina/flaremender - Tags: cloudflare, ai-agents, playwright, typescript, self-hosted, mcp ## About Flaremender is an end-to-end test runner with an agent in it. Point it at your app and give it a sign-in. The agent opens the app in a real browser, works out what it does, proposes the tests worth having and writes them. Every test is verified in a fresh browser before it is kept. What comes back is ordinary Playwright you can read, edit or take elsewhere. It runs entirely on your own Cloudflare account. Your app's credentials, your scripts and your run history never leave it. ## Why I built it End-to-end suites are expensive to write and they rot fast. The AI tools that fix this usually want your app's credentials and test history on their servers. I wanted the same convenience without handing any of that over, and I wanted to see how far the Cloudflare developer platform could carry a whole product with no other infrastructure. The answer was all the way. ## What I built - An exploration agent that browses an app, reads any docs it is given, and proposes a first suite - A generation loop that performs a flow in a live browser and keeps only the steps it has watched work - A repair loop that replays a failing script to the broken step, replaces that step and verifies the result - Scheduled and CI-triggered runs with a webhook API, idempotency keys and JUnit output - Notifications to signed webhooks, Slack, Discord and email - An MCP server, so Claude, Cursor or Claude Code can ask for tests, runs and repairs over OAuth - An eval harness that scores generation across models against fixed example apps ## Engineering decisions These are the parts I would defend. - **Every generated script runs in its own sandbox.** Scripts execute in a Dynamic Worker with only a browser binding. A bad or hostile test cannot reach the database, object storage or the netw... ### Browser AI Chat AI chat application that runs entirely in the browser using local models like Gemini Nano, Transformers.js, and WebLLM for private, serverless AI. - Project page: https://bibek-timsina.com.np/projects/browser-ai-chat/ - GitHub: https://github.com/bimsina/browser-chat - Demo: https://browser-chat.bimsina.workers.dev - Tags: react, typescript, vite, ai, pwa ## About Browser AI Chat runs entirely in your browser. There is no server, no API keys, and your data never leaves your device. It supports multiple local AI backends: - **Gemini Nano** via Chrome's built-in AI APIs - **Transformers.js** for running Hugging Face models in-browser - **WebLLM** for larger models via WebGPU ## Why I built it I wanted to see how far client-side AI had come. As browser capabilities improve (WebGPU, built-in AI APIs), more AI workloads can run locally without losing too much quality. This project is a testbed for those possibilities. ## What I owned - Designed the full client-only app architecture - Integrated multiple local AI runtimes behind one chat experience - Built local persistence for conversation history and attachments - Shipped the project as an installable PWA without backend infrastructure ## Features - **Local AI models**: Built-in AI (Gemini Nano), Transformers.js, WebLLM - **Model switching**: Move between backends in one chat experience - **WebGPU acceleration** where available - **Complete privacy**: All processing happens in your browser - **Multi-modal**: Text, images, documents, audio - **Offline**: Works without internet after setup - **PWA**: Install like a native app - **File support**: Drag-and-drop attachments - **Local history**: Conversations stored in IndexedDB ## Tech stack - React + TypeScript + TailwindCSS - Vite + PWA - TanStack Router - IndexedDB (Dexie) ## What this shows This project shows the kind of AI product engineering I enjoy: understanding new platform capabilities, designing a practical abstraction around messy runtime differences, and shipping a product that users can try directly. ## Development ## Model types **Built-in AI**: Browser native (Chrome and Edge only), instant startup... ### Callbreak Multiplayer Real-time multiplayer card game built from zero to 1,000,000+ Google Play downloads, with Firebase-backed matchmaking and rejoin flows. - Project page: https://bibek-timsina.com.np/projects/callbreak/ - Demo: https://khellabs-callbreak.web.app - Tags: flutter, firebase, real-time Callbreak Multiplayer was the first product where I had to think like a founder and an engineer at the same time. I co-founded Khellabs and built the game from zero to more than 1,000,000 downloads on Google Play. The visible product was a card game. The actual engineering problem was building a low-latency multiplayer system that stayed affordable, resilient to bad mobile networks, and fun enough to retain players over time. ## What I built - Real-time multiplayer game flow and state synchronization - Matchmaking and private room logic - Rejoin flows for unreliable mobile connections - Firebase-backed infrastructure with cost controls - Retention experiments informed by actual player behavior ## Architecture decisions The stack was Flutter on the client and Firebase on the backend. That was the right decision for a small team that needed to move quickly across Android devices with very different performance profiles. Firebase gave us authentication, real-time data propagation, and an operational model that a small team could maintain. The tradeoff was cost and data-shape discipline. Real-time products can become surprisingly expensive if every screen subscribes to more updates than it needs, so I had to design carefully around read patterns and document structure. ## Matchmaking and concurrency One of the core systems was matchmaking. We needed to get players into games quickly without creating long waits or poor-quality lobbies. That required balancing queue speed with match reliability, especially during uneven traffic periods. The challenge wasn't only assigning four players to a room. It was handling the messy edges: - Players leaving mid-flow - Network interruptions - Duplicate join attempts - Stale room state - Rejoin after connection recovery I built... ### Astro MD Editor Schema-aware editor for Astro content collections that lets you edit frontmatter and markdown together with validation on save. - Project page: https://bibek-timsina.com.np/projects/astro-md-editor/ - GitHub: https://github.com/bimsina/astro-md-editor - npm: https://www.npmjs.com/package/astro-md-editor - Tags: astro, typescript, react, cli ## About Astro MD Editor is a schema-aware editor for Astro content collections. It combines frontmatter and markdown or MDX editing in one UI, validates content before save, and can reuse values from a file's Git history. ## Why I built it Astro content collections are powerful, but editing markdown and schema-backed frontmatter usually means jumping between code, docs, and manual checks. I wanted a developer tool that made content editing safer without hiding the filesystem workflow that makes Astro nice. ## Highlights - Edit frontmatter and markdown together in one place - Validate frontmatter against collection schemas on save - Support image fields from both `src` assets and `public` assets - View file-level Git history and apply selected values safely - Packaged as an open-source CLI for Astro developers ## Engineering decisions The important part was respecting the user's existing project structure. The editor reads Astro content schemas, works with local files, and validates before save so invalid content does not quietly enter the project. That makes it more than a markdown editor. It is a small product built around schema-aware editing. ## Quick start If schema files are missing in your Astro project, run: ### DriveCellar Self-hosted file browser for storage you already own. Point it at local folders or S3-compatible buckets, with no new blob store. - Project page: https://bibek-timsina.com.np/projects/drivecellar/ - GitHub: https://github.com/bimsina/drivecellar - Tags: react, typescript, trpc, sqlite, self-hosted, s3 ## About DriveCellar is a self-hosted file browser for storage you already own. Point it at local folders or S3-compatible buckets. No new blob store. You get a web UI to browse, search, tag, share with links, and manage team access. It is lighter than a full cloud suite and nicer than SSH or the raw S3 console. ## Features - **Storage**: Local paths; S3-compatible (AWS, MinIO, R2, and others); multiple connections per workspace - **Files**: Browse, upload and download, folders, rename, delete - **Search & organization**: Indexed search; tags with optional colors/icons - **Sharing**: Public links with optional expiry and password protection - **Auth & teams**: Email and password authentication; workspaces; roles (owner, admin, member); connection defaults and per-user overrides - **Indexing**: Auto index on new connection; manual re-index; optional schedule; run history ## Why I built it I wanted a simpler alternative to full cloud storage suites for storage that already exists. The project focuses on making self-hosted storage easier to browse, share, and control without taking ownership of the underlying files. ## Engineering focus DriveCellar follows one constraint: the app organizes and exposes files without becoming the storage provider. That pushes the architecture toward connection management, indexing, permissions, and metadata rather than a custom blob store. ## Tech stack - TanStack Start - React 19 - TanStack Router - TypeScript - tRPC - SQLite (better-sqlite3) - Drizzle ORM - Better Auth - Tailwind CSS v4 - Zod ## What this shows This project shows full-stack product architecture: authentication, roles, storage integration, database modeling, background indexing, and a UI for a real operational workflow. ## Deployment Deploy with Docker to any c... ### Cloudflare Local Helpers Open-source dashboard for managing Cloudflare Workers local resources including KV, D1, R2, and environment bindings during development. - Project page: https://bibek-timsina.com.np/projects/cf-local-helpers/ - GitHub: https://github.com/bimsina/cf-local-helpers - npm: https://www.npmjs.com/package/cf-local-helpers - Tags: typescript, cloudflare, hono, htmx ## About A dashboard for managing Cloudflare Workers resources during local development. When you build with Workers, you often need to inspect and manage local KV stores, D1 databases, and R2 buckets. This tool gives you a clean UI for that. ## Why I built it Cloudflare's local development story is excellent, but local state becomes hard to inspect once a project uses several bindings. I built this tool to work like a small admin console for debugging: quick to open and easy to scan. ## Core features - Browse and manage local KV namespaces - Query and inspect D1 (SQLite) databases - Manage R2 bucket objects - Works with Wrangler's local development environment ## Dashboard areas **1. KV Editor** - View all KV namespaces - List, search, and filter keys - Create, edit, and delete key-value pairs - View key expiration and metadata **2. D1 Explorer** - View all D1 databases - Browse tables and schema - Run custom SQL queries with a built-in editor - View query results in a table format with execution time **3. R2 Browser** - Navigate R2 buckets and folders (with breadcrumbs) - View object metadata (size, type, uploaded date) - Preview images directly in the dashboard - Download files **4. Environment Variables Viewer** - Inspect all environment variables and bindings bound to your worker ## Tech stack - Hono ([hono.dev](https://hono.dev/)) - HTMX ([htmx.org](https://htmx.org)) - TailwindCSS ([tailwindcss.com](https://tailwindcss.com)) - DaisyUI ([daisyui.com](https://daisyui.com)) - AlpineJS ([alpinejs.dev](https://alpinejs.dev)) ## Reflection This project came from one need: making local Workers state easier to inspect while building. ## How to use ### 1. Installation Add the package as a development dependency: **npm** **yarn** **pnpm** **bun**... ### Flutter Templates Open-source catalog of production-focused Flutter widgets and full app templates, built to help developers start polished mobile interfaces faster. - Project page: https://bibek-timsina.com.np/projects/fluttertemplates/ - GitHub: https://github.com/bimsina/fluttertemplates.dev - Demo: https://fluttertemplates.dev/ - Tags: flutter, astro Flutter Templates is an open-source library of Flutter UI patterns, widgets, and full app templates. The goal is to give developers a practical starting point for mobile interfaces that feel polished and are ready to customize. The project includes reusable UI building blocks across common app needs like navigation, forms, layouts, chat interfaces, dialogs, empty and error states, e-commerce screens, social features, search, and animation. ## Why I built it Building a Flutter app often starts with recreating familiar screens and interaction patterns before the real product work begins. I wanted a place where developers could browse clean, production-focused examples and use them as a foundation instead of starting every UI from a blank screen. ## What I built - A public website for browsing Flutter widgets and templates by category - Reusable examples for common mobile UI patterns - Full app templates and smaller snippets that can be adapted independently - A clean visual system for presenting previews, categories, and source code - An open-source codebase designed to be easy to inspect and extend ## Engineering focus The site is built with Astro, and the content is Flutter and Dart examples. The interesting part was treating this as both a design catalog and a developer tool. Examples need to look good, but they also need to be readable, copyable, and structured enough that another developer can learn from them. ## What I learned This project helped me think more deliberately about developer experience. A useful template library is not just a pile of attractive screens. It needs clear organization, predictable code structure, good previews, and enough polish that developers trust the examples before opening the source. ### reWalls: Wallpapers from Reddit An app to discover and download high-quality wallpapers from various Reddit communities. - Project page: https://bibek-timsina.com.np/projects/rewalls/ - GitHub: https://github.com/bimsina/reWalls - Tags: flutter ## About reWalls is a mobile app built with Flutter that lets you discover and download high-quality wallpapers from Reddit communities. Browse subreddits such as r/wallpapers and r/Amoledbackgrounds, filter by resolution, save favorites, and set wallpapers directly from the app. ## Technical highlights - Built with Flutter and Dart - Reddit API integration for fetching and paginating image posts - Local storage for favorites and download history - Adaptive grid layout for different screen sizes - 155+ stars on [GitHub](https://github.com/bimsina/reWalls) ### Sliding Crossword A unique puzzle game combining sliding tile mechanics with crossword puzzles. - Project page: https://bibek-timsina.com.np/projects/sliding-crossword/ - GitHub: https://github.com/bimsina/sliding_crossword - Demo: https://slidingcrossword.web.app/ - Tags: flutter, firebase A sliding tile puzzle with crossword clues, built as a Flutter Puzzle Hack submission. Read the [Devpost submission](https://devpost.com/software/sliding-crossword). ### Nepali Year Progress A minimalist web app and API to visualize Nepali year progress with dynamic wallpaper generation for lock screens. - Project page: https://bibek-timsina.com.np/projects/nepali-year-progress/ - GitHub: https://github.com/bimsina/nepali-year-progress - Demo: https://nepali-year-progress.vercel.app/ - Tags: nextjs, typescript, dynamic-images | Days Grid | Months Grid | | :-------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------: | | | | A minimalist web application and API to visualize your year at a glance. It generates dynamic wallpapers for your lock screen that update daily to show how much of the Nepali year has passed. Inspired by [thelifecalendar.com](https://www.thelifecalendar.com). ## Features - **Three visualizations**: choose from Days Grid, Months Grid, and Current Month views. - **Automated updates**: setup guides for iOS (Shortcuts) and Android (MacroDroid) keep your wallpaper fresh every day. - **Dynamic image generation**: PNG wallpapers generated on request with @vercel/og. - **Device optimized**: supports a wide range of iOS and Android screen resolutions. ### TMDB Movies App An app to discover movies and TV shows using the TMDB API, with detailed search and a clean Flutter UI. - Project page: https://bibek-timsina.com.np/projects/matinee/ - GitHub: https://github.com/bimsina/Matinee-Flutter - Tags: flutter, tmdb_api ### Not Hot Dog A fun app inspired by Silicon Valley's SeeFood app that uses ML to detect if food is a hot dog or not. - Project page: https://bibek-timsina.com.np/projects/not-hot-dog/ - GitHub: https://github.com/bimsina/NotHotDog - Tags: flutter, google_ml_vision Well, if you're a fan of Silicon Valley, you have definitely wanted to build Jian Yang's breakthrough SeeFood app. If you don't know what SeeFood is, it's an app that tells you whether your food is a hot dog or not a hot dog. Pretty groundbreaking, right? 😂 It took me around two hours to build the complete application. The UI part was pretty simple: two screens, one to take a picture of the food and the other to detect if the food is a hot dog or not. The first screen has a live viewfinder and two buttons, one to capture the image from the viewfinder and the other to select an image from the gallery. For the live viewfinder, I used the camera plugin. Once an image is selected, the application moves to the second screen, where machine learning labels the image. For that, I used the mlkit plugin with Firebase's label detection. | | | | | --------------------------------------------- | --------------------------------------------- | --------------------------------------------- | | | | | The LabelDetector returned a list of `VisionLabel` objects, whose label property holds what the image contains. To find out if the image contained a hot dog, I checked whether the list held a `VisionLabel` labeled "Hot dog", and after a bit of tinkering, the app was ready. To make my app different from Jian Yang's, I also displayed all the detected labels from the image. To try this technological marvel on your own phone, download the APK from [Google Drive](https://drive.google.com/file/d/1RXUGdVFPQs7jaEnHqEANJboAN7K6ojJL/view). The complete source code is in the [GitHub repo](https://github.com/bimsina/NotHotDog). That's it. Build this app, and... ### Visit Nepal A travel app showcasing Nepal's beauty with data from a GraphQL backend, featuring maps and dynamic theming. - Project page: https://bibek-timsina.com.np/projects/visit-nepal/ - GitHub: https://github.com/bimsina/visit_nepal - Tags: flutter, graphql Visit Nepal is a travel app that shows what makes Nepal worth exploring, with destination data served from a GraphQL backend. ## Features - Fetches data from a [GraphQL server](https://tourism-nepal.herokuapp.com/) - Location data collected by web scraping with Python - Opens any location in Google Maps - Dynamic theming with Provider ## Backend Backend development by: - [Animesh Timsina](https://github.com/AnimeshTimsina) - [Lakshya Pandit](https://github.com/panditlakshya) ## To run this app 1. Get an API key from [OpenWeatherMap](https://openweathermap.org/api). 2. Replace `apiString` in `utils/constants.dart` with your API key. 3. Run the app with `flutter run --release`. ## Writing ### AI Needs Tools, Not Just Intelligence LLMs are prediction machines. Tools are what make them useful. - Post: https://bibek-timsina.com.np/blog/ai-needs-tools/ - Tags: ai, tools There's a [blog post by Daniel Stenberg](https://daniel.haxx.se/blog/2024/01/02/the-i-in-llm-stands-for-intelligence/) titled "The I in LLM stands for Intelligence." The joke is that there is no I in LLM. He's right. LLMs are prediction machines. You feed them a sequence of tokens and they predict what comes next. Everything that looks like "thinking" is pattern matching. Ask one to explain quantum mechanics and it'll impress you. Ask it how many R's are in "strawberry" and it'll confidently say 2. The model can't see letters. It sees tokens. Asking it to count characters is like asking someone to count bricks through frosted glass. ### What you see Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me ### What an LLM sees Would I rather be feared or loved ? Easy . Both . I want people to be afraid of how much they love me Token-based prediction and character-level analysis are different operations. More training data won't fix this. Bigger models won't fix this. But a one line function just might. ## Give it a calculator Now the LLM doesn't need to count. It needs to recognize "this is a counting question" and call the function. That's a language task, the one thing it's good at. > _calls countLetter("strawberry", "r") → 3_ Correct. Every time. Same story with math. Ask an LLM "what's 76447 × 1254?" and it might get close. Or it might not. It's predicting digits, not computing them. Hand it a function: > _calls calculate(76447, 1254, "multiply") → 95,864,538_ The LLM didn't get smarter. It got access to a tool. ## A real example: The Office Counting letters and multiplying numbers are toy problems. Here's a better one. I have IMDb data for all 188 episodes of The Office (US): ratings, seasons, vote counts. Ask a bare LLM "which episode is the best?" and it will probably name whichever episode got discussed most on Reddit. It might even be right. But ask the same kind of question about your company's internal data and the model has nothing to draw on, so it hallucinates an answer with full confidence. You can't trust it, you can't verify it, you can't reproduce it. Give it a SQLite database and let it write queries instead: > Q: What are the top rated episodes? | title | season | episode_num | imdb_rating | | -... ### Exploring Built-in AI Capabilities in Chromium-based browsers Chromium's experimental built-in AI APIs run models directly in the browser, with no API keys or external services. - Post: https://bibek-timsina.com.np/blog/exploring-built-in-ai/ - Tags: ai, browser, web-development Chromium-based browsers now ship experimental built-in AI APIs. They run models directly in the browser, with no API keys and no external services. > Want a real-world application? My [Browser Chat](/projects/browser-ai-chat/) project is a chat app that runs entirely in the browser using these APIs. ## Why would you want this? - Your data never leaves the device - No network latency - No API costs - Works offline once the model is downloaded > Want to try these demos? See [how to set up Chrome's built-in AI](#setting-up-built-in-ai) at the bottom of this article. --- ## Prompt API The Prompt API lets you generate text using a local language model. It's like having a small ChatGPT running in your browser. Try it out: import { PromptAPI } from "../../components/blog/BuiltInAi/PromptAPI"; ### How to use it --- ## Summarizer API This one condenses long text into summaries. Pretty useful for articles or documents. import { SummarizerAPI } from "../../components/blog/BuiltInAi/SummarizerAPI"; ### How to use it --- ## Rewriter API The Rewriter API transforms text to match a tone: professional, casual, friendly, or confident. import { RewriterAPI } from "../../components/blog/BuiltInAi/RewriterAPI"; ### How to use it --- ## Language Detector API Detects the language of any text and gives you a confidence score. import { LanguageDetectorAPI } from "../../components/blog/BuiltInAi/LanguageDetectorAPI"; ### How to use it --- ## Translator API Translates text between languages, all running locally. import { TranslatorAPI } from "../../components/blog/BuiltInAi/TranslatorAPI"; ### How to use it --- ## Using the Vercel AI SDK If you want a more unified interface that works across different providers, you can use the [Vercel AI SDK](https://sdk.vercel.ai/) with the [@browser-ai](https://github.com/jakobhoeg/browser-ai) community providers. This gives you three options: 1. `@browser-ai/core`: Chrome/Edge's native built-in AI 2. `@browser-ai/transformers-js`: Hugging Face models via Transformers.js 3. `@browser-ai/web-llm`: open-source models via WebLLM ### Installation ### @browser-ai/core This wraps Chrome's Prompt API. Uses Gemini Nano on Chrome and Phi4-mini on Edge. import { BuiltInAISDK } from "../../components/blog/BuiltInAi/BuiltInAISDK"; ### @browser-ai/transformers-js Runs Hugging Face models in the browser using WebAssembly... ### Testing the limits of Supabase + Postgres in a serverless environment Comparing Postgres performance on serverless environments vs traditional servers using Supabase and different ORM setups. - Post: https://bibek-timsina.com.np/blog/postgres-serverless/ - Tags: postgres, serverless, supabase This post compares how Postgres performs in a serverless environment against a traditional server. The database is hosted on [Supabase](https://supabase.com/), so the test also compares a direct ORM connection against Supabase's JS client. The four setups: 1. [Cloudflare Workers](https://workers.cloudflare.com/) + [Supabase JS](https://supabase.com/) 2. [Cloudflare Workers](https://workers.cloudflare.com/) + [Drizzle ORM](https://orm.drizzle.team/) 3. [Express](https://expressjs.com/) + [Supabase JS](https://supabase.com/) 4. [Express](https://expressjs.com/) + [Drizzle ORM](https://orm.drizzle.team/) ### Assumptions going into the test - A serverless environment is ephemeral, so it opens a new database connection on every request. That can become a bottleneck. - Supabase's JS client avoids this: it calls their REST endpoint, which sits behind a pool that already holds its connections and can handle a [million](https://supabase.com/blog/supavisor-1-million) at once. - A traditional Node server opens the connection once and reuses it for every request. - So which is faster: querying over a connection you already hold, or going through Supabase's REST layer? --- Let's start by setting up the project. 1. Create a new Supabase project and run it If all goes well, the Supabase dashboard is available at [http://127.0.0.1:54323](http://127.0.0.1:54323) 2. Create a new table from the SQL Editor in the dashboard 3. Populate the table with 100,000 mock users 4. Create the Express server 5. Create the Cloudflare Worker #### After starting both servers, four routes are available for testing. 1. [http://localhost:3000/supabasejs](http://localhost:3000/supabasejs): Express using Supabase JS 2. [http://localhost:3000/drizzle](http://localhost:3000/drizzle): Express using Drizzle ORM 3. [http://localhost:8787/supabasejs](http://localhost:8787/supabasejs): Cloudflare Worker using Supabase JS 4. [http://localhost:8787/drizzle](http://localhost:8787/drizzle): Cloudflare Worker using Drizzle ORM ### Load testing the routes The test script hits each route with [autocannon](https://github.com/mcollina/autocannon). ### Results Each route ran for 60 seconds with 100 connections and 100 pipelined requests per connection. import PostgresPerfChart from "../../components/blog/PostgresPerfChart.tsx"; ### Conclusion The biggest bottleneck is connection establishment... ### Using tRPC with Cloudflare Workers in a monorepo Setting up tRPC with Cloudflare Workers in a monorepo for typesafe APIs without schema generation. - Post: https://bibek-timsina.com.np/blog/trpc-vite-cf-workers/ - Tags: trpc, cloudflare, serverless This post sets up [tRPC](https://trpc.io/) with [Cloudflare Workers](https://workers.cloudflare.com/) in a monorepo. ### What is tRPC? tRPC lets you build typesafe APIs without generating a schema and keeping it in sync between server and client. You call your API as if it were a local function, and TypeScript checks the call end to end. ### What is a monorepo? A monorepo is a single repository that holds multiple projects, such as a frontend and a backend. It makes it easier to share code and manage dependencies between them. --- There are many monorepo tools. This setup uses [Turborepo](https://turbo.build/). To get started, clone [vite-react-cf-starter](https://github.com/bimsina/vite-react-cf-starter), or bootstrap a new project from it: After you've cloned the project, the backend code should look something like this: Calling the backend from the frontend looks like this: This works, but it has two problems: #### The API is not typesafe - What if the backend changes the response shape? - What if the frontend parses the response incorrectly? #### The API is not documented - How does the frontend developer know what input the endpoint expects? tRPC fixes both. The call is typesafe end to end, and the input and output types document themselves. --- #### Set up tRPC on the server 1. Install the packages > We also install zod, which validates the user input. 2. Define the router 3. Initialize the router instance 4. Add a query 5. Validate the input with zod 6. Serve the API The Worker now serves the tRPC routes under `/trpc`. #### Set up tRPC on the client 1. Install the package 2. Create a client instance 3. Consume the API That's it. The client now calls the server with end-to-end typesafety, and no generated schema to keep in sync. --- This is just the setup. To go further, start with these: 1. [Defining Procedures](https://trpc.io/docs/server/procedures) 2. [TanStack Query integration](https://trpc.io/docs/client/react/setup) 3. [Video tutorials](https://trpc.io/docs/videos-and-community-resources) The complete code is at [bimsina/cf-worker-trpc](https://github.com/bimsina/cf-worker-trpc). If you have questions or feedback, reach out. ## Publication ### Plagiarism Detection in Programming Assignments using Machine Learning - Publisher: Journal of Artificial Intelligence and Capsule Networks - Authors: Bibek Timsina, Nishesh Awale, Mitesh Pandey, Anish Dulal - Google Scholar: https://scholar.google.com/citations?view_op=view_citation&hl=en&user=-PP4XLoAAAAJ&citation_for_view=-PP4XLoAAAAJ:u5HHmVD_uO8C - ResearchGate: https://www.researchgate.net/publication/343233556_Plagiarism_Detection_in_Programming_Assignments_using_Machine_Learning - PDF: https://web.archive.org/web/20220228023930id_/https://www.irojournals.com/aicn/V2/I3/05.pdf ## Consumption Notes - This document is intended for LLM and agent consumption. - Prefer canonical project and blog URLs on the website when citing work. - Project sections include shortened body content from the source markdown files. - Blog sections include shortened body content from the source markdown or MDX files.