Caso de estudio Case study
Vivero Takumi · Tienda Online
Full-stack Developer · Kensiweb Full-stack Developer · Kensiweb
E-commerce para un vivero de plantas. Los clientes exploran el catálogo, arman el carrito y confirman el pedido con envío o retiro; el equipo gestiona stock, pedidos y usuarios desde paneles por rol. E-commerce for a plant nursery. Customers browse the catalog, build a cart and confirm orders with delivery or pickup; the team manages stock, orders and users from role-based panels.
01. El desafío The challenge
Vivero Takumi necesitaba vender plantas online además de la atención presencial. El negocio requería una tienda pública con catálogo por categorías, carrito y checkout, y un backoffice donde distintos perfiles —administrador, encargado y empleado— pudieran operar sin pisarse. Los clientes debían poder registrarse, seguir sus pedidos y recibir confirmación por correo, todo con una experiencia visual cuidada que transmitiera la identidad del vivero. Vivero Takumi needed to sell plants online alongside in-person service. The business required a public store with a category-based catalog, cart and checkout, plus a backoffice where different profiles — administrator, manager and employee — could operate without stepping on each other. Customers had to register, track their orders and receive email confirmation, all with a polished visual experience that conveyed the nursery's identity.
02. Proceso creativo Creative process
A. Tienda pública y flujo de compra A. Public store and purchase flow
Construí el storefront con React 19 y Tailwind CSS: home con hero animado, catálogo filtrable por categoría, ficha de cada planta con guía de cuidados, carrito persistente y checkout con envío a domicilio o retiro en el local. El flujo guía al cliente desde la exploración hasta la confirmación del pedido con feedback visual en cada paso. I built the storefront with React 19 and Tailwind CSS: animated hero home, category-filterable catalog, plant detail pages with care guides, persistent cart and checkout with home delivery or local pickup. The flow guides the customer from browsing to order confirmation with visual feedback at every step.
B. Paneles por rol B. Role-based panels
Diseñé tres áreas internas con rutas protegidas: dashboard del admin/encargado con métricas y gráficos de ventas (Recharts), CRUD de plantas y categorías, gestión de pedidos y usuarios; panel de empleado para actualizar stock y procesar pedidos; área de cliente con historial de compras. Cada rol ve solo lo que necesita para operar. I designed three internal areas with protected routes: admin/manager dashboard with sales metrics and charts (Recharts), plant and category CRUD, order and user management; employee panel to update stock and process orders; customer area with purchase history. Each role sees only what they need to operate.
C. Backend híbrido con Supabase C. Hybrid Supabase backend
El catálogo de plantas y categorías vive en Supabase con RLS; la autenticación del super admin también. Los pedidos y usuarios de demo persisten en localStorage para el entorno académico, mientras que Netlify Functions manejan operaciones sensibles: creación de usuarios con service role y envío de correos de confirmación vía Resend, sin exponer claves al navegador. The plant and category catalog lives in Supabase with RLS; super admin authentication too. Demo orders and users persist in localStorage for the academic environment, while Netlify Functions handle sensitive operations: user creation with service role and order confirmation emails via Resend, without exposing keys to the browser.
D. Deploy y formulario de contacto D. Deploy and contact form
Desplegué en Netlify con SPA redirects y funciones serverless. El formulario de contacto usa Netlify Forms con honeypot anti-spam. Configuré SEO completo —Open Graph, JSON-LD de GardenStore y favicons— para que la tienda sea descubrible en búsquedas locales. I deployed on Netlify with SPA redirects and serverless functions. The contact form uses Netlify Forms with honeypot anti-spam. I configured full SEO — Open Graph, GardenStore JSON-LD and favicons — so the store is discoverable in local searches.
03. Resultado final Final outcome
Plataforma operativa en producción en viverotakumi.kensiweb.com. Los clientes compran plantas online con envío o retiro; el equipo administra catálogo, stock y pedidos desde paneles dedicados. El proyecto demuestra un e-commerce completo con roles, backend real en Supabase y deploy serverless, listo para escalar a pagos y persistencia total en base de datos. Platform live in production at viverotakumi.kensiweb.com. Customers buy plants online with delivery or pickup; the team manages catalog, stock and orders from dedicated panels. The project demonstrates a complete e-commerce with roles, real Supabase backend and serverless deploy, ready to scale to payments and full database persistence.
