Retro E-Commerce Challenge

Finalista en desafío frontend de Goncy y Wallbit: carrito con estética Windows 98, combinando funcionalidad moderna y diseño retro.

Carrito e-commerce retro con estética Windows 98 desafío de creación frontend de tienda online
Partner
Cliente Principal
Wallbit
Mi Rol
Full Stack Developer & Designer
Stack Tecnológico
Herramientas Utilizadas
typescript
css
html
astro

El Desafío

Goncy (streamer y dev argentino) junto con Wallbit lanzaron un desafío frontend: crear un carrito de compras dinámico en 4 días.

Los participantes competían por hacer la mejor implementación. Llegué a semifinales, quedando entre los 4 mejores de todos los participantes.

El reto era claro:

  • Carrito funcional con productos predefinidos
  • Agregar/quitar productos
  • Mostrar totales y cantidades
  • Diseño responsive y funcional

Pero yo quería hacer algo diferente.

La Decisión Creativa

Todos iban a hacer carritos modernos con designs típicos de e-commerce. Yo decidí irme por otro lado completamente.

¿Qué tal un carrito con estética Windows 98?

La idea era simple pero potente: funcionalidad moderna envuelta en nostalgia retro. Un carrito que funcionara perfecto pero que te transportara a los ’90s.

No era solo por destacar. Era porque podía ser divertido de usar y memorable.

Más Allá de los Requisitos

El desafío pedía un carrito básico. Yo armé todo un sistema operativo falso.

Features extras que agregué:

  • Catálogo de productos completo con navegación por categorías
  • Buscador funcional para filtrar productos
  • Sistema de ventanas redimensionables como Windows real
  • Barra de tareas operativa con minimizado/maximizado
  • Iconos del escritorio cada uno con funciones sorpresa
  • Sonidos de notificación auténticos de Windows 98
  • Sistema de alertas con ventanas modales retro

No era solo un carrito. Era una experiencia completa.

El Desafío Técnico Real

Lo más jodido no fue el carrito. Fue hacer todo sin frameworks.

Cero librerías. Solo HTML, CSS y TypeScript puro.

Los desafíos técnicos:

  • Sistema de ventanas redimensionables: Manejar drag & drop, resize, z-index, posicionamiento
  • Estado global: Sin React ni Redux, todo con TypeScript vanilla
  • Eventos de UI: Click, drag, keyboard, todo manual
  • Responsive design: Que funcione en mobile manteniendo la estética
  • Persistencia: LocalStorage para mantener estado del carrito

El sistema de ventanas me sacó canas verdes. Calcular posiciones, límites de pantalla, superposición… todo a mano.

Pero al final funcionaba perfecto.

Adaptación Mobile

Adaptar Windows 98 a mobile era otro quilombo. No podés tener ventanas redimensionables en un celular.

La solución: modo escritorio compacto. Mantuve la estética pero con navegación touch-friendly.

Vista mobile del carrito Windows 98 adaptado para dispositivos táctiles
Versión mobile manteniendo la estética retro pero con UX optimizada

Stack Técnico Minimalista

Sin frameworks ni librerías. Todo construido desde cero con tecnologías web fundamentales.

html
css
typescript

Resultados del Challenge

De cientos de participantes, llegué a semifinales entre los 4 mejores.

Lo que logré:

  • Funcionalidad completa: Carrito 100% operativo
  • Experiencia única: Nadie más hizo algo así
  • Código limpio: TypeScript bien estructurado sin frameworks
  • Mobile responsive: Funciona perfecto en todos los dispositivos
  • Reconocimiento: Goncy destacó el proyecto en stream

Lo que aprendí:

  • A veces ir contra la corriente vale la pena
  • Los detalles importan (sonidos, animaciones, easter eggs)
  • Se puede hacer mucho con poco (sin frameworks)
  • La nostalgia es un arma poderosa en UX

El proyecto demostró que creatividad + ejecución técnica pueden destacar más que seguir tendencias.

¿El resultado? Un carrito que la gente recordaba y del que hablaban. Mission accomplished.