[013] — ai · tool · fullstack

closet.ai

Vista principal del armario
EstadoUso personal
FrontendReact + Vite
BackendSupabase (Postgres + Storage)
AIClaude Sonnet via API
Prendas registradas40
GitHubCódigo · sin .env
intro

¿Por qué construirlo?

Tenía 40 prendas y no sabía cuáles usaba de verdad. Quería saber qué tenía sin usar, qué outfits me funcionaban mejor y qué me faltaba comprar — sin necesidad de abrir el armario. La solución obvia era una app con IA que conociera mi armario tan bien como yo.

ReactViteSupabasePostgreSQLSupabase StorageClaude APIClaude SonnetJavaScript
feature 01 — mi armario

Registro de prendas

Qué hace

Todas tus prendas, con todo el contexto

Cada prenda tiene nombre, categoría, color, material, tienda, precio, fecha de compra, temporada, valoración y notas. Las fotos se suben directamente a Supabase Storage. La app rastrea automáticamente cuántas veces se usa cada prenda y marca las que llevan demasiado tiempo sin tocarse.

Modal editar prenda
feature 02 — informe mensual

Métricas reales de tu armario

Informe mensual

Qué muestra

Top 5 más y menos usadas

El informe mensual muestra prendas totales, usos totales, valoración media y cuántas prendas llevan a cero usos este año. También hace un ranking de las 5 más usadas frente a las 5 menos usadas — con miniaturas de las fotos — y destaca el outfit estrella del mes.

feature 03 — estilista con ia

Recomendaciones personalizadas

Cómo funciona

Claude conoce tu armario completo

La IA recibe como contexto el inventario completo de prendas con sus usos, valoraciones y el historial de feedback (outfits aceptados y rechazados). Con eso genera outfits nuevos agrupados por ocasión, explica por qué encajan con tu estilo y aprende de cada me gusta / no es mi estilo. También hay un chat libre para preguntar cosas como «¿qué me pongo esta semana?» o «¿qué prenda me falta?».

Recomendaciones IA

Arquitectura de la llamada a la API

// Contexto que recibe Claude en cada llamada system_prompt: instrucciones del estilista inventario completo serializado // nombre, categoría, color, usos, rating historial de feedback // outfits aceptados / rechazados user_message: "genera 4 outfits para [ocasión]" response: → JSON con outfits + explicación por outfit // se guarda feedback en Supabase para próximas llamadas
feature 04 — compras inteligentes

Huecos reales en tu armario

Compras inteligentes

Qué detecta

Lo que falta, no lo que apetece

La IA analiza el armario completo y detecta categorías infrarrepresentadas o prendas versátiles que falta tener. Para cada hueco propone dos o tres opciones concretas — con rango de precio, descripción detallada y explicación de por qué combina con lo que ya tienes. Se pueden filtrar por prioridad y marcar como interesante o no.

arquitectura

Cómo está construido

Todo el estado se gestiona con un hook personalizado (useClosetData) que encapsula las operaciones CRUD contra Supabase. Las imágenes se suben al bucket de Supabase Storage — hay una función de migración que convierte las imágenes base64 antiguas a URLs públicas de Storage automáticamente al cargar la app si las detecta.

// Stack completo Frontend → React 18 + Vite State → useClosetData() hook (useState + useCallback) Database → Supabase Postgres Storage → Supabase Storage (bucket: item-images) Auth → // sin auth — uso personal AI → Anthropic API · claude-sonnet-4-20250514 Deploy → // local — no hay demo pública // .env contiene VITE_SUPABASE_URL + VITE_SUPABASE_ANON_KEY + VITE_ANTHROPIC_KEY // el repo de GitHub no incluye el .env

No hay autenticación porque es de uso estrictamente personal — la URL de Supabase y la anon key con las RLS policies configuradas son suficientes para los datos propios. El código es abierto en GitHub pero sin el .env nadie puede conectarse a la base de datos.

galería

Todas las pantallas