Skip to content
Back to projects

Gigante de los Azulejos

A tile and marble ecommerce wired into the system the company already ran on.

I built the Gigante de los Azulejos ecommerce: the tile and marble storefront plus the web app the team runs it from. I designed it around an integration with the system the company was already using, so the catalog and its pricing never drift out of date.

My role
Architecture, backend, integrations and deployment
Sector
Retail / Construcción
Scope
Ecommerce + App web
8 months
Project duration
2 systems
Storefront + admin panel
Distance-based
Shipping cost calculation
Stripe + Google Maps
External integrations

Stack

  • Next.js 15
  • Tailwind CSS
  • React (Vite)
  • Node.js
  • Express
  • TypeScript
  • MongoDB
  • Docker
  • Dokploy (CD/CI)
  • MinIO
  • Stripe
  • Google Maps

Screens

Screenshots from the live system.

Ecommerce

Catálogo con filtros, lista de deseos, carrito y pago con tarjeta. Envíos calculados por distancia y buscador de sucursales.

App web

Aplicación web de administración

Conexión con el sistema que ya usaban, y manejo de productos, fotos, promociones, categorías y sucursales.

The problem

The catalog and pricing at Gigante de los Azulejos already lived in the internal system the staff used every day. An online store with its own product database would have meant entering everything twice and going stale within a week. Shipping couldn't be a flat rate either: the cost depends on how far the customer lives from the store, and buyers need to know which branch is closest to them.

What I built

I delivered two systems: the storefront and the admin web app. The integration came first — the panel talks to the system the company already ran on, so products and prices sync on their own and nobody re-enters them. On top of that I built the catalog with search, filters, wishlist, cart and card payments through Stripe, with homepage promotions linking straight to the discounted products. Shipping cost is calculated by distance using Google Maps, which also powers the nearest-branch finder. Everything the internal system didn't cover — photos, promotions, categories, spec sheets and branches — is managed from the panel. Eight months end to end.

Technical decisions

  1. 01

    The existing system as source of truth

    I wired the admin panel into the system the company already ran on, so products and prices sync themselves. The team only manages what that system doesn't cover — no double data entry, no stale catalog.

  2. 02

    Distance-based shipping, nearest branch

    Shipping cost is computed from how far the customer is from the store, and the site surfaces their closest branches. Both run off Google Maps.

  3. 03

    Two frontends, two different problems

    The storefront runs on Next.js 15 because a public catalog needs server rendering and indexable URLs; the admin panel is React on Vite, where none of that buys anything. A single Node, Express and TypeScript backend on MongoDB serves both.

  4. 04

    From search to checkout

    Search, filters, wishlist, cart and Stripe card payments form one continuous buying path. Homepage promotions link straight to the discounted products instead of dropping shoppers into the full catalog.

  5. 05

    Self-hosted media, reproducible deploys

    A tile catalog is a visual product: photos and spec sheets are served from MinIO, self-hosted S3-compatible storage. Everything ships in Docker with CI/CD through Dokploy.

Next project

NONSTOP Fitness Center

The gym is open 24 hours. Now the trainer is too.