Beast Motors — Catálogo de una concesionaria Beast Motors — A car dealership catalog

Contexto Context

Beast Motors es una concesionaria de Paraná que vende autos usados, 0km, motos y vehículos importados. Me contrataron para hacerles el sitio, y la primera decisión fue de alcance: esto no es un e-commerce. Nadie compra un auto con un botón. Es un catálogo digital cuyo único objetivo es que suene el WhatsApp del vendedor. Beast Motors is a dealership in Paraná selling used cars, brand-new cars, motorcycles and imported vehicles. They hired me to build their site, and the first decision was about scope: this is not an e-commerce store. Nobody buys a car with a button. It is a digital catalog whose only goal is to make the salesperson’s WhatsApp ring.

Problema Problem

Dos frentes. El primero, que los encuentren: una concesionaria de barrio compite en Google contra los portales grandes, así que el sitio tiene que estar impecable en datos estructurados y velocidad. El segundo, más silencioso: el inventario tiene precios en dos monedas al mismo tiempo. Un auto en US$ 16.000 y una moto en $ 1.680.000 conviven en la misma grilla, y el cliente espera poder ordenarlos de menor a mayor. Two fronts. First, being found: a neighbourhood dealership competes on Google against the big portals, so the site has to be flawless on structured data and speed. Second, quieter: the inventory carries prices in two currencies at once. A car at US$16,000 and a motorcycle at $1,680,000 sit in the same grid, and the customer expects to sort them low to high.

La trampa de las dos monedas The two-currency trap

Ordenar por precio era, en apariencia, una cláusula de SQL. Con esa consulta, una moto de $1.680.000 salía "más cara" que un auto de US$16.000, porque se comparaban los números crudos. Y los vehículos que solo tenían precio en pesos, con el campo de dólares vacío, saltaban al tope del orden descendente por el manejo de los nulos. La solución no fue tocar la consulta sino sacar el orden de la base: se convierte todo a dólares efectivos y recién ahí se ordena. Lo que más me gustó de la solución es de dónde sale la cotización: no de una API externa que puede caerse, sino del propio inventario — la mediana entre los vehículos que tienen los dos precios cargados. El dato ya estaba ahí. La regla que me quedó: con precios en más de una moneda, nunca ordenar ni filtrar por la columna cruda. Sorting by price looked like a SQL clause. With that query, a motorcycle at $1,680,000 came out "more expensive" than a car at US$16,000, because raw numbers were being compared. And vehicles priced only in pesos, with the dollar field empty, jumped to the top of a descending sort through null handling. The fix was not to patch the query but to take sorting out of the database: everything is converted to effective dollars first, and only then sorted. My favourite part is where the exchange rate comes from: not an external API that can go down, but the inventory itself — the median across vehicles that have both prices loaded. The data was already there. The rule I kept: with prices in more than one currency, never sort or filter on the raw column.

Solución y decisiones técnicas Solution and technical decisions

• → Next.js con renderizado en el servidor e ISR para las páginas públicas: el contenido llega ya armado al crawler, y el catálogo se revalida solo.
• → SEO como abstracción, no como parche. Mi primer plan editaba página por página para agregar canonical, Twitter cards y datos estructurados. Facu lo frenó con un "¿no hay una forma mejor?" y tenía razón: salió un helper único de metadata y un componente de JSON-LD que consumen todas las páginas. Menos código, y es imposible olvidarse un campo en una página futura.
• → Datos estructurados de Vehicle por unidad y de LocalBusiness en la portada, más sitemap automático.
• → WhatsApp como único canal de conversión: cada ficha arma el mensaje con modelo, precio y link de la página. Cero formularios de contacto, por pedido del cliente y porque nadie los completa.
• → Imágenes en Cloudinary con formato automático, para que negocie AVIF o WebP según el navegador en vez de hardcodear uno.
• → Sin funciones atadas al proveedor de hosting: el proyecto tiene planeada una mudanza a un VPS propio, así que todo corre en Node estándar. Es una restricción que me impuse desde el día uno para que la mudanza no sea una reescritura.
• → Panel de administración para una sola persona no técnica, pensado para usarse desde el celular.

• → Next.js with server rendering and ISR for public pages: content reaches the crawler fully built, and the catalog revalidates on its own.
• → SEO as an abstraction, not a patch. My first plan edited page by page to add canonicals, Twitter cards and structured data. Facu stopped it with "isn’t there a better way?" and he was right: it became a single metadata helper and a JSON-LD component that every page consumes. Less code, and forgetting a field on a future page becomes impossible.
• → Vehicle structured data per unit and LocalBusiness on the homepage, plus an automatic sitemap.
• → WhatsApp as the only conversion channel: every listing builds the message with model, price and page link. No contact forms, by client request and because nobody fills them in.
• → Images on Cloudinary with automatic format, so it negotiates AVIF or WebP per browser instead of hardcoding one.
• → No features tied to the hosting provider: the project has a planned move to its own VPS, so everything runs on standard Node. A constraint I set on day one so the move is not a rewrite.
• → An admin panel for a single non-technical person, designed to be used from a phone.

Otras dos que me costaron Two more that cost me

• → Las imágenes se servían a 750 px para mostrarse a 380. Marcarlas como prioritarias no alcanzó: en render dinámico el framework no siempre emite el preload, y hubo que ponerlo a mano en el servidor. Aprendizaje lateral: medir performance en modo desarrollo no sirve, el JavaScript sin minificar infla los números.
• → El login del admin devolvía credenciales inválidas con la contraseña correcta. La causa no estaba en el código: el usuario se había creado antes de desactivar la confirmación por email, y quedó sin confirmar. Cambiar la configuración de autenticación no actualiza a los usuarios que ya existen.

• → Images were served at 750px to be displayed at 380. Marking them as priority was not enough: under dynamic rendering the framework does not always emit the preload, so it had to be added by hand on the server. Side lesson: measuring performance in development mode is useless, unminified JavaScript inflates the numbers.
• → The admin login returned invalid credentials with the correct password. The cause was not in the code: the user had been created before email confirmation was disabled, and stayed unconfirmed. Changing auth settings does not retroactively update existing users.

Mi rol My role

Freelance, de punta a punta: relevamiento con el dueño, diseño, desarrollo, panel de administración, SEO, deploy y el dominio propio. También el soporte posterior, que es donde salieron la mitad de los problemas de arriba. Freelance, end to end: discovery with the owner, design, development, admin panel, SEO, deployment and the custom domain. Also the ongoing support, which is where half the problems above came from.

Resultado Result

En producción, con dominio propio y 28 vehículos publicados. El catálogo filtra por tipo y marca, ordena bien en las dos monedas, y cada unidad tiene su ficha con financiación y su botón de WhatsApp. Live in production, on its own domain, with 28 vehicles published. The catalog filters by type and brand, sorts correctly across both currencies, and every unit has its detail page with financing and its WhatsApp button.

En pantalla On screen

En movimiento Animated