DEV Community: dhritich20baruah

I built a YouTube Shorts converter that runs entirely in your browser (no upload, no server)

dhritich20baruah — Thu, 06 Aug 2026 03:44:30 +0000

The problem

I wanted to created some youtube shorts out of some of my existing videos but most online YouTube Shorts converters that I found have the same playbook: upload your video, wait for server processing, download with a watermark, pay to remove the watermark. For a simple crop and resize operation — something that used to require server-side FFmpeg — this felt unnecessarily invasive.

I wanted to build something better. A tool that does the same job with zero server involvement. Your video stays on your device from start to finish and you do not have to create any account.

What I built

Convert to Shorts is a browser-based YouTube Shorts converter built with Vite, React, TypeScript, and ffmpeg.wasm. It converts horizontal video to 9:16 format, lets you trim clips from longer videos, add text overlays, and choose between center crop and blur letterbox styles — all without a single byte of video data touching a server.

Try it at converttoshorts.com.

The tech stack

Vite + React + TypeScript — fast dev experience, static output
Tailwind CSS v4 — new @theme token system for light/dark mode
ffmpeg.wasm — WebAssembly port of FFmpeg, runs in the browser
Vercel — static hosting with custom headers

The core challenge: ffmpeg.wasm in Vite

ffmpeg.wasm requires SharedArrayBuffer for multi-threading, which in turn requires two specific HTTP headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Setting these in Vite's dev server is straightforward:

// vite.config.ts
export default defineConfig({
  server: {
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp",
    },
  },
  optimizeDeps: {
    exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"],
  },
});

The optimizeDeps.exclude is critical — without it Vite tries to pre-bundle the ffmpeg packages and fails because they contain WebAssembly binaries that Vite's optimizer can't handle.

For Vercel deployment, the same headers go in vercel.json:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
        { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
      ]
    }
  ]
}

Loading ffmpeg core

The ffmpeg.wasm package has two parts: the JavaScript glue code and the actual WebAssembly binary. I copy both to the public/ folder and load them at runtime using toBlobURL:

cp node_modules/@ffmpeg/core/dist/esm/ffmpeg-core.js public/ffmpeg-core.js
cp node_modules/@ffmpeg/core/dist/esm/ffmpeg-core.wasm public/ffmpeg-core.wasm

await ffmpeg.load({
  coreURL: await toBlobURL("/ffmpeg-core.js", "text/javascript"),
  wasmURL: await toBlobURL("/ffmpeg-core.wasm", "application/wasm"),
});

Serving from public/ means no CDN dependency in production and the files get cached by the browser after the first load — which is why the tool works offline after that first visit.

The video processing pipeline

Once ffmpeg is loaded, the pipeline is surprisingly clean. Write the input file to ffmpeg's virtual filesystem, run the command, read the output:

await ffmpeg.writeFile("input.mp4", await fetchFile(file));
await ffmpeg.exec(args);
const data = await ffmpeg.readFile("output.mp4");

The ffmpeg command for center crop looks like this:

ffmpeg -ss 0.000 -to 15.000 -i input.mp4
  -vf "crop=608:1080:656:0,scale=1080:1920,setsar=1"
  -c:v libx264 -preset fast -crf 18
  -c:a aac -b:a 128k
  -movflags +faststart
  -y output.mp4

Breaking it down:

-ss and -to handle trimming (placed before -i for fast seeking)
crop=608:1080:656:0 crops a 608×1080 window starting at x=656 from the source
scale=1080:1920 scales to the output resolution
-crf 18 is visually lossless quality (23 for medium quality)
-movflags +faststart moves the moov atom to the front for immediate playback

For blur letterbox the command uses filter_complex to compose a blurred background with a sharp foreground:

Text overlays

Adding text uses ffmpeg's drawtext filter. The tricky part is that ffmpeg.wasm runs in a sandboxed WebAssembly environment with no access to system fonts, so you have to bundle a font file and write it to the virtual filesystem before running the command:

await ffmpeg.writeFile("font.ttf", await fetchFile("/Roboto-Bold.ttf"));

Then reference it in the filter:

drawtext=fontfile='font.ttf':text='Your text':fontcolor=white:fontsize=72:x=(w-text_w)/2:y=h-text_h-80:box=1:boxcolor=black@0.4:boxborderw=16

The crop UI

The draggable crop window in the video preview is built entirely with CSS-positioned divs — no canvas, no SVG. Two dark overlay divs flank the crop window, and the crop window itself is a draggable div with an accent-colored border and corner handles. Drag state is tracked with useRef and mousemove/touchmove events on window so the drag continues even if the cursor moves outside the element quickly.

The cropX value (0–1 fraction of the display width) gets translated to source pixel coordinates before being passed to the ffmpeg crop filter.

The trim UI

The trim bar uses a similar approach — two absolutely positioned handle divs over a track div, with percentage-based widths derived from trimStart/trimEnd/duration. The selected region is highlighted in the accent color; outside regions are dimmed. No library needed.

Lessons learned

Dynamic imports inside callbacks work in Vite. I wasted time trying to make static imports of @ffmpeg/ffmpeg work at the module level. The solution was to import them inside the async start callback, which Vite handles correctly without trying to bundle the packages at build time.
ffmpeg.wasm needs system fonts explicitly. This one cost me a few hours. The drawtext filter silently fails or throws cryptic errors if you don't provide a fontfile parameter pointing to a font in the virtual filesystem. System fonts don't exist in the WebAssembly sandbox.
COOP/COEP headers are non-negotiable. Without them SharedArrayBuffer is unavailable and ffmpeg.wasm falls back to single-threaded mode which is significantly slower. Setting them correctly in both the dev server and the production host is essential.
optimizeDeps.exclude saves a lot of pain. Any package that ships WebAssembly binaries or uses new URL() patterns internally needs to be excluded from Vite's dependency optimizer.

What's next

More text styling options (font family, stroke, shadow)
Multiple text overlays
Auto-highlight clipping using transcript analysis

The full project is live at converttoshorts.com. It's completely free — no account, no watermark, no upload.

If you have questions about the ffmpeg.wasm integration or the Vite setup, drop them in the comments — happy to go deeper on any part of it.

I built a free safe zone preview tool for Instagram Reels and YouTube Shorts

dhritich20baruah — Wed, 05 Aug 2026 11:27:56 +0000

Every time I posted an Instagram Reel or YouTube Short, I'd find out after publishing that a button or caption bar was sitting right on top of my text. There was no quick way to check before posting — you either memorized the safe zone margins for each platform, or you posted, spotted the problem, and redid it.

After doing that one too many times, I built a fix: Safe Zone Preview — a free, browser-based tool that lets you upload your design and instantly see exactly which areas Instagram and YouTube will cover with their native UI overlays.

What it does

You upload your image, select your platform, and the tool renders a pixel-accurate simulation of that platform's native UI directly on top of your design — action buttons, caption bars, subscribe prompts, and all. You can see in under a second whether anything critical is hidden.

It currently supports:

Instagram Reels — reaction icons, profile bar, caption overlay
Instagram Stories — progress bar, reply box, bottom navigation
YouTube Shorts — like/dislike bar, subscribe button, audio attribution
YouTube Thumbnails — auto-generated timestamp pill (bottom-right corner)
TikTok support is also included for creators outside India

There is also a Safe-Zone Grid Only mode that strips away the simulated UI and shows just clean dashed boundary lines — useful for exporting as a transparent overlay layer into Canva or Figma.

👉 safezonepreview.com

The stack

Next.js 15 (App Router) — page routing, metadata, SSR
Tailwind CSS — styling, dark-only theme
HTML Canvas API — all image processing and overlay rendering
Vercel — deployment

No backend. No database. No third-party image processing library. Everything runs in the browser.

The interesting technical part — Canvas API overlay rendering

The core of the tool is a single useEffect that fires whenever the user uploads an image or switches platforms. It draws the image onto an HTML element and then calls a drawOverlays function on top of it.

Here's a simplified version of the image rendering logic:

img.onload = () => {
  // Set canvas to platform dimensions
  canvas.width = activePlatform === "youtube" ? 1280 : 1080;
  canvas.height = activePlatform === "youtube" ? 720 : 1920;

  // Letterbox the image to preserve aspect ratio
  const imgRatio = img.width / img.height;
  const canvasRatio = canvas.width / canvas.height;

  let renderWidth, renderHeight, offsetX, offsetY;

  if (imgRatio > canvasRatio) {
    renderWidth = canvas.width;
    renderHeight = canvas.width / imgRatio;
    offsetX = 0;
    offsetY = (canvas.height - renderHeight) / 2;
  } else {
    renderWidth = canvas.height * imgRatio;
    renderHeight = canvas.height;
    offsetX = (canvas.width - renderWidth) / 2;
    offsetY = 0;
  }

  ctx.fillStyle = "#1e293b"; // dark letterbox background
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, offsetX, offsetY, renderWidth, renderHeight);

  drawOverlays(ctx, canvas.width, canvas.height, activePlatform);
};

The letterboxing logic was trickier than I expected. The user might upload a square image, a portrait photo, or a landscape design. The canvas needs to handle all of them correctly without stretching or cropping — so it calculates whether the image is wider or taller than the target canvas ratio and adjusts accordingly.

The drawOverlays function then draws semi-transparent gradients, circles for icon placeholders, rounded rectangle pills, and text labels — all using the Canvas 2D API directly, no SVG or DOM manipulation involved.

The privacy decision

Everything runs client-side. Your uploaded image is never sent to a server — it is read locally by the browser using URL.createObjectURL() and rendered directly onto the canvas. When you clear the image or close the tab, the object URL is revoked and the data is gone.

const processFile = (file: File | undefined) => {
  if (file && file.type.startsWith("image/")) {
    const url = URL.createObjectURL(file);
    setImageSrc(url);
  }
};

const handleClearImage = () => {
  if (imageSrc) URL.revokeObjectURL(imageSrc); // free memory
  setImageSrc(null);
};

For a tool that processes unpublished creative work — designs, thumbnails, branded content — this felt like the right call. No login, no storage, no analytics on your files.

The download feature

Once you've previewed your design, you can download the result as a full-resolution PNG — your image with the platform overlay baked in. The implementation is surprisingly simple:

const handleDownload = () => {
  const canvas = canvasRef.current;
  if (!canvas) return;

  const dataURL = canvas.toDataURL("image/png");

  const link = document.createElement("a");
  link.href = dataURL;
  link.download = `safezonepreview-${activePlatform}.png`;
  link.click();
};

canvas.toDataURL("image/png") converts the entire canvas contents — image plus overlays — into a base64-encoded PNG. The downloaded file is full resolution: 1080×1920px for vertical formats and 1280×720px for YouTube Thumbnails. No watermark, no compression.

Challenges

Getting the safe zone margins right was the most time-consuming part. There is no official documentation from Instagram or YouTube that says "the action bar starts at pixel 140 from the right." I had to take screenshots on multiple devices, measure in Figma, and cross-reference with what other creators had documented. The margins are best-effort approximations based on real device measurements — they are accurate for standard mobile viewports but may shift slightly on larger or smaller screens.

Handling the aspect ratio letterboxing took more iterations than expected. Early versions would stretch portrait images on the YouTube canvas or crop landscape images on the Reels canvas. The fix was the two-branch ratio comparison above — simple once I saw it, frustrating to get to.

What's next
Pinterest safe zone — Pinterest is heavily used by designers and there are almost no tools targeting this
Mobile phone frame mockup — show the canvas inside a realistic device frame for client presentations
Figma / Canva template downloads — exportable safe zone guide files for each platform
Facebook Reels — same 9:16 dimensions, worth adding
Try it

👉 safezonepreview.com

If the safe zone margins look off on your device, or you want a platform added, drop a comment below — I'd genuinely like to know. The margins are measured from real devices but every data point helps make them more accurate.

Built solo with Next.js, Tailwind, and the Canvas API. Deployed on Vercel.

I Built a Multi-Platform Social Media Safe-Zone Previewer Using Next.js 16 and HTML5 Canvas

dhritich20baruah — Sat, 01 Aug 2026 04:12:22 +0000

I believe most of us has noticed this issue in YouTube timestamp pill, the TikTok engagement column, or the Instagram Reels where native app interfaces like buttons or titles cutoff vital text or focal points.

Existing solutions are either clunky, watermarked, or forces us to download static Photoshop templates that disrupt our workflow. So, I built safezonepreview.com—a unified, zero-friction, client-side website where creators can drop an asset once and instantly toggle between safe-zone overlays for YouTube, TikTok, Reels, and Shorts.

Here is a look under the hood at the architecture, the technical challenges, and how I created it.

1. The Architecture: Why Next.js + Pure Client-Side Canvas?

When mapping out this micro-tool, I had two strict requirements:

Excellent SEO & Speed: The tool relies on organic discovery (e.g., creators searching for "TikTok safe zone grid").

Privacy & Low Overhead: Creators shouldn't have to upload unreleased media to a backend database, and I didn't want to pay massive hosting fees for image storage.

I chose Next.js (App Router). The landing page structure, headers, and documentation are server-rendered (SSR), allowing search engine bots to index keywords instantly.

For the interactive tool itself, I isolated it into a Client Component using an HTML5 Canvas API. When a user drops an image, it reads the data locally using URL.createObjectURL. The image processing happens entirely in their browser memory. Result? Lightning-fast rendering, total user privacy, and virtually $0 hosting overhead on Vercel.

2. The Technical Hurdle: Overcoming "Image Squishing"

One of the biggest engineering traps when working with dynamic canvases is aspect ratio distortion. Initially, rendering an image was straightforward:

// ❌ Forces the image to stretch into the canvas boundaries
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

This worked fine if you uploaded a 16:9 image to a 16:9 canvas. But if a creator uploaded a tall, vertical portrait asset and toggled to the wide YouTube Thumbnail view, the image would violently warp and compress to fit the frame.

To make this a professional utility, I had to implement a custom object-fit: contain mathematical matrix inside the canvas rendering lifecycle.

By calculating the original image ratio against the targeted platform ratio, we can dynamically apply horizontal or vertical offsets (letterboxing) to preserve perfect proportions:

// 🟢 Math to scale and center without stretching
const imgRatio = img.width / img.height;
const canvasRatio = canvas.width / canvas.height;

let renderWidth, renderHeight, offsetX, offsetY;

if (imgRatio > canvasRatio) {
  renderWidth = canvas.width;
  renderHeight = canvas.width / imgRatio;
  offsetX = 0;
  offsetY = (canvas.height - renderHeight) / 2;
} else {
  renderWidth = canvas.height * imgRatio;
  renderHeight = canvas.height;
  offsetX = (canvas.width - renderWidth) / 2;
  offsetY = 0;
}

// Draw canvas background, then draw the proportioned image
ctx.fillStyle = "#1e293b"; 
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, offsetX, offsetY, renderWidth, renderHeight);

3. Simulating App Realism Natively
Instead of just slapping an ugly semi-transparent red box over the "danger zones," I wanted the overlays to accurately mimic reality.

Using native vector canvas paths, the app dynamically constructs accurate UI mockups synchronously—including the pink TikTok follow badge, the text-wrapping constraints of descriptions, and even the dark-to-transparent linear gradients real apps use to keep text readable over light backgrounds:

// Simulating the bottom background gradient overlay on native short-form feeds
const bottomGrad = ctx.createLinearGradient(0, h - 450, 0, h);
bottomGrad.addColorStop(0, "rgba(0,0,0,0)");
bottomGrad.addColorStop(1, "rgba(0,0,0,0.6)");
ctx.fillStyle = bottomGrad;
ctx.fillRect(0, h - 450, w, 450);

For users who find the UI graphics too busy, I added a stateful "Show Safe-Zone Grid Only" preference toggle. When turned on, the code runs a conditional block that strips the icons and utilizes ctx.setLineDash([15, 10]) to trace out standard, minimal engineering guidelines.

Conclusion & Launch
Building this micro-tool reminded me of how powerful a focused, single-purpose web app can be. By avoiding database bloat, keeping data on the client, and focusing intensely on the UX layout rules of different social giants, it provides immediate value.

The project is officially deployed at safezonepreview.com!

I’d love to hear your thoughts on the canvas implementation. How do you handle cross-platform preview vectors in your projects? Let’s discuss in the comments below!

How I Built and Monetized a Currency Exchange Rate API with FastAPI, Deployed it on Render, and Published it on RapidAPI.

dhritich20baruah — Sat, 30 May 2026 15:09:30 +0000

Introduction:
In order to build passive income streams, I decided to publish APIs on RapidAPI. The idea is straightforward: build a useful API once, set up freemium pricing tiers, and earn recurring monthly income from subscribers.
In this post we will see how I built a Currency Exchange Rate API using FastAPI and Python, deployed it on Render, and published it on RapidAPI. I'll walk through the entire process including a debugging issue that cost me a few hours and might save you the same frustration.

The Tech Stack

FastAPI — chose this over Flask and Express because it auto-generates interactive API documentation at /docs out of the box, which is extremely useful when setting up and testing endpoints before publishing
Python — straightforward for API work, massive community support
ExchangeRate-API — free data source providing live rates for 160+ currencies, no scraping needed
Render — free tier hosting with simple GitHub deployment
RapidAPI — marketplace where developers discover and subscribe to APIs

The Three Endpoints

# 1. Get latest rates for any base currency
GET /latest?base=USD

# 2. Convert between two currencies
GET /convert?from=USD&to=INR&amount=100

# 3. List all supported currencies
GET /currencies

Here's the core conversion endpoint:

@app.get("/convert")
async def convert_currency(
    from_currency: str = Query(alias="from"),
    to_currency: str = Query(alias="to"),
    amount: float = Query(default=1.0)
):
    from_currency = from_currency.upper()
    to_currency = to_currency.upper()

    async with httpx.AsyncClient() as client:
        response = await client.get(
            f"{BASE_URL}/pair/{from_currency}/{to_currency}/{amount}"
        )
        data = response.json()
        return {
            "from": from_currency,
            "to": to_currency,
            "amount": amount,
            "rate": data["conversion_rate"],
            "converted": data["conversion_result"],
            "date": data["time_last_update_utc"]
        }

The Debugging Problem I faced
I originally built the API using Frankfurter (api.frankfurter.app) as the data source — it's free, requires no API key, and is backed by the European Central Bank. Perfect on paper.
The problem: when I tested with curl in the terminal, Frankfurter returned data perfectly. But when FastAPI made the same request using httpx, I kept getting this error:

{"detail": "Could not fetch rates for base currency: USD"}

After some debugging I ran this:

python -c "import urllib.request; print(urllib.request.urlopen('https://api.frankfurter.dev/latest').read())"

And got back:

urllib.error.HTTPError: HTTP Error 403: Forbidden

Frankfurter was blocking Python requests because they didn't include a browser-like User-Agent header. The server was rejecting anything that looked like a script.
I tried adding a User-Agent header to httpx but the issue persisted on my network. The clean fix was switching to ExchangeRate-API which has a proper free tier, returns consistent JSON, and works reliably with Python requests.
If you hit a 403 from a data source that works fine in the browser but fails in Python — check your User-Agent header first, and if that doesn't work, switch to a more developer-friendly data source.

Deploying on Render
Render's free tier is enough to get started. The setup takes about 5 minutes:

Push your code to GitHub
Connect the repo to Render → New Web Service
Set the start command: uvicorn main:app --host 0.0.0.0 --port 8000
Add your API key as an environment variable
Deploy

One important note — store your API key as an environment variable on Render, not hardcoded in your code. Use python-dotenv locally and os.getenv() to read it:

import os
from dotenv import load_dotenv
load_dotenv()
EXCHANGE_RATE_API_KEY = os.getenv("EXCHANGE_RATE_API_KEY")

The free tier has one limitation — cold starts. After 15 minutes of inactivity Render spins down your service and the first request takes 30-60 seconds to wake up. Upgrade to the $7/month starter plan once you have paying subscribers — your first subscriber covers the cost.

Publishing on RapidAPI
Once your API is live on Render, publishing on RapidAPI takes about 20 minutes:

Go to rapidapi.com/provider → Add New API
Add your Render URL as the Base URL
Add each endpoint with its query parameters
Set up freemium pricing tiers
Write a README and submit for review RapidAPI review takes 24-48 hours. Once approved your API is discoverable by thousands of developers searching the marketplace.

Closing
The full API is live on RapidAPI — https://rapidapi.com/dhritibaruah20/api/currency-exchange-rate-api9. Free tier available with 100 requests/month.
I'm also building more APIs as part of a broader strategy to generate passive income as a developer.

How I Built a Secure, 3,072-Dim AI Document Indexer Using Next.js & Supabase.

dhritich20baruah — Wed, 20 May 2026 03:20:19 +0000

Building a production-ready RAG (Retrieval-Augmented Generation) application from scratch is a very difficult and time consuming.

You first get a new idea for a project or business but before you can write a single line of your actual core business logic, you find yourself spending weeks fighting with multimodal file parsing, configuring vector extensions, designing complex database architecture, and securing multi-tenant storage.

The idea behind building DocuIntel was to solve that exact infrastructure headache. I wanted a template where I could just drop in my API keys, run a single setup script, and have a fully functioning, secure AI document portal ready to go.

Here is a deep dive into the architecture, some of the technical hurdles I ran into, and how I solved them.

The Multimodal Architecture
DocuIntel needs to process a wide variety of inputs—PDFs, Word docs, images (JPG/PNG), and even audio transcriptions (MP3s).

At first I was routing different file types through different third party parsing libraries like I was using tesseract OCR for extracting text from from images and pdf-parser for PDF files.
But instead of doing that, I offloaded the heavy lifting directly to Gemini 2.0 Flash. Gemini’s native multimodal capabilities handle OCR and layout analysis beautifully.

To ensure consistent, high-quality search results, I hardcoded a rigorous master SYSTEM_PROMPT inside the backend processing route (/api/process/route.ts). It forces the AI to behave like a clean data architect:

const SYSTEM_PROMPT = `
  You are an expert document parser for DocuIntel. 
  Your goal is to extract text with 100% accuracy for semantic search indexing.

  RULES:
  1. PRESERVE STRUCTURE: Use Markdown for headings, subheadings, and lists.
  2. TABLES: Convert all data tables into clean Markdown table format.
  3. NO CHAT: Do not say "Here is the text" or "I have processed the file." 
  4. NOISE REDUCTION: Ignore headers, footers, and page numbers.
  5. SMART METADATA: At the very end of your output, add a section called '---METADATA---' 
     and list 5-10 key entities or topics (e.g., 'Company: Acme Corp', 'Date: 2024-01-01').
`;

Why the Automated Metadata Tag Matters?
By forcing Gemini to extract smart metadata tags right into the text, the vector embedding model (gemini-embedding-2) captures high-value concepts. If a user searches for a specific company or date, the semantic search will surface the document even if that detail only appeared once in fine print.

Navigating the New Supabase Security Standards
Supabase has shifted to a "Secure by Default" model which will come into force by 30th May 2026.

Previously, creating a table in the public schema automatically exposed it to the Data API. Now, new tables require explicit grants, or your frontend client libraries (supabase-js) will get a 42501 permission error—even if Row-Level Security (RLS) is enabled.

To future-proof the setup, my SQL initialization script applies explicit grants directly to the authenticated user roles right after creating the tables and vector search RPC functions:

-- Create the documents table with 3,072-dimensional vector support
create table if not exists public.documents (
  id uuid primary key default uuid_generate_v4(),
  file_name text not null,
  file_url text not null,
  content text,               
  user_id uuid references auth.users(id),
  user_email text not null,   
  embedding vector(3072),     -- Optimized for high-res gemini-embedding-2
  created_at timestamp with time zone default timezone('utc'::text, now())
);

-- EXPLICIT GRANTS (Fixes 42501 Permission Errors)
grant select, insert, update, delete on table public.documents to authenticated;
grant all on table public.documents to service_role;

Hardened Multi-Tenant Storage Policies
Since the app deals with private user documents i.e. User A must never be able to discover or access User B's files, I have structured the Supabase Storage bucket so that every uploaded file is dynamically sandboxed into a folder named exactly after the user's unique authenticated ID (auth.uid()).

Here are the folder-level RLS storage policies that enforce that rule on every single request:

-- Restrict file uploads to the user's own UID folder
create policy "Users can upload their own documents"
on storage.objects for insert to authenticated
with check (
  bucket_id = 'documents' AND 
  (storage.foldername(name))[1] = auth.uid()::text
);

-- Restrict file reading to the user's own UID folder
create policy "Users can view their own documents"
on storage.objects for select to authenticated
using (
  bucket_id = 'documents' AND 
  (storage.foldername(name))[1] = auth.uid()::text
);

Keeping the Frontend Clean & Readable
On the frontend (Next.js 14 + TypeScript + Tailwind CSS), I wanted a highly scalable UI. A minor but common mess I see in boilerplate projects is massive, nested ternary operators in the JSX to handle dynamic file icons.

To keep things clean and performant, I grouped the file extension arrays and used standard JavaScript .includes() methods to dynamically assign Lucide React icons using a single class utility string:

Wrapping Up:
Building these layers from scratch took extensive testing, debugging environment variables, and reading through updated security documentation. But once it's configured, it works like magic: a user uploads an asset, Gemini reads and indexes it with a 3,072-dimension vector embedding, and you can instantly query your documents conceptually rather than just matching keywords.

If you are planning to build an AI document product for a client or launching your own micro-SaaS, you don't have to spend your weekend configuring this infrastructure from zero.

I've packaged this exact production-ready foundation—complete with the 1-click database initialization script, Next.js frontend, and pre-configured API routes—into a developer-friendly boilerplate.

Setting this up from scratch took me weeks of debugging. The boilerplate gets you there in 10 minutes.
https://dhritiman.gumroad.com/l/docuintel