PORTAFOLIO — 2026

Jonathan Alvarez

Desarrollo web full-stack — Astro, Next.js y Supabase.

Ver proyectos Hablemos de tu proyecto ↗

Astro · Next.js · Supabase · Cloudflare — 5 proyectos entregados

Desplázate
TIER 3 · NEXT.JS + SUPABASE · EN PRODUCCIÓN Live

HuellaTag

La identidad de tu mascota, siempre con ella

Producto en producción. Autenticación con Supabase Auth (incluye OAuth con Google), tablas con políticas RLS por usuario, y un trigger de base de datos que crea el perfil automáticamente al registrarse.

Panel de cuenta y cartilla de salud

Cada mascota vive bajo el owner_id del usuario autenticado, aplicado por RLS a nivel de fila — el permiso no es un chequeo del cliente, lo hace cumplir la base de datos. La cartilla de salud (vacunas, desparasitación, controles) es una función premium con su propio gate de acceso, y cada registro es editable desde la misma vista.

Generación del carnet en PDF

El botón "Descargar carnet" dispara la generación de un PDF con los datos de la mascota y su historial de vacunas, leídos directo de las tablas protegidas por RLS — un usuario solo puede generar el carnet de las mascotas que le pertenecen. El resultado es un documento de una página, listo para compartir con un veterinario.

TIER 1/2 · ASTRO + SUPABASE · EN PRODUCCIÓN Live

CDNutrition

Tu plan no sale de una tabla, sale de tus datos

Landing + panel interno de coaching, en producción. Sitio en Astro; el panel usa Supabase (base de datos y login) y JavaScript vanilla para captura de datos y generación de PDF.

Panel con login real y dashboard de clientes

El acceso al panel usa Supabase Auth (login real, no una contraseña fija en el código) con RLS activado en ambas tablas — sin sesión iniciada, la base de datos no entrega ni acepta nada. El dashboard lista los clientes en tarjetas con buscador y numeración automática, y cada cliente tiene su propia comparativa de avance (sesión anterior vs. histórico) y gráfica de evolución de peso, grasa y músculo.

Generador de PDF 100% client-side

El plan del cliente se arma en el navegador con jsPDF, con la identidad visual de marca del coach — sin llamada a servidor para generar el documento. El layout completo (tablas, encabezados, paginación automática cuando el contenido no cabe en una hoja) se calcula en JavaScript vanilla al momento de generar el documento.

TIER 1/2 · ASTRO · EN PRODUCCIÓN Live

El Rincón Michoacano

Carnitas estilo Michoacán, cocidas con calma

Sitio de una sola página en producción para un negocio de carnitas en Ixtapaluca, pensado para tráfico móvil que llega de TikTok y WhatsApp. Astro estático sin backend; todo texto, color, dato y enlace vive en brand.json.

Armador de comanda por WhatsApp

El cliente elige tipo de evento, cuántos son y la fecha, y el sitio abre wa.me con el mensaje ya escrito — sin formulario ni backend. Así la cotización llega directo al canal donde el negocio ya atiende.

Horario y estado "abierto ahora" desde un solo dato

La franja, la tabla de horarios, el aviso de "abierto ahora" y el schema.org para SEO local salen de la misma configuración (horario.dias en brand.json), con zona horaria explícita — cambiar un día actualiza todo a la vez.

TIER 1/2 · ASTRO · PROYECTO DE PORTAFOLIO

Materia Negra

Un mismo trazo, tres manos distintas

Sitio estático en Astro, sin backend. Contenido y marca parametrizados vía brand.json — nada hardcodeado en los componentes.

Arquitectura del sitio

Componentes Astro reutilizables (Galería, Artistas, TarjetaPieza) reciben sus datos por props desde brand.json, sin texto ni rutas de imagen hardcodeadas. Build estático, sin JavaScript de cliente salvo donde es estrictamente necesario, optimizado para carga rápida en Cloudflare Pages.

TIER 1/2 · ASTRO · PROYECTO DE PORTAFOLIO

Finca Alta

Café de altura, de origen único

Mismo patrón de arquitectura que Materia Negra: sitio estático en Astro con contenido estructurado en brand.json, reutilizando el sistema de componentes del template Tier 1/2.

Sistema de componentes compartido

Header, Footer, Hero y las secciones de contenido son los mismos componentes base del template Tier 1/2 — lo que cambia entre proyectos es brand.json, no el código. Un mismo sistema, resultados visualmente distintos según los datos de marca de cada cliente.

PARA TU NEGOCIO

¿Qué te construiríamos a ti?

Todavía no tienes un proyecto con nosotros — aquí cinco ejemplos de lo que podríamos construirte, según tu tipo de negocio.

Talleres mecánicos y refaccionarias

“¿Qué le hice a este carro la última vez?”

  • Historial completo por vehículo
  • Registro de cada servicio realizado
  • Próximo mantenimiento sugerido

Salones, spas y barberías

Citas que se olvidan y agenda en papel

  • Sistema de citas en línea
  • Historial de servicio por cliente
  • Recordatorios automáticos

Restaurantes y cafeterías

Menú desactualizado y comandas en papel

  • Menú digital editable al instante
  • Alertas de insumos bajos

Gimnasios y coaches

Membresías vencidas sin que nadie se dé cuenta

  • Control de vencimiento de membresías
  • Check-in de asistencia
  • Plan personalizado por cliente

Tiendas y abarrotes

Inventario que se controla a ojo

  • Panel de inventario con alertas de stock bajo
  • Integración directa con Loyverse si ya lo usan — sin capturar nada dos veces

¿Tu negocio no está en la lista? Platiquemos qué herramienta le conviene.

Cuéntame de tu negocio ↗
CONTACTO

¿Construimos el siguiente?

Escríbeme por WhatsApp ↗

Jonathan Alvarez — WhatsApp +52 56 2652 6998