Wallbit Junior Frontend Challenge 🚀

[emirchus]

¡Hola, equipo de Wallbit! 👋

Acá dejo mi pr con mi solución al desafío del carrito de compras, con un estilo de retro de terminal que busca resonar con programadores y crear una experiencia inmersiva.

---

🎯 Implementaciónes

• Agregar productos al carrito: Los usuarios pueden ingresar el ID del producto y la cantidad a través de un formulario. El sistema valida los datos, consulta la Fake Store API y agrega el producto al carrito si es válido.

• Manejo de errores: Si se ingresa un ID inválido o hay problemas con la API, se muestra un mensaje de error amigable en la interfaz.

• Visualización de productos: El carrito muestra una tabla con la información clave:

  • Título del producto
  • Precio
  • Cantidad agregada
  • Imagen del producto

✨ Extras Implementados

1. Persistencia del carrito: El estado del carrito se guarda en localStorage para que los datos permanezcan tras recargar la página.

2. Información adicional del carrito:

   • Fecha de creación del carrito: Se muestra en un formato claro y nostálgico al estilo terminal.
   • Estado inicial: Si el carrito está vacío, se presenta un mensaje indicando que no hay productos y alentando a agregar algunos.

3. Estética de terminal:

   • Tipografía y colores: Usé una paleta monocromática verde sobre negro/verde oscuro, imitando los terminales antiguos.
   • Interacciones visuales: Los elementos tienen ligeros efectos al enfocarse para simular un flujo interactivo en línea de comandos.

---

🎁 Bonus Points

• Modo retro temático: La estética retro no solo es visualmente atractiva, sino que también apela al público objetivo: programadores nostálgicos que aman la terminal.

• Mensajes personalizados: Los mensajes tienen un toque de humor y familiaridad, pensando en usuarios que disfruten de pequeños detalles graciosos mientras interactúan.

• Accesibilidad retro: Aunque la estética es retro, la navegación por teclado y el enfoque en elementos están completamente soportados.

---

📂 Cómo Correr el Proyecto

1. Clonar el repositorio:

   git clone https://github.com/emirchus/wallbit-challenge
   cd wallbit-challenge

2. Instalar dependencias:

   pnpm install

3. Iniciar la aplicación:

   pnpm dev

4. Explorar el carrito retro en tu navegador.

---

🌐 Deploy

La aplicación está desplegada y pueden probarla en el siguiente enlace:
Demo Retro en Vercel

---

Espero que disfruten la estética y funcionalidad que trabajé para este desafío. Los espero en el stream uwu

[emirchus]

Estoy 🚀