Wallbit Junior Frontend Challenge 🚀

.gitignore

@@ -0,0 +1,24 @@
+# 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?

.prettierignore

@@ -0,0 +1,16 @@
+/node_modules
+/.pnp
+.pnp.js
+
+/coverage
+
+/out/
+
+/build
+
+.DS_Store
+*.pem
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ],
+  "printWidth": 120,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

README.md

@@ -1,65 +1,86 @@
-[![Wallbit](./assets/logo.jpg)](https://wallbit.io/)
+<h1 align="center">Wallbit Junior Frontend Challenge</h1>
 
-> El banco digital para trabajadores remotos.
+### 🏠 [Preview](https://el-topo.emirchus.ar/)
 
-# Wallbit Junior Frontend Challenge
+## 📝 Tabla de contenidos
 
-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.
+- [🧐 Acerca del proyecto](#-acerca-del-proyecto)
+- [🚀 Comenzando](#-comenzando)
+  - [📋 Prerequisitos](#-prerequisitos)
+  - [📦 Instalación](#-instalación)
+- [🚀 Deployment](#-deployment)
+- [🌟 Dependencias](#-dependencias)
+## 🧐 Acerca del proyecto
 
-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ó.
+> Proyecto de frontend para el desafío de Wallbit Junior Frontend Challenge. El proyecto consiste en un carrito de compras con las siguientes funcionalidades:
+- Añadir productos al carrito.
+- Eliminar productos del carrito.
+- Modificar la cantidad de productos en el carrito.
+- Ver el total de la compra.
+- Imprimir Ticket
 
-> Solo lo mostramos visualmente por si hay alguien que no sea programador mirando la pantalla.
+![loading](./assets/1.png)
+> Splash screen
 
-La aplicación se vería así:
+![home](./assets/2.png)
+> Inicio
 
-![Sin productos](./assets/app-0.jpg)
-> Inicialmente no hay productos en el carrito
+![products](./assets/3.png)
+> Carga de productos
 
-![Con productos](./assets/app-1.jpg)
-> Con productos en el carrito
+![Recibo](./assets/4.png)
+> Recibo
 
-## Requisitos
+![oops](./assets/5.png)
+> ?
+## 🚀 Comenzando
 
-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.
+### 📋 Prerequisitos
 
-- [ ] 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ó.
+- Node.js [https://nodejs.org/](https://nodejs.org/) (20.18.0)
+- NVM [https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm) (opcional)
+- pnpm [https://pnpm.io/es/installation](https://pnpm.io/es/installation)
+- Git [https://git-scm.com/](https://git-scm.com/)
+- Visual Studio Code [https://code.visualstudio.com/](https://code.visualstudio.com/)
 
-## Extras
+### 📦 Instalación
 
-- [ ] 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.
+Después de descargar e instalar [Node.js](https://nodejs.org/), ejecutar los siguientes comandos:
 
-## Bonus
+```sh
+npm install -g pnpm
+```
 
-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.
+Y después clonar el repositorio:
 
-> [!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.
+```sh
+git clone https://github.com/emirchus/wallbit-challenge
+```
 
-## Entregables
+```sh
+cd wallbit-challenge
+```
 
-- [ ] 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.
+Después de clonar el repositorio, instalar las dependencias y ejecutar el proyecto en dev con los siguientes comandos:
 
-## Premio
+```sh
+pnpm install
+```
 
-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.
+```sh
+pnpm dev
+```
 
-El ganador va a ser elegido por el chat, la gente de Wallbit y yo.
+### 🚀 Deployment
 
-> [!IMPORTANT]
-> El ganador debe estar presente en el stream para recibir el premio.
+```sh
+pnpm build
+```
 
-![Razer Seiren Mini](./assets/sorteo.jpg)
+## 🌟 Dependencias
 
-> En caso de no poder enviarse el premio, se pagará el equivalente de 70 USD.
-
-El deadline para enviar el PR es el 19 de Noviembre de 2024 a las 15:00hs Argentina (GMT -3).
-
-> [!IMPORTANT]
-> Los PRs se cerrarán luego de esa hora así que no te olvides de hacerlo antes.
+- ⚛️ react - Biblioteca de JavaScript para construir interfaces de usuario.
+- 🎨 tailwindcss - Biblioteca de utilidades de CSS de bajo nivel.
+- 🎨 @radix-ui - Framework para diseño responsivo y estilización de componentes UI.
+- 📦 pnpm - Gestor de paquetes.
+- 📦 vite - Herramienta de desarrollo web.

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": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

eslint.config.js

@@ -0,0 +1,26 @@
+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';
+import prettier from 'eslint-config-prettier';
+
+export default tseslint.config(
+  { ignores: ['dist', 'node_modules'] },
+  {
+    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,13 @@
+<!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" />
+    <title>El Topo Store</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "wallbit-challenge",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fontsource/vt323": "^5.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.460.0",
+    "react": "19.0.0-rc-4beb1fd8-20241118",
+    "react-dom": "19.0.0-rc-4beb1fd8-20241118",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.15.0",
+    "@types/node": "^22.9.0",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
+    "@vitejs/plugin-react-swc": "^3.7.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.15.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.12.0",
+    "postcss": "^8.4.49",
+    "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.8",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.3",
+    "typescript-eslint": "^8.15.0",
+    "vite": "^5.4.11"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
+  }
+}