Planillar (planillar.com)
Antes "StackFree" (stackfree.vercel.app, que hoy redirige a planillar.com). Plataforma de herramientas web gratuitas con procesamiento 100% en el navegador: los archivos del usuario nunca se suben a un servidor. Se monetiza con Google AdSense y se aloja gratis en Vercel.
La sección principal es Administración: el usuario sube el Excel de movimientos de su banco (Santander, BBVA, Comafi) o el resumen de cuenta en PDF (BBVA, Comafi), el reporte de cobros de Mercado Pago o el reporte de pedidos de PedidosYa (varios locales) y recibe, en su propio navegador, el análisis por concepto, categoría, local, día, producto y medio de pago, con controles, en un Excel con fórmulas. También puede cruzar las liquidaciones diarias de Fiserv con el extracto del banco (conciliación: qué se acreditó, qué falta y cuánto queda de cada venta con tarjeta) y controlar la liquidación de PedidosYa subiendo juntos el estado de cuenta semanal y el reporte de pedidos (cuánto deposita PedidosYa y por qué). Los scripts Python que dieron origen a esos analizadores están en python/. La privacidad es verificable: ver /verificar-privacidad y la Content-Security-Policy en lib/csp.ts.
Stack
- Next.js 16 (App Router) + TypeScript
- Tailwind CSS 4 + shadcn/ui
- Íconos: Lucide
- PDF: pdf-lib (crear/editar) y pdf.js (dibujar páginas)
- Planillas: SheetJS (leer xls/xlsx/xml/html/csv) y ExcelJS (escribir Excel con fórmulas y estilos)
- HEIC: heic-to (libheif en WebAssembly)
- Analytics: Vercel Analytics (sin cookies)
- Hosting: Vercel (deploy automático desde GitHub)
Cómo correrlo en tu máquina
Necesitás Node.js 20.9 o superior.
npm install
npm run dev
Abrí http://localhost:3000.
Otros comandos:
| Comando | Qué hace |
|---|
npm run build | Genera la versión de producción (lo que corre Vercel) |
npm run start | Sirve la versión de producción generada |
npm run lint | Revisa errores de código |
Estructura del proyecto
app/
layout.tsx Header + footer + metadata global + analytics + script AdSense
page.tsx Homepage: grilla de herramientas (lee el registry)
herramientas/[slug]/ Página de cada herramienta (SEO, FAQ, anuncios, carga del módulo)
legal/ Privacidad, términos y cookies (contenido editable)
sitemap.ts · robots.ts Se generan solos desde el registry
opengraph-image.tsx Imagen para compartir en redes (también por herramienta)
components/
core/ Piezas compartidas por TODAS las herramientas
FileDropzone.tsx Arrastrar/soltar archivos con validación
ProcessingCard.tsx Estados idle / procesando / listo / error
DownloadButton.tsx Descarga de resultados generados en el navegador
AdSlot.tsx Espacio publicitario (placeholder hasta tener AdSense)
ToolLoader.tsx Carga cada herramienta en su propio paquete JS
ToolCard.tsx · JsonLd.tsx
layout/ Header y Footer
tools/<herramienta>/ Una carpeta por herramienta: <Nombre>Tool.tsx + logic.ts
ui/ Componentes de shadcn/ui
lib/
extractos/ Analizadores de administración: base común + un archivo por banco
csp.ts Content-Security-Policy (la garantía verificable de privacidad)
tools-registry.ts ★ ÚNICA lista de herramientas (metadata + SEO + FAQ)
site-config.ts Nombre del sitio, dominio, email de contacto
ads-config.ts IDs de AdSense (se leen de variables de entorno)
Agregar una herramienta nueva
- Creá
components/tools/<nombre>/ con <Nombre>Tool.tsx (interfaz, "use client") y logic.ts (procesamiento puro, sin React).
- Agregá una entrada al array
herramientas en lib/tools-registry.ts (slug, textos SEO, pasos, FAQ y el cargar: () => import(...)).
Nada más. Homepage, página, sitemap, footer y SEO se actualizan solos.
Mientras la herramienta no esté lista, dejá estado: "proximamente": se muestra con etiqueta, pero no se indexa ni entra al sitemap. Cuando funcione, cambiá a "activa".
Herramienta: Quitar fondo de imagen
- Librería:
@imgly/background-removal (modelo ISNet sobre WebAssembly, corre en el navegador).
- El modelo (~40 MB en celulares, ~80 MB en PC) se descarga desde el CDN de IMG.LY la primera vez y queda en la caché del navegador. La foto del usuario nunca se sube.
- Alternativa futura: alojar el modelo en
public/ o en un bucket propio (ver "Custom Asset Serving" en la doc de la librería). Ojo con el ancho de banda: en el plan gratuito de Vercel son 100 GB/mes.
- Toda la lógica está en
components/tools/quitar-fondo/logic.ts; la interfaz no sabe qué librería se usa, así que cambiarla es tocar un solo archivo.
Licencia
Este proyecto se publica bajo GNU AGPL v3 (ver LICENSE). Motivo: la herramienta de quitar fondo usa @imgly/background-removal, que es AGPL, y esa licencia exige que el sitio completo sea software libre y que los usuarios puedan obtener el código (por eso el footer enlaza a este repositorio).
Si en el futuro se quisiera cerrar el código, alcanza con reemplazar esa librería en components/tools/quitar-fondo/logic.ts por una con licencia permisiva (por ejemplo onnxruntime-web + un modelo Apache/MIT).
Créditos: modelo ISNet vía IMG.LY · componentes shadcn/ui (MIT) · íconos Lucide (ISC).
Variables de entorno
Ver .env.example. Ninguna es obligatoria. Las de AdSense se completan cuando Google apruebe la cuenta; NEXT_PUBLIC_WEB3FORMS_KEY activa el formulario de contacto (sin ella, el botón abre el correo del visitante).
Deploy en Vercel
- Subí el repositorio a GitHub.
- En vercel.com → Add New Project → importá el repo. Vercel detecta Next.js solo; no hay que configurar nada.
- Cada
git push a main genera un deploy nuevo automáticamente.
- (Opcional) En el proyecto de Vercel → Settings → Domains agregá tu dominio, y en Environment Variables definí
NEXT_PUBLIC_SITE_URL=https://tu-dominio.com.
AdSense: checklist para la aprobación
