Reading list challenge solution

pruebas/01-reading-list/CarlosUlisesOchoa/.eslintrc.cjs

@@ -0,0 +1,65 @@
+module.exports = {
+  root: true,
+  env: {
+    'jest/globals': true,
+    browser: true,
+    es2020: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+    './node_modules/standard/eslintrc.json',
+  ],
+  ignorePatterns: [
+    'dist',
+    '.eslintrc.cjs',
+    'node_modules',
+    '**/*.svg',
+    '**/*.css',
+    '**/*.json',
+  ],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: {
+    react: {
+      version: '18.2',
+    },
+    'import/resolver': {
+      alias: {
+        map: [['@/', 'src/']],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+  plugins: ['react-refresh', 'jest'],
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    'react/prop-types': 'off',
+    'import/no-duplicates': 'off',
+    quotes: 'off',
+    'block-spacing': 'off',
+    'no-lone-blocks': 'off',
+    'import/first': 'off',
+    'object-curly-spacing': 'off',
+    'jsx-quotes': 'off',
+    'react/jsx-closing-bracket-location': 'off',
+    'react-hooks/exhaustive-deps': 'off',
+    'space-before-function-paren': 'off',
+    'no-unused-vars': 'warn',
+    'no-undef': 'error',
+    'no-multiple-empty-lines': 'off',
+    'eol-last': 'off',
+    'multiline-ternary': 'off',
+    'comma-dangle': [
+      'error',
+      {
+        arrays: 'only-multiline',
+        objects: 'only-multiline',
+        imports: 'only-multiline',
+        exports: 'only-multiline',
+        functions: 'ignore',
+      },
+    ],
+  },
+}

pruebas/01-reading-list/CarlosUlisesOchoa/.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?

pruebas/01-reading-list/CarlosUlisesOchoa/.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "semi": false,
+  "printWidth": 90,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "trailingComma": "es5",
+  "jsxBracketSameLine": true,
+  "bracketSpacing": true,
+  "tabWidth": 2
+}

pruebas/01-reading-list/CarlosUlisesOchoa/README.md

@@ -0,0 +1,101 @@
+<h1 align="center">📚 Mi catálogo de libros</h1>
+
+<br/>
+
+<div align="center">
+   Consulta los detalles de este coding challenge <a href="https://github.com/midudev/pruebas-tecnicas/blob/main/pruebas/01-reading-list/README.md" target="_blank">haciendo clic aquí</a>
+   <br/><br/>
+   Alojado en <a href="https://vercel.com/" target="_blank">Vercel</a>.
+</div>
+
+<div align="center">
+  <h3>
+    <a href="https://reading-list-code-challenge.vercel.app/">
+      Demo
+    </a>
+    <span> | </span>
+    <a href="https://github.com/CarlosUlisesOchoa/code-challenge-reading-list">
+      Código fuente
+    </a>
+  </h3>
+</div>
+
+<br />
+
+Desarrollado con una variedad de tecnologías modernas para proporcionar la mejor experiencia de lectura. ✨
+
+## Tabla de Contenidos
+
+- [Tecnologías utilizadas](#tecnologías-utilizadas)
+- [Características implementadas](#características-implementadas)
+- [Características por implementar](#características-por-implementar)
+- [Requisitos](#requisitos)
+- [Cómo empezar](#cómo-empezar)
+- [Contacto](#contacto)
+
+## Tecnologías Utilizadas
+
+- [React](https://reactjs.org/)
+- [Tailwind](https://tailwindcss.com/)
+- [Prettier](https://prettier.io/)
+- [Standard](https://standardjs.com/)
+- [ESLint](https://eslint.org/)
+- [Vite](https://vitejs.dev/)
+
+### Capturas de pantalla
+
+Tema oscuro:
+![image](https://github.com/CarlosUlisesOchoa/code-challenge-reading-list/assets/26280134/5c0e1e4b-7eef-46bc-927f-20932290d52b)
+
+Tema claro:
+![image](https://github.com/CarlosUlisesOchoa/code-challenge-reading-list/assets/26280134/e844fec4-18e3-4c32-9c6e-157d22340429)
+
+
+### Características implementadas
+
+- [x] Visualización de libros disponibles
+- [x] Agregar libro a lista de lectura
+- [x] Eliminar libro a lista de lectura
+- [x] Filtro por género de Libros
+- [x] Filtro por número de Páginas
+- [x] Búsqueda por texto en título
+- [x] Persistencia de datos en el navegador
+- [x] Diseño adaptativo (Responsive design)
+- [x] Añadir tests
+
+### Características por implementar
+
+- [ ] Sincronización de estado global
+- [ ] Ordenación de la lista de lectura por prioridad
+- [ ] Sincronización entre pestañas
+
+## Requisitos
+
+- [Node.js](https://nodejs.org/en/download/)
+- [npm](https://www.npmjs.com/) o [pnpm](https://pnpm.io/)
+
+## Cómo Empezar
+
+Ejecuta los siguientes comandos en tu línea de comandos:
+
+```bash
+# Clona este repositorio
+$ git clone https://github.com/CarlosUlisesOchoa/code-challenge-reading-list
+
+# Ve al directorio del proyecto
+$ cd reading-list\pruebas\01-reading-list\CarlosUlisesOchoa
+
+# Instala las dependencias
+$ pnpm install
+
+# Ejecutar en modo desarrollo
+$ pnpm run dev
+
+# Listo ahora podrás ver el proyecto accediendo a http://localhost:5173/
+```
+
+## Contacto
+
+- Website [carlos8a.com](https://carlos8a.com)
+- GitHub [@CarlosUlisesOchoa](https://github.com/carlosulisesochoa)
+- X [@Carlos8aDev](https://twitter.com/carlos8adev)

pruebas/01-reading-list/CarlosUlisesOchoa/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="es">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/png" href="/favicon.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Librería 8a - CarlosUlisesOchoa</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>

pruebas/01-reading-list/CarlosUlisesOchoa/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "reading-list",
+  "author": {
+    "name": "Carlos Ochoa",
+    "email": "carlos8a.dev@gmail.com",
+    "url": "https://carlos8a.com"
+  },
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "test": "vitest",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": ">=7.0.0-0 <8.0.0",
+    "@babel/plugin-syntax-flow": "^7.14.5",
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.14",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-jest": "^27.2.3",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "jsdom": "^22.1.0",
+    "postcss": "^8.4.27",
+    "postcss-import": "^15.1.0",
+    "prettier": "^3.0.0",
+    "prop-types": "15.8.1",
+    "standard": "^17.1.0",
+    "tailwindcss": "^3.3.3",
+    "typescript": ">=2.8.0",
+    "vite": "^4.4.5",
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^0.34.3"
+  }
+}