WallbitChallenge Agrego deploy!! Mox0589 twitch https://wallbit-challenge-mu.vercel.app/

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,65 +1,6 @@
-[![Wallbit](./assets/logo.jpg)](https://wallbit.io/)
+Comandos ejecucion:
+pnpm install
+pnpm run dev
 
-> El banco digital para trabajadores remotos.
-
-# Wallbit Junior Frontend Challenge
-
-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.
-
-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ó.
-
-> Solo lo mostramos visualmente por si hay alguien que no sea programador mirando la pantalla.
-
-La aplicación se vería así:
-
-![Sin productos](./assets/app-0.jpg)
-> Inicialmente no hay productos en el carrito
-
-![Con productos](./assets/app-1.jpg)
-> Con productos en el carrito
-
-## 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ó.
-
-## 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.
-
-## Bonus
-
-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.
-
-> [!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.
-
-## Entregables
-
-- [ ] 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.
-
-## Premio
-
-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.
-
-El ganador va a ser elegido por el chat, la gente de Wallbit y yo.
-
-> [!IMPORTANT]
-> El ganador debe estar presente en el stream para recibir el premio.
-
-![Razer Seiren Mini](./assets/sorteo.jpg)
-
-> 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.
+link deploy en vercel
+https://wallbit-challenge-mu.vercel.app/

components/Dots.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import "../src/App.css"
+
+import { useState, useEffect } from 'react'
+
+const Dots = ({count = 100}) => {
+  const [dots, setDots] = useState([]);
+
+  useEffect(() => {
+    const generaDots = () => {
+      const newDots = Array.from({ length: count }, (_, i) => ({
+        id: i,
+        top: Math.random() * 100, 
+        left: Math.random() * 100,
+        width: 3, 
+        height: 3, 
+        speed: Math.random() * 50 + 4,
+      }));
+      setDots(newDots);
+    };
+
+    generaDots();
+  }, [count]);
+
+  return (
+    <div className="dots-container">
+      {dots.map((i) => (
+        <div
+          key={i.id}
+          className="dots"
+          style={{
+            top: `${i.top}%`,
+            left: `${i.left}%`,
+            width: `${i.width}px`,
+            height: `${i.height}px`,
+            animationDuration: `${i.speed}s`,
+          }}
+        />
+      ))}
+    </div>
+  );
+  };
+
+export default Dots

eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="./assets/favicon.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap"
+      rel="stylesheet"
+    />
+    <title>mjuarezdev</title>
+  </head>
+  <body>
+    <div id="root">
+    </div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "wallbit-challenge-mjuarez",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "zustand": "^5.0.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "vite": "^5.4.10"
+  }
+}