MarketplaceComercio y tiendas online

App de e-commerce

Una tienda online para un catálogo pequeño y bien elegido. Los clientes navegan por categorías, ven lo que de verdad hay en stock, hacen el pedido con sus datos de entrega y siguen cada pedido desde su cuenta. La tienda se lleva desde una sola página de administración: pedidos y su estado, productos y stock, envíos y ajustes. La interfaz está en inglés y rumano; los productos se introducen una sola vez, en el idioma de la tienda.

Conseguir esta app
  • Incluida en los planes Starter y Pro
  • Una copia exacta de toda la aplicación
  • Frontend, backend y datos incluidos
  • Tuya para quedártela y cambiarla en tu propio repositorio
  • Multiidioma, para el país que necesites
Portada de la página de inicio con un collage de productos destacados
Portada de la página de inicio
páginas de la tienda
8
pestañas de administración
4
workflows de backend
7
tablas de datos
6
estados de pedido
6
Pensada para
  • Tiendas independientes con un catálogo corto y cuidado
  • Artesanos y marcas que venden sus propios productos
  • Tiendas que cobran por transferencia, enlace de pago o contra reembolso
  • Agencias que montan una tienda online sencilla para un cliente
Todas las pantallas

Míralo como lo ven los clientes y la tienda

Un escaparate que invita a entrar

  • Portada editorial con un collage de productos destacados y los datos clave de la tienda
  • Barra de avisos y umbral de envío gratis, ambos configurados en la administración
  • Categorías en mosaico, con fotos y número de productos
  • Favoritos, un banner de marca y Novedades, sacados del catálogo
Portada de la página de inicio con un collage de productos destacados

1 / 5Portada de la página de inicio con un collage de productos destacados

Cómo avanza un pedido

Cada pedido, calculado y comprobado por el servidor

Los clientes solo pueden pedir lo que hay en stock, y la tienda hace avanzar cada pedido, de nuevo a entregado.

  1. Nuevo
  2. Pagado
  3. Embalado
  4. Enviado
  5. Entregado
Pago con los datos de entrega y el resumen del pedido
Qué recibes

Toda la aplicación, tal cual

Tienda

  • Inicio
  • Tienda y categorías
  • Producto
  • Carrito
  • Pago
  • Confirmación del pedido
  • Cuenta, iniciar sesión y crear cuenta
  • Mis pedidos

Administración

  • Resumen
  • Pedidos
  • Productos
  • Ajustes

Backend

  • 7 workflows para el catálogo, el inicio de sesión, los pedidos y la administración
  • 6 tablas: usuarios, categorías, productos, pedidos, líneas de pedido, ajustes
  • 9 productos de ejemplo en 4 categorías

Tecnología

  • React 18, Tailwind CSS, componentes al estilo shadcn, iconos Lucide
  • Contraseñas guardadas como hashes; el inicio de sesión usa tokens firmados que duran 7 días
  • Los datos y cambios de administración exigen una cuenta de administración, comprobada en el servidor
  • Precios, totales, envío y stock calculados en el servidor para cada pedido
  • Interfaz en inglés y rumano, con fechas, números y precios en el formato de cada idioma
En la administración

Cámbialo sin tocar código

  • Nombre de la tienda, barra de avisos, moneda, gastos de envío, umbral de envío gratis y datos de contacto
  • Cada producto: nombre, categoría, precio, precio anterior, stock, dirección de la foto, textos, visibilidad y destacado
  • El estado de cada pedido
En el código

Un retoque rápido para hacerla tuya

  • El titular y la introducción de la página de inicio
  • La franja de compromisos y el banner de marca
  • La frase del pie de página
  • Los colores y las tipografías
  • El título de la web
  • Cualquier texto de la interfaz, en los archivos de idioma de inglés y rumano
Puesta en marcha

Seis pasos hasta tu propia tienda

Vas a necesitar

  • Una cuenta de Ubex, donde se ejecutan los workflows y las tablas de la app
  • Tus propias fotos de producto, publicadas en una dirección web
  1. Añade tu propio JWT_SECRET.
  2. Pon la dirección de la app en los orígenes permitidos de los workflows.
  3. Borra de las tablas los usuarios, pedidos y líneas de pedido de demostración.
  4. Publica la app en un subdominio o un dominio propio.
  5. Crea la primera cuenta. Será la de administración.
  6. Introduce los datos de la tienda en Ajustes, sustituye los productos de ejemplo y cambia las categorías en la tabla Categories.
Conviene saberlo

Lo que no hace

Mejor saberlo ahora que después. Cualquiera de estas cosas puedes añadirla tú: el código es tuyo para cambiarlo.

  • Sin pago onlineNo hay pago con tarjeta ni con monedero digital. La tienda acuerda el pago con el cliente y marca el pedido como Pagado.
  • Sin correosNi confirmaciones de pedido, ni avisos de envío, ni recibos por correo. Los clientes siguen sus pedidos en Mis pedidos.
  • Sin restablecer la contraseñaQuien olvide su contraseña tiene que ponerse en contacto con la tienda.
  • Sin compra como invitadoPara hacer un pedido hace falta una cuenta.
  • Sin códigos de descuentoUn producto puede mostrar un precio anterior, pero no hay códigos ni cupones.
  • Sin variantesNi tallas, ni colores, ni opciones: cada producto es un artículo con un precio.
  • Sin subida de fotosLas fotos de producto se indican con una dirección web.
  • Cancelar no repone el stockAl cancelar un pedido, sus artículos no vuelven al stock.
  • Una monedaUna moneda por tienda.
  • Sin reseñasNi reseñas ni valoraciones de productos.
  • Sin pantalla de categoríasLas categorías se cambian en la tabla Categories o a través de la API, no en la administración.
  • Una tarifa de envío fijaMás envío gratis a partir de un importe. Sin zonas de envío, sin integración con transportistas y sin números de seguimiento.
  • Sin facturas, impuestos ni devolucionesNi facturas, ni cálculo de impuestos, ni reembolsos, ni gestión de devoluciones.
  • Contenido en un solo idiomaLa interfaz cambia entre inglés y rumano, pero los productos, las categorías y la barra de avisos se introducen una vez, en el idioma de la tienda, y no se traducen.

Todo lo que aparece en estas pantallas es inventado: Northwind Store, su correo y su teléfono, sus clientes y sus direcciones, los pedidos y las cifras de ingresos. Las fotos de producto son provisionales y proceden de Unsplash. No forman parte de la app, así que sustitúyelas por las tuyas.

Abre tu tienda en internet

Consigue una copia exacta, ponle tu nombre y hazla tuya.