OKroot | Come sano, vive libre

Frontend en React y TypeScript estricto, con Vite, Tailwind CSS, React Router y rutas por feature cargadas bajo demanda. Zustand guarda la sesión, TanStack Query maneja los datos del servidor, y react-hook-form con zod valida los formularios. Una capa de fetch propia, sin Axios.

Backend en Django y Django REST Framework sobre PostgreSQL, organizado por dominios (usuarios, scanner, diario, recetas, insights, mercado, pagos y sync). La lógica vive en services y las vistas solo orquestan. Todas las respuestas usan el mismo envoltorio de datos y de error.

Scanner en el servidor: el cliente y el servidor validan la imagen (tipo, tamaño y resolución mínima). El servidor llama a Claude con un prompt que conoce las condiciones del usuario y sus ingredientes a evitar, y parsea una respuesta por líneas a un veredicto, riesgo de trazas, ingredientes problemáticos y macros.

La imagen no se guarda: va al modelo y se descarta. Si la etiqueta es ilegible, el servidor reemplaza el texto del modelo por una indicación concreta (borrosa, poca luz, reflejo, texto cortado, sin lista de ingredientes) en lugar de adivinar.

Perfil de salud como estado persistente: tres condiciones combinables, objetivo, datos físicos con cálculo de gasto calórico (Mifflin-St Jeor) e ingredientes a evitar. Un ingrediente marcado por el usuario fuerza el veredicto de rechazo en código, sin depender de que el modelo lo recuerde.

Diario con comidas y macros, resumen semanal y bitácora de salud (energía, piel y glucosa). Insights con alertas, racha, vaso de agua y una estimación glucémica simple para diabéticos. Mercado semanal armado desde las recetas favoritas y lo registrado en el diario.

Offline: el service worker (Workbox) precachea la app y las consultas a la API usan primero la red con respaldo en caché. Los escaneos, las comidas y los cambios de la lista de compras sin conexión quedan en una cola de IndexedDB (Dexie) y se envían por lotes cuando vuelve la red.

Sync con idempotencia: cada operación lleva una clave UUID generada en el cliente y el servidor devuelve la entidad existente si la reconoce, así un reintento nunca duplica. El lote se envía en orden, con reintentos espaciados y el servidor como fuente de verdad.

Cuota de escaneos reservada de forma atómica en la base antes de llamar al modelo y devuelta si la llamada falla, para que peticiones simultáneas no superen el tope. Suscripciones con checkout alojado de Stripe y MercadoPago y webhooks con firma verificada e idempotentes.

Seguridad: autenticación con tokens de corta duración y rotación, inicio de sesión con Google verificado en el servidor, protección contra intentos repetidos y cabeceras de seguridad.

Calidad y entrega: linter, comprobación de migraciones, más de 500 pruebas de backend y más de 250 de frontend, y escaneo de secretos y de vulnerabilidades en cada entrega. Despliegue reproducible.

El diseño parte de un prototipo navegable, accesible desde el botón Ver diseño.

Sistema de diseño propio, versión 2.0, con tokens en un solo archivo CSS. Violeta como color primario sobre neutros cálidos y colores propios para los veredictos apto, cuidado y no apto.

Bricolage Grotesque para titulares y Plus Jakarta Sans para texto, ambas autoalojadas. Íconos de Lucide con trazo uniforme.

El veredicto no depende solo del color: lleva una marca (visto, exclamación o equis) y una palabra grande, y se anuncia a lectores de pantalla con regiones en vivo.

Pensada para el teléfono: la interfaz vive dentro de un marco móvil con barra de navegación inferior de cuatro pestañas más una quinta de plan o de mercado.

Animación reducida a nada cuando el usuario lo pide, objetivos táctiles de 44 px en varios controles y anillos de foco visibles.

Todo el texto está en español de Colombia y en tuteo. Hoy la interfaz es solo clara, sin modo oscuro.

Astro con salida estática y Tailwind CSS con la configuración en CSS. Sin adaptador ni framework de interfaz: el JavaScript es vanilla, un script por componente. Los íconos de Lucide se incrustan al compilar como SVG, sin JavaScript en el navegador.

Una página de aterrizaje de nueve secciones en orden fijo: Hero, Dolor, Cómo funciona, Comparación, Funciones, Casos de éxito, Precios, Lista de espera y Preguntas. Además hay páginas de Sobre mí, Contacto y Preguntas, y las cuatro legales (privacidad, términos, habeas data y cookies).

Recetario como colección de contenido: cada receta es un archivo Markdown validado en el build con un esquema de zod. Una receta que no lo cumple rompe la compilación y no llega a producción. El índice y una página por receta se generan en estático, con JSON-LD de receta y migas de pan.

Los datos de la sección de precios y el cupo de acceso anticipado viven en un solo archivo de constantes, y el contador de cupos admite solo un número real: con cero, la línea de escasez desaparece.

Lista de espera con nombre, correo y casilla de consentimiento obligatoria. Envía JSON a una función de servidor que valida y normaliza, y guarda en una tabla compartida de Supabase. El navegador nunca habla con Supabase.

La función guarda únicamente nombre, correo, producto, fecha de consentimiento y la ruta de la página. No recibe ni guarda datos de salud ni la IP, y descarta cualquier campo extra. Un correo repetido responde 'ya estás dentro' sin crear otra fila, y solo guarda en producción: en preview valida y avisa que el almacenamiento está desactivado.

Analítica: GA4 con consentimiento. No se carga nunca por defecto; un banner de cookies guarda la preferencia y, solo si el visitante acepta, activa la analítica. Un page_view manual cubre la navegación con transiciones.

Navegación con View Transitions como mejora progresiva: cada ruta sigue siendo un HTML real, y los scripts se vuelven a ejecutar en cada carga de página.

SEO técnico: title, description, canonical, Open Graph y Twitter, mapa del sitio automático y JSON-LD con Organization, WebSite, SoftwareApplication y FAQPage. Las preguntas frecuentes alimentan el acordeón y el esquema desde la misma fuente.

Seguridad: cabeceras estrictas (CSP, HSTS, anti-framing y permisos restringidos) y caché inmutable en los archivos con hash.

Calidad: la verificación es astro check (TypeScript y plantillas) más el build, que valida además el esquema de las recetas. CI corre ambos en cada pull request, con un audit de dependencias que informa pero no bloquea. No hay pruebas automatizadas de interfaz.

El diseño parte de un prototipo navegable, accesible desde el botón Ver diseño.

Violeta como color primario sobre fondos crema, en la misma familia visual que la app, con un hero en tarjeta de gradiente suave.

Fuentes autoalojadas y servidas desde el propio sitio, sin pedir nada a terceros.

Secciones con un eyebrow editorial, animaciones de aparición con IntersectionObserver y CSS puro, sin una librería de animación.

Iconografía en SVG incrustado: nunca flechas de texto en los botones ni rayas largas en el copy.

Un scanner animado en el hero que muestra el escaneo y el veredicto sin cargar el producto real.

Todo el contenido está en español y las rutas también (preguntas, contacto, sobre-mi, recetas).

Astro con salida estática, sin React ni adaptador, desplegado en Vercel. El JavaScript es TypeScript vanilla: búsqueda, estado del menú lateral y tabla de contenido.

Contenido en MDX con colecciones de contenido de Astro: una página por archivo, con título, resumen e ícono tipados por el esquema de la colección.

Una sola fuente de verdad para la navegación: la lista de grupos y páginas define el menú lateral, la hoja de navegación móvil, la portada y el paginador anterior y siguiente, en orden de lectura, con una prueba que la contrasta con los archivos.

Bloques de redacción propios, disponibles en cada página sin importarlos: avisos, pasos numerados, campos, capturas, tarjetas, insignias y tablas.

Diseño atómico con alias de importación por capa (átomos, moléculas, organismos, plantillas y layouts), con los componentes del sistema de diseño del producto recreados en Astro.

Búsqueda del lado del cliente: el índice se genera en el build como un archivo JSON estático y el navegador lo consulta, sin servidor ni servicios de terceros.

SEO técnico: sitemap generado, robots.txt, manifest e idioma declarado en el documento.

Seguridad por cabeceras, con una CSP restrictiva sin orígenes de terceros y cabeceras anti-framing, anti-sniffing, de referrer y de permisos.

Calidad: ESLint, Prettier y verificación de tipos con astro check, pruebas unitarias con Vitest y pruebas de punta a punta con Playwright, con CI en cada PR.

Los tokens de diseño provienen del sistema de diseño del producto y no se redefinen en el sitio.

Íconos Lucide con un trazo uniforme, a través de un único componente.

Barra lateral en escritorio; en móvil, barra superior con una hoja inferior para navegar.