标签：#nextjs

Building Next-Gen Agentic Architectures: From Local RAG to Sandboxed Execution and BigQuery MCP The 3 AM production fire revealed a harsh truth: modern agentic systems often collapse under their own weight. A single agent processing 10K RAG queries OOM-killed an 8GB cloud instance. The culprit was not the workload but the infrastructure: @pinecone-client/vecdb with 47 transitive dependencies bloat memory with unquantized float32 embeddings. The solution was 200 lines of Python using sqlite3 , array , and heapq , with bounded queues and race condition resilience. This is the story of how we replaced dependency bloat with surgical precision. The Dependency Problem Agentic systems today face three critical bottlenecks: Vector Search : Libraries like faiss-cpu (12MB) combined with pg-vector (synchronous disk I/O) block the event loop, creating latency spikes. BigQuery : The @google-cloud/bigquery client (12MB) plus grpcio (5MB) leaks file descriptors, hitting Linux's default 1024 soft limit. Sandboxing : Docker containers consume 500MB+ per instance, making them impractical for memory-constrained environments. The root cause is always the same: unbounded resource consumption. 1M vectors at 768 dimensions in float32 consumes 3GB of memory. Synchronous I/O stalls the event loop. Unmanaged connections leak file descriptors. The Zero-Bloat RAG Engine The solution begins with a fundamental shift: replace heavy dependencies with lightweight, audited code. Our LocalRAG implementation demonstrates this approach: import sqlite3 import array import heapq import json import threading from typing import List , Tuple , Optional class LocalRAG : def __init__ ( self , db_path : str , dim : int = 768 , max_vectors : int = 1_000_000 ): self . dim = dim self . max_vectors = max_vectors self . lock = threading . Lock () self . conn = sqlite3 . connect ( db_path , isolation_level = None , check_same_thread = False ) # Enable WAL mode for concurrent reads/writes self . conn . execute ( " PR

Hello everyone! 👋 Happy to be joining the DEV community. I’m a Computer Engineering student based in Italy. My main focus is Cybersecurity, but I strongly believe you have to know how to build a system before you can secure (or break) it. Lately, I’ve been jumping between two very different worlds: Embedded C: writing firmware, managing file systems, and building custom OLED menus for the M5Stick S3. Frontend: building web apps using Next.js and React. My workflow is a bit of a hybrid. I like to focus on the system architecture, memory management, and edge cases, while using AI tools to do the heavy lifting of writing the actual code. Then, I review everything strictly to make sure it doesn't break. I’m here to build in public, share my projects, and learn from this awesome community. What are you all currently hacking on? See you around!

How I Built a Wedding Planning Suite with Supabase in 3 Months Quick Answer: I built a full wedding planning platform in 90 days using Supabase as the backend (PostgreSQL database, real-time subscriptions, Row Level Security, and OAuth auth), Next.js 14 for the frontend, and a few carefully chosen npm packages for specific features like QR code scanning. The key was leveraging Supabase's managed services to avoid building auth, websockets, and file storage from scratch. Introduction Three months ago, I had an idea: what if couples could plan their entire wedding through one cohesive platform? Not a static checklist app, but a living, breathing system where vendors, guests, budgets, and timelines all talked to each other in real time. I'm a solo developer with a day job. I didn't have a team of backend engineers to build authentication, real-time sync, or file storage infrastructure. I needed a stack that would let me ship fast without shipping broken. Enter Supabase. I'd heard the "Firebase alternative" pitch before, but what I discovered was something far more powerful for developers who actually want to own their data and their SQL. This is the story of how I built WedPlanner—a full wedding planning suite—with Supabase, Next.js, and a few other tools. No VC funding. No offshore team. Just me, a tight deadline, and a PostgreSQL database that never let me down. Why Supabase? The Architecture Decision That Made Everything Possible When you're building alone, every architectural decision compounds. Pick the wrong database, and you'll spend weeks fighting migrations. Pick the wrong auth solution, and you'll ship with security holes you don't even know about. I evaluated Firebase, PlanetScale, Clerk, and rolling my own PostgreSQL on RDS. Here's why Supabase won: PostgreSQL, not a proprietary document store. Wedding data is relational. A guest belongs to a wedding. A vendor has multiple bookings. A budget category has many line items. Trying to model this in Firestore's

 # Can AI Remember What It Sees? The 3 AM OOM That Taught Me Everything About Visual Memory Systems At 2:47 AM, my production cluster dropped from 120 fps across 26 cameras down to absolute zero. The culprit was an unbounded `asyncio.Queue` that ballooned to 14 GB in 11 seconds. The fix was not more RAM. It was treating hardware constraints as first-class citizens in every design decision. --- ## The Core Lie: Statelessness by Design AI models forget by default. Transformers discard context once their attention window expires. CNNs process each frame in isolation with no persistence layer. **"Remembering" requires explicit memory injection.** You need RAM for short-term buffers, disk for long-term archives, and compressed embeddings for semantic recall. These are not interchangeable. Most engineers conflate them and pay the price in production. In practice, this distinction separates graceful degradation from hard crashes at the worst possible moment. The [ ShipMVP.tech ]( https://www.shipmvp.tech ) blueprint puts it plainly: **memory is a resource, not a feature.** --- ## Root Cause: The Three Sins That Killed My Pipeline ### Sin 1: Unbounded Queues python BEFORE: OOM in 11 seconds queue = asyncio.Queue() # No maxsize → infinite growth until death **Fix:** Cap queues to a hardware-derived bound. python AFTER: Hardware-bounded, fails fast on overflow self.queue = asyncio.Queue(maxsize=100) # ~1.5 MB at 224x224x3 uint8 **Failure walkthrough:** 1. Traffic spike hits 1200 fps and the queue swells to 800K frames (14 GB). 2. The kernel invokes swap thrashing until the OOM killer terminates the process. 3. **Lesson:** Derive `maxsize` from `(available_RAM / frame_size) * safety_factor`. Never guess. ### Sin 2: Redundant Allocations Each frame went through four separate copies: OpenCV BGR, Pillow RGB, NumPy

I'm a business student, not a developer. I shipped a working SaaS product in 10 days with Claude Code. (Draft for dev.to — edit anything that doesn't sound like you, then publish. Suggested tags: #ai #nextjs #supabase #buildinpublic) Ten days ago I couldn't have told you what a webhook was. Last night I published quidkit — a Next.js + Supabase + Stripe starter kit with working auth, subscription billing, and documentation — and this morning I'm writing this from holiday. I study business management. I'm not a CS student. I can't really "code" in the way that word usually means. What I can do, it turns out, is manage a very fast, very literal developer that lives in my terminal — and that changed what's buildable for someone like me. This is the honest write-up: what I built, how the AI workflow actually looked, every bug that nearly got me, and what it cost. What I built quidkit is a starter kit for developers building subscription apps. The pitch: before anyone can pay you monthly for your app idea, you need the boring foundation — accounts and login, taking payments, knowing WHO paid, emails that send themselves, security so users can't see each other's data. That's 2–4 weeks of tedious work that isn't your idea. quidkit is that foundation, pre-built: clone it, rename it, build your thing on top. Stack: Next.js 16, React 19, Tailwind v4, Supabase (auth + database with row-level security), Stripe (checkout, customer portal, webhook sync), Resend (email). Live demo at demo.quidkit.dev — you can sign up and "pay" with Stripe's test card and watch the whole pipeline work. £29. Because the established kits are £200–£300 and I'm literally the target market: someone without that kind of money. The actual workflow People imagine "AI builds your app" as one magic prompt. It's not. It's closer to being a project manager with one extremely capable, extremely literal employee: I wrote specs, not code. Every session started with me pasting a detailed brief into Claude Code — w

I went through the documentation and feature list of React DataGrid, and I wrote React DataGrid: A...

We Fixed the Eval Platform: The TypeError That Took Down Three Benchmark Pipelines At 3 AM, Sentry lit up with TypeError: Cannot read property 'map' of undefined . Three benchmark pipelines crashed. Not a memory leak, not a segfault, but a race condition hiding behind a TypeError, turning a high-stakes eval run into chaos. Here is how we resolved it, with no fluff. The Root Cause: Async Data Meets Blind Faith in .map() The error trace pointed to evaluator.ts:42 , where .map() assumed inputData.metrics would always exist. The junior dev tested with clean data, but in production, fetchBenchmarkData() (async) and evaluatePipeline() (sync) were racing . At 100+ RPS, metrics was often undefined . The Offending Code: const results = inputData . metrics . map ( metric => computeScore ( metric )); Why It Failed: Race Condition : inputData was fetched asynchronously, but evaluatePipeline() treated it as synchronous. OOM Risk : Unbounded .map() on 10K+ metrics could exhaust 8GB RAM. Worker Starvation : No concurrency limits led to thread pool exhaustion. The Fix: Guard Clauses, Bounded Queues, and Pragmatism Step 1: Fail Fast, Fail Loud Added zero-overhead runtime checks to reject bad data early: // eval-platform/core/evaluator.ts import { isNullOrUndefined } from ' ../utils/guards ' ; async function evaluatePipeline ( inputData : BenchmarkInput ): Promise < EvaluationResult > { if ( isNullOrUndefined ( inputData ?. metrics )) { throw new Error ( ' EVAL_400: metrics missing ' ); } // Proceed only if data is valid } Why? Stops TypeError crashes immediately. Cost: 1-2 CPU cycles. Negligible. Step 2: Chunked Processing for 8GB RAM Original code processed all metrics at once, causing OOM crashes. Fixed with 100-item chunks: const CHUNK_SIZE = 100 ; // 100 items ≈ 10MB peak memory const results : number [] = []; for ( let i = 0 ; i < inputData . metrics . length ; i += CHUNK_SIZE ) { const chunk = inputData . metrics . slice ( i , i + CHUNK_SIZE ); results . push (... chunk . map

Finding software is easy. Finding the right software is not. Search for almost any category—email marketing, CRM, productivity, design, or AI—and you will find hundreds of options. Every product presents itself as the best choice, while many comparison articles repeat the same features without explaining which users each tool actually suits. That problem inspired me to build PickTool , a platform for discovering and comparing AI and SaaS tools. PickTool is still evolving. I am currently improving its content quality, tool coverage, comparison experience, performance, and SEO structure. This is not a polished launch announcement. It is an honest look at the architecture behind the project and some of the lessons I have learned while building it. What Is PickTool? The goal of PickTool is simple: Help people find the right software in minutes, not hours. Instead of creating a basic directory filled with product names and affiliate links, I want each important tool to include useful and structured information, such as: Core features Pricing model Best use cases Strengths and limitations Ratings and evaluation criteria Alternatives Direct comparisons Related guides and category pages The challenge is that this creates several interconnected types of content. A single product can appear on its own tool page, inside a category, in multiple comparisons, and in articles about the best software for a particular use case. Keeping all of this consistent requires more than publishing isolated blog posts. Why I Chose Next.js and Laravel PickTool uses a decoupled architecture: Next.js powers the public-facing website. Laravel powers the backend, API, database logic, and administration system. MySQL stores tools, categories, ratings, pricing information, and editorial content. I chose this combination because I wanted the frontend and content-management logic to evolve independently. Laravel provides a structured backend for managing relationships between tools and content. Next.js

Building App-like Experiences with Next.js 16.3 A hands-on look at how Next.js 16.3 helps apps feel fast and smooth, more like a single-page app, without losing the benefits of server rendering. Using four demo apps, it shows how features like Instant Navigations, Cache Components, Partial Prefetching, optimistic updates, Suspense streaming, offline retry, and View Transitions work together in real apps ⚡️ Sponsor: Arcjet AI compliance controls Protect your AI applications from prompt injection, PII leaks, and unauthorized tool calls. 📙 Articles / Tutorials / News Next.js team AMA The Next.js team opened the floor to community questions and covered a lot of ground. The AMA focused on Next.js 16.3, performance, caching, App Router, React Server Components, and upgrading apps, along with some insight into how the team works on the framework Coordinating Optimistic Updates in Next.js This guide shows how useActionState and useOptimistic can work together to keep the UI updated right away, save changes in the right order, and roll back cleanly if something fails Using next/root-params in Next.js 16.3 The new next/root-params API lets Server Components read top-level params like [locale] from deep in the tree, which makes next-intl much easier to use Docs for React's new browser() API The docs for React's new browser() API are now available in Canary. You can pass it to use() , where it suspends to the nearest Suspense boundary on the server, then renders normally in the browser 📦 Projects / Packages / Tools Better Auth 1.7 A big release for Better Auth, especially around OAuth, OpenID Connect, SCIM, SSO, MCP, and device login flows. The main theme here is stronger auth, better enterprise identity support, and more standards-based ways for apps and devices to sign in and get access Next 16 Calendar "Flow" A calendar and booking demo exploring Async React, Cache Components, Partial Prefetching, and View Transitions with Next.js 16.3, React 19, Tailwind CSS v4, and Prisma.

Cómo solucionar el error "Text content does not match server-rendered HTML" en Next.js App Router Este error ocurre cuando el HTML generado en el servidor (SSR/SSG) no coincide con el árbol de React que se construye durante la primera renderización en el navegador (hydration). Es un problema crítico de consistencia de estado que rompe la experiencia de usuario y puede causar comportamientos impredecibles. 🔍 Causa raíz (diagnóstico técnico) En tu caso, el error está relacionado con contenido dinámico que varía entre renderizado del servidor y renderizado del cliente , probablemente causado por: Uso de Date() , Math.random() , localStorage , window , o APIs del navegador directamente en el render . Uso de typeof window !== 'undefined' como condición de renderizado (no es idempotente entre SSR y CSR). Metaetiquetas de detección automática de iOS ( format-detection ) que inyectan nodos <a> en tiempo de ejecución. Extensiones del navegador (especialmente en desarrollo) que modifican el DOM. Librerías CSS-in-JS mal configuradas que inyectan clases o estilos dinámicos en CSR. ⚠️ Nota crítica : Next.js App Router no permite el uso de useEffect para evitar el mismatch en el primer render — el mismatch debe prevenirse , no suprimirse . ✅ Solución definitiva (pasos verificados) Paso 1: Elimina toda lógica no determinista del render NUNCA uses lo siguiente directamente en el cuerpo del componente: // ❌ Evitar const now = new Date (); // ❌ const isClient = typeof window !== ' undefined ' ; // ❌ const randomId = Math . random (); // ❌ const theme = localStorage . getItem ( ' theme ' ); // ❌ ✅ Reemplaza con: // ✅ Usar `useEffect` para *actualizar* el estado, no para *determinar* el render inicial import { useState , useEffect } from ' react ' ; export default function Component () { const [ time , setTime ] = useState < string > ( '' ); // Inicializa con valor seguro (ej. string vacío o placeholder) useEffect (() => { setTime ( new Date (). toISOString ()); }, []); return < time d

What happens when two developers edit the EXACT same line of code at the EXACT same millisecond? Race conditions, overwritten data, and a crashed server. Today, we’re tearing down the magic behind Figma and Google Docs to build a real-time collaborative code editor using Next.js 16 and CRDTs ⏱️ CHAPTER 1: The Collaborative Text Editing Trap "Building a single-user code editor is simple: a React state variable, a text area, and a save button.But the moment two developers open that same code file at the exact same millisecond... everything breaks. User A types a function name at index 5, while User B deletes a line at index 2. If you simply push text updates to a database over HTTP, you get catastrophic race conditions, overwritten code, and cursor teleportation.So, how do platforms like Google Docs, Figma, and Replit allow thousands of users to type simultaneously in real-time without locking files or destroying data? Welcome back to Behind the Abstraction. Today, we’re building a real-time collaborative code editor using Next.js 16. We’ll strip away the magic of real-time state, compare Operational Transformation vs CRDTs, and implement WebSocket edge routing using modern Full-Stack architecture." ⏱️ CHAPTER 2: OT vs CRDTs - The Core Math of Real-Time "Before writing a single line of Next.js code, we must solve a fundamental computer science problem: Mathematical Consistency across Distributed Systems.There are two primary ways to resolve typing conflicts: Operational Transformation (OT): Used by classic Google Docs. Every keypress sends an 'operation' (like Insert "a" at index 10) to a central server. The server acts as the absolute referee, transforming index positions and broadcasting the fix back to all clients. The Problem: Centralized OT servers are complex, memory-heavy, and difficult to scale horizontally at the Edge. CRDTs (Conflict-free Replicated Data Types): Used by modern tools like Figma and VS Code Live Share. Instead of raw array indexes, every chara

The idea Most apps give you a static background. I wanted Pairly to feel alive instead, so I built "Atmosphere": a real-time animated Canvas layer that sits behind every chat, fully tunable by the user, speed, density, opacity, brightness, saturation, all live. There are currently over 40 atmospheres in the system, from calm ones like Snow and Fireflies to more elaborate ones like a black hole accretion disk called Abyss. The interesting part wasn't drawing pretty particles. It was making that work smoothly on a five-year-old Android phone without draining the battery in ten minutes. Two rendering paths, not one Atmosphere isn't a single renderer, it's a small internal package ( @pairly/atmospheres ) with two shared engines that every individual atmosphere builds on: ParticleCanvas , a generic particle system for anything made of many independent objects: snow, fireflies, sakura petals. useCanvasLoop , a raw draw-loop hook for continuous scenes that aren't particle-based, like Abyss's swirling accretion disk. Both engines centralize every "don't destroy the device" concern in one place, so individual atmospheres never have to think about it. Here's useCanvasLoop 's frame loop: const frameInterval = 1000 / perf . fps ; let raf = 0 ; let last = performance . now (); let acc = 0 ; const loop = ( now : number ) => { if ( ! running ) return ; raf = requestAnimationFrame ( loop ); const elapsed = now - last ; last = now ; acc += elapsed ; if ( acc < frameInterval ) return ; const dt = acc / 1000 ; acc = 0 ; draw ( ctx , width , height , elapsedTime , perf ); }; requestAnimationFrame fires at the display's native rate (often 90-120Hz on phones now), but that doesn't mean you should draw every single time it fires. This accumulator pattern throttles actual drawing down to the target FPS from the device's performance profile, instead of trusting rAF's raw rate. Profiling the device before drawing anything Before any atmosphere renders a single frame, it checks the device: ex

I recently built a multilingual fan site for The Duskbloods , an upcoming FromSoftware game. The challenge: 9 languages (English, Japanese, Korean, Chinese, Spanish, French, German, Italian, Portuguese), static generation , and no middleware — all deployed on Cloudflare Workers. Here's how I did it and what I learned. The Architecture The site uses Next.js 15 App Router with next-intl v4 for internationalization. The key constraint: I wanted to avoid middleware to keep Cloudflare Worker costs down. src/ ├── app/ │ ├── (root)/ # English at / │ │ ├── gameplay/ │ │ ├── characters/ │ │ └── ... │ └── [locale]/ # Other languages at /zh, /ja, /ko... │ ├── gameplay/ │ ├── characters/ │ └── ... ├── messages/ # Translation files │ ├── en.json │ ├── ja.json │ ├── zh.json │ └── ... └── components/ # Shared components └── views/ Route Groups for Language Separation Instead of using middleware to detect locale, I use route groups : (root) — English content at the root path / [locale] — Other languages at /zh , /ja , /ko , etc. This means English gets clean URLs ( /gameplay ) while other languages get prefixed URLs ( /zh/gameplay ). Good for SEO — English is the default, and other languages have clear URL signals. Why No Middleware? Cloudflare Workers charge per request. Middleware runs on every request. For a static site with 9 languages, that's 9x the middleware invocations for every page load. By handling locale in the route, I skip middleware entirely. // src/app/[locale]/layout.tsx export async function generateStaticParams () { return [ ' ja ' , ' zh ' , ' ko ' , ' es ' , ' fr ' , ' de ' , ' it ' , ' pt ' ]. map ( locale => ({ locale })); } This pre-generates all locale variants at build time. Zero runtime locale detection. The Translation System Message Files Each locale has a JSON message file: // src/messages/zh.json { "gameplay" : { "intro" : { "eyebrow" : "玩法介绍" , "title" : "游戏机制" , "lead" : "深入了黄昏征讨的核心机制。" }, "virtue" : { "title" : "美德" , "types" : [ { "title" : "讨伐之美德

I shipped four browser-only video tools with ffmpeg.wasm: trim, compress, video-to-GIF and MP3 extraction. Files never leave the browser, nothing to install. Trim · Compress · GIF · MP3 (Korean UI, but the buttons are obvious) Getting there, I hit four walls. Every one of them surfaced as a single "conversion failed" line in the UI and nothing in the console . Writing them down for the next person. Stack: Next.js App Router + webpack, @ffmpeg/ffmpeg 0.12, self-hosted core. 1. webpack hijacks the dynamic import inside the worker @ffmpeg/ffmpeg spawns its worker like this: new Worker ( new URL ( " ./worker.js " , import . meta . url ), { type : " module " }); webpack recognises the pattern and bundles the worker. Fine. But it also rewrites the import(coreURL) inside that worker to go through its own module loader. The core URL arrives at runtime as a blob: URL, which webpack's loader has never heard of, so it dies with Cannot find module 'blob:...' . The error is thrown inside the worker, so the main-thread console stays empty. Fix: keep the worker out of the bundle. Copy node_modules/@ffmpeg/ffmpeg/dist/esm/worker.js to public/ffmpeg/<version>/lib/ and pass it via classWorkerURL in load() . Now the untouched worker runs. 2. classWorkerURL needs the origin Passing a path like /ffmpeg/0.12.x/lib/worker.js is not enough. The library resolves it with new URL(classWorkerURL, import.meta.url) , and inside the bundle import.meta.url is a build-time file:///C:/... path. So it goes looking for file:///C:/ffmpeg/... and fails. const BASE = `/ffmpeg/ ${ FFMPEG_VERSION } ` ; await ffmpeg . load ({ coreURL : ` ${ location . origin }${ BASE } /core/ffmpeg-core.js` , wasmURL : ` ${ location . origin }${ BASE } /core/ffmpeg-core.wasm` , classWorkerURL : ` ${ location . origin }${ BASE } /lib/worker.js` , }); Prefix location.origin and it works. 3. You cannot build a GIF palette with -vf For decent GIF quality you run palettegen first and paletteuse second. Doing it in one pass needs

Fix Next.js "params should be awaited" Error in Next.js 15+ If you are seeing the params should be awaited Next.js error after upgrading to Next.js 15 or following an older App Router tutorial, you are not alone. The error usually looks something like this: Route "/blog/[slug]" used params.slug. params should be awaited before using its properties. Sometimes it appears with searchParams . Sometimes it appears with cookies() or headers() . And sometimes the page still seems to work, but your terminal keeps shouting at you. This article will slow it down and explain the fix in a beginner-friendly way. No deep framework lecture first. Just the actual problem, the broken code, the fixed code, and the reason it works. What This Error Means in Plain English In older Next.js code, you may have treated params like a normal JavaScript object. Something like this: const slug = params . slug ; That used to feel natural. If your route was: /blog/[slug] and the user opened: /blog/my-first-post you expected: params . slug ; // "my-first-post" In newer Next.js versions, especially Next.js 15+, some request-based values became asynchronous. That means you should treat them like values that need to be waited for before you read from them. So instead of reading params.slug directly, you do this: const { slug } = await params ; That is the heart of the fix. The error is not saying your route is missing. It is not saying your [slug] folder is wrong. It is saying: You are trying to read route data before awaiting it. The common flow: the page loads, the code reads params.slug directly, Next.js expects params to be awaited, and the error appears. Why This Changed Next.js has a group of features called Dynamic APIs . That sounds more complicated than it is. In simple terms, Dynamic APIs are values that depend on the current request. For example: What route did the user open? What query string is in the URL? What cookies came with this request? What headers came with this request? Is draft

I didn't want to write another "what's new in Next.js 16.3" post. Enough of those exist. I wanted to...

En el día a día del desarrollo de software y el análisis de datos, la preparación y limpieza de archivos financieros suele ser una de las tareas más repetitivas y propensas a errores. Tratar con layouts rígidos, filas desfasadas y nombres de columnas que cambian sin previo aviso genera una fricción operativa constante. Para resolver este problema de raíz—y manteniendo un enfoque estricto en la seguridad de la información—desarrollé D-MO (Data Micro-Optimizer) , una potente herramienta web de procesamiento ETL (Extract, Transform, Load) que corre completamente del lado del cliente. El Origen: Privacidad por Diseño Cuando manejamos reportes bancarios o información financiera sensible, subirlos a plataformas externas de conversión representa un riesgo crítico de seguridad. D-MO nació bajo la premisa de la privacidad absoluta: todo el procesamiento ocurre en la memoria local del navegador a través del cliente. Los datos estructurados jamás se envían a un servidor externo, eliminando latencias de red y garantizando un entorno de zero server overhead . Arquitectura del Pipeline (Flujo de Datos) El sistema procesa la información de manera secuencial a través de un flujo desacoplado, lo que permite transformar archivos complejos en datasets listos para producción en un solo clic: [ Archivo Local ] (.csv / .xlsx / .xlsb) │ ▼ ┌──────────────┐ │ DropZone │ ◄── Validación de Extensión y Tamaño └──────┬───────┘ │ (Buffer / Texto plano) ▼ ┌──────────────┐ │ File Parser │ ◄── Detección de delimitadores y headers dinámicos └──────┬───────┘ │ (JSON Normalizado) ▼ ┌──────────────┐ │ ETL Engine │ ◄── Reglas de Negocio, Mapeo de Alias y Filtros CUSTOM └──────┬───────┘ │ (Dataset Limpio) ▼ ┌──────────────┐ │ Export File │ ◄── Generación de reportes limpios listos └──────────────┘ Core Técnico y Capas del Sistema La aplicación está construida sobre Next.js 14 (App Router) y TypeScript , dividiendo su lógica interna en tres componentes principales: 1. Interfaz y Coordinación ( page.tsx )

The story behind AI Clip Cutter — and why we’re building AI editing around one simple idea: the creator should stay in control. Press enter or click to view image in full size There is an uncomfortable truth about short-form content: Most creators don’t have a content problem. They have a time problem. You can spend an hour recording a podcast. Two hours researching. Three hours having a conversation worth sharing. And then discover that turning that one long video into five genuinely good Shorts is going to take another afternoon. Finding the moments. Cutting them. Reframing them. Writing captions. Making sure the captions don’t start halfway through a sentence. Checking whether the clip actually makes sense without the 30 seconds of conversation before it. Then doing it again. And again. And again. That was the problem that led us to build AI Clip Cutter. AI Clip Cutter But there was another question behind it: What if AI didn’t need to replace the editor? What if it could simply do the boring part incredibly well? The idea was simple Take a long-form video. Find the moments worth sharing. Turn them into short vertical clips. Add captions. Let the creator decide what gets published. Sounds obvious. But once we started building it, we realized that “find the best clips” is not actually a simple problem. A 60-minute podcast can contain dozens of technically valid 30-second sections. But most of them aren’t good Shorts. Some start in the middle of an argument. Some need 45 seconds of context. Some contain interesting information but have no hook. Some are emotional but say nothing. And some sound incredible when you’re sitting inside the full conversation — but completely confusing when they’re watched alone. So we needed the AI to understand something more important than: “What was said?” It needed to understand: “Would someone want to watch this?” We don’t ask AI to pick “interesting” moments This was one of our biggest product decisions. Instead of asking the mode

Building FinSaathi: A Voice-First AI Financial Assistant Financial information can be difficult to understand. Banking terms, loans, credit scores, payments, and other financial decisions can quickly become overwhelming when users have to navigate everything through forms and complicated interfaces. So I wanted to explore a simpler interaction: What if financial guidance could start with a conversation? That idea became FinSaathi , a voice-first AI financial assistant. What I Built The first goal was simple: get a real-time voice assistant working end-to-end and deploy it. The current architecture is: Next.js Frontend → LiveKit → Python AI Agent → Voice/AI Services The frontend is deployed on Vercel, while the LiveKit agent is deployed on Railway. Users can open the application, start a conversation, and interact with the FinSaathi agent through voice. The Tech Stack Frontend Next.js React TypeScript LiveKit Components Tailwind CSS Vercel Backend Python LiveKit Agents UV Docker Railway Voice / AI LiveKit Murf AI/LLM services Data SQLite for application memory and call-related data The Part That Took More Time Than Expected Getting the agent to work locally was relatively straightforward. Getting the same system to actually run in production was a different problem. The Railway deployment initially failed with: python: can't open file '//src/agent.py': [Errno 2] No such file or directory The problem turned out to be related to how the application path and startup command were being handled inside the Docker deployment. After fixing the container and Railway startup configuration, the deployment moved further — and exposed another issue. Because the container runs the application as a non-root user, UV initially could not create its cache directory: Permission denied: '/app/.cache/uv' Fixing the permissions allowed the actual LiveKit AgentServer to start successfully. The production logs then showed the agent listening for connections and registering its worker with L

I kept hitting the same small friction: I'd want to quickly rewrite an email, clean up some text, or summarize a long thread — and every tool wanted me to sign up, pick a plan, or watch an ad first. For a ten-second task, that's absurd. So I built the thing I wanted: a set of free, no-signup AI text tools , each doing one job well. This is a quick write-up of the stack and the decisions behind it. 👉 Live: https://www.texttoolsai.app The core idea: one tool, one job, zero friction Instead of a single mega-app, it's a collection of single-purpose tools — rewrite, tone change, summarize, prompt generation — each on its own page. You land, paste, get output. No account, no modal, no paywall. The "no signup" rule forced good constraints: everything has to work instantly and statelessly, which kept the whole thing simple. The stack Next.js (App Router) — server components for the content/SEO pages, client components only where the tool actually needs interactivity. Vercel for hosting — the deploy story is boringly good, which is what you want. An LLM API on the backend — the browser never sees a key; requests go through a Next.js route handler that owns the prompt and the provider call. Tailwind for styling — fast to iterate, easy to keep consistent across dozens of tool pages. One decision that paid off: data-driven pages Every tool is defined as a config object (label, placeholder, system prompt, endpoint) rather than a hand-built page. Adding a new tool is mostly adding data, not wiring up new routing. That's what made it realistic to ship a lot of tools without the codebase turning into spaghetti. // simplified shape { slug: 'rewrite', label: 'Paste your text', endpoint: '/api/tools/rewriter', systemPrompt: '...' } The route handler resolves the endpoint key against a map of system prompts, so the API surface stays tiny even as the tool count grows. What I'd tell anyone building something similar Keep the API key server-side. Obvious, but easy to leak through a miscon