Cart matias -

.env.example

@@ -0,0 +1,3 @@
+# For BuildInfo (Vercel deploy info)
+VITE_COMMIT_SHA=\$VERCEL_GIT_COMMIT_SHA
+VITE_BUILD_DATE=\$(date -u +'%Y-%m-%dT%H:%M:%SZ')

.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env

.npmrc

@@ -0,0 +1,2 @@
+packageManager=pnpm@ ERROR  This project is configured to use yarn
+For help, run: pnpm help

README.md

@@ -1,65 +1,104 @@
-[![Wallbit](./assets/logo.jpg)](https://wallbit.io/)
+# Wallbit Junior Frontend Challenge
+
+Este proyecto es un desafío de frontend para crear un carrito de compras utilizando React. A continuación, se detallan los pasos para instalar y ejecutar el proyecto.
 
 > El banco digital para trabajadores remotos.
 
-# Wallbit Junior Frontend Challenge
+## Requisitos Previos
 
-Para este desafío, nuestro cliente nos encargó hacer un carrito de compras para programadores. Tiene un formulario con 2 campos: ID del producto y cantidad. Los programadores habitualmente no necesitan saber ni ver que productos comprar, sino que saben por conexiones astrales cual es el ID del producto que quieren y así los agregan a su carrito.
+Asegúrate de tener instalado Node.js y npm en tu máquina. 
 
-Cada vez que se agrega un producto, vamos a obtener el producto desde la API y lo vamos a mostrar en una tabla, junto a la cantidad que el usuario eligió.
+## Tecnologías utilizadas
 
-> Solo lo mostramos visualmente por si hay alguien que no sea programador mirando la pantalla.
+- React
+- Typescript
+- TailwindCSS
+- Shadcn/UI
 
-La aplicación se vería así:
+## Deploy de prueba
 
-![Sin productos](./assets/app-0.jpg)
-> Inicialmente no hay productos en el carrito
+https://wallbit-challenge-mati.vercel.app/
 
-![Con productos](./assets/app-1.jpg)
-> Con productos en el carrito
+## Instalación
+
+1. Clona el repositorio:
+
+```bash
+git clone https://github.com/matiasbaldanza/wallbit-challenge.git
+```
+
+2. Instala las dependencias:
+
+```bash
+cd wallbit-challenge
+npm install
+```
+
+3. Inicia el proyecto:
+
+```bash
+npm run dev
+```
+
+o:
+
+```bash
+vite dev
+```
 
 ## Requisitos
 
 La API que nos dió nuestro cliente es: [Fake Store API](https://fakestoreapi.com/). El cliente nos dijo que su stack de frontend es React, que prefiere el challenge hecho con eso, pero está abierto a cualquier stack que quieras usar.
 
-- [ ] Podemos agregar productos al carrito.
-- [ ] Manejar errores que nos devuelva la API.
-- [ ] Mostrar una lista con los productos agregados incluyendo `title`, `price` e `image` del producto y la `cantidad` que el usuario agregó.
+- [X] Podemos agregar productos al carrito.
+- [X] Manejar errores que nos devuelva la API.
+- [X] Mostrar una lista con los productos agregados incluyendo `title`, `price` e `image` del producto y la `cantidad` que el usuario agregó.
 
 ## Extras
 
-- [ ] El carrito se persiste al recargar la página.
-- [ ] Mostrar el total de productos agregados.
-- [ ] Mostrar el costo total del carrito.
-- [ ] Mostrar la fecha de creación del carrito.
+- [X] El carrito se persiste al recargar la página.
+- [X] Mostrar el total de productos agregados.
+- [X] Mostrar el costo total del carrito.
+- [X] Mostrar la fecha de creación del carrito.
 
-## Bonus
+## Detalles de implementación
 
-Para destacar, podés agregar cualquier cosa que se te ocurra que llame la atención. No tiene por qué ser necesariamente en el código, o una dependencia. Puede ser algo visual, un easter egg, una funcionalidad, o bueno, algo en el código.
+- [X] Implementación de una API wrapper para facilitar las llamadas a la API (con solo una acción - getProductById)
+- [X] Implementación de un cart context para facilitar el manejo del estado
+- [X] Implementación de un cart reducer para facilitar extensiones futuras
 
-> [!NOTE]
-> Siempre recordá que lo que agregues debe sumar a la experiencia del usuario y no complicar su navegación. Tenés que pensar que quien va a usar la aplicación no va a haber hablado con vos previamente y aun así debería poder usar la aplicación y obtener la mejor experiencia posible.
+## Bonus
 
-## Entregables
+- [X] Input personalizado para gestionar cantidad de productos ya agregados
+- [X] Formato personalido de precios
+- [X] Botón para vaciar el carrito
 
-- [ ] Crear un Pull Request a este repositorio con tu solución.
-- [ ] Reemplazar el `README.md` con instrucciones para correr el proyecto e información relevante para la evaluación.
-- [ ] Incluir el link al deploy de tu aplicación.
+## Pendientes/TODOs
 
-## Premio
+- [ ] Deploy (falla el build en Vercel, posiblemente por versión de Node)
+- [ ] Tests (no llegué)
+- [ ] Unificar validaciones/mensajes de error con Zod (ahora valida con Zod en el fetch, pero no gestiona los mensajes de error, que están en un try/catch, el carrito no tiene schema ni validación completa)
+- [ ] Implementar notificaciones de errores al usuario (ahora hay mensaje genérico con dos posible valores, y se mantiene la validación nativa del browser en los inputs)
+- [ ] Ver layout shifts / lazy loading
+- [ ] Toasts para notificaciones al usuario
+- [ ] Mejorar estilos
+- [ ] Animaciones
+- [ ] Responsive
+- [ ] Mostrar errores usando un ErrorBoundary
+- [ ] Bug de persistencia carrito (el carrito se preserva en múltiples refresh de la página, pero si se hacen multiples refresh de la página rápidos, se pierde el carrito)
 
-Se va a entregar un premio en vivo durante [mi stream](https://twitch.tv/goncypozzo) el 19 de Noviembre de 2024 a las 19:00hs Argentina (GMT -3) entre todos los que completen el desafío. El premio va a ser un micrófono Razer Seiren Mini.
+## Instrucciones y requisitos originales
 
-El ganador va a ser elegido por el chat, la gente de Wallbit y yo.
+Para este desafío, nuestro cliente nos encargó hacer un carrito de compras para programadores. Tiene un formulario con 2 campos: ID del producto y cantidad. Los programadores habitualmente no necesitan saber ni ver que productos comprar, sino que saben por conexiones astrales cual es el ID del producto que quieren y así los agregan a su carrito.
 
-> [!IMPORTANT]
-> El ganador debe estar presente en el stream para recibir el premio.
+Cada vez que se agrega un producto, vamos a obtener el producto desde la API y lo vamos a mostrar en una tabla, junto a la cantidad que el usuario eligió.
 
-![Razer Seiren Mini](./assets/sorteo.jpg)
+> Solo lo mostramos visualmente por si hay alguien que no sea programador mirando la pantalla.
 
-> En caso de no poder enviarse el premio, se pagará el equivalente de 70 USD.
+La aplicación se vería así:
 
-El deadline para enviar el PR es el 19 de Noviembre de 2024 a las 15:00hs Argentina (GMT -3).
+![Sin productos](./assets/app-0.jpg)
+> Inicialmente no hay productos en el carrito
 
-> [!IMPORTANT]
-> Los PRs se cerrarán luego de esa hora así que no te olvides de hacerlo antes.
+![Con productos](./assets/app-1.jpg)
+> Con productos en el carrito

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>