IOL challenge 👊

Tabla de contenido 🚀

• Demo
• Instalación
• Estructura del proyecto
• Librerías

Demo 💡

Instalación 🔧

Recomiendo usar yarn a la hora de iniciar el proyecto por ser más rápido y seguro que sobre npm, de igual forma siéntase libre de usar el que guste, para efectos de esta guía estaré usando yarn.

Scripts disponibles:

Antes de ejecutar cualquier script del proyecto es necesario instalar las dependencias del mismo:

yarn install

Dev

Para desarrollo, se hace uso de webpack-dev-server, con watchers que actualizan el navegador ante cualquier cambio.

yarn dev

Start

Este script crea un bundle optimizado para producción, y lo levanta con un servidor básico con Express.

yarn start

Build

Este script usa webpack para crear un empaquetado del proyecto en la carpeta build listo para ser puesto en producción

yarn build

Lint

Se usa para detectar errores de formato con ESlint.

yarn lint

Lint:fix

Se usa para darle el formato correcto al proyecto.

yarn lint:fix

Test

Ejecuta todas las pruebas del proyecto manejadas con Jest.

yarn test

Estructura del proyecto 📁

A continuación una breve introducción al proyecto:

1. /config: Aquí se encuentran los archivos de configuración de Webpack y de Jest.
2. /public: Contiene el template index.html que usará Webpack para incrustrar los links al JS y CSS luego de optimizar.
3. /src: Tiene la mayor parte del proyecto:
   3.1. |-/api: Contiene un archivo donde están los endpoints a usar por la app.
   3.2. |-/components: Aquí están los componentes de React a usar en toda la app, están separados en 2 carpetas:
   3.2.1. |--/global: En esta se encuentran aquellos componentes que podrían ser globales o muy utilizados por toda la app.
   3.2.2. |--/Home: Contiene componentes específicos de la página/pantall del HOME.
   3.3. |-/constants: Tiene 2 archivos, index que contiene constantes globales y validationSchemasque contiene los esquemas de validación que compatirán los diferentes formularios en la app.
   3.4. |-/context: Aquí están aquellos componentes que manejan toda la lógica del estado y los datos a consumir desde otros componentes, haciendo uso de Context de React, si la app crece más se recomienda cambiar a redux.
   3.5. |-/router: Contiene el archivo con la configuración de las diferentes rutas.
   3.6. |-/services: Tiene todas aquellas funciones que se usarán para consumir datos externos.
   3.7. |-/styles: Contiene todos los archivos de estilos.
   3.8. |-/app.jsx: Archivo que contiene el componente principal (es el punto de entrada de Webpack).
   
4. /tests: Está dividido en más carpetas que contiene todas las pruebas escritas del proyecto.
5. /.babelrc: Archivo de configuración de Babel.
6. /eslintrc.json: Archivo de configuración de ESlint para mantener una estructura en cuanto a la sintáxis del código.
7. /.gitignore: Usado por git para ignorar ciertas rutas y archivos.
8. /.prettierrc: Archivo de configuración de Prettier, se usa para formatear el código.
9. /package.json: Registro de las dependencias del proyecto.
10. /readme.md: Este archivo que estás leyendo.
11. /setupTests.js: Configuración de Jest + Enzyme para testing.
12. /yarn.lock: Archivo de yarn para congelar las versiones de las dependencias del proyecto.

Librerías 📦

Librerías usadas en el proyecto:

• React, librería de Javascript para la creación de interfaces de usuario. Se usó para crear los distintos componentes que requería la app.
• React-router, una colección de componentes para navegar entre rutas, se usó para manejar los diferentes cambios de parametros y rutas de la app.
• Bootstrap, un framework de componentes UI.
• React-bootstrap, una colección de componentes de bootstrap re-escritos con React, la preferí por sobre "Vanilla Bootstrap" ya que este no necesita jQuery.
• React-hook-form, librería de React para la validación de formularios, en su página oficial muestran su rendimiento frente a otras populares como Formik o Redux-form.
• Axios, cliente http para Javascript, empleado para hacer llamadas a servicios externos, ahorra mucho trabajo.
• Framer motion, librería para React de animaciones, es genial.
• React-lazy-load-image-component, un HOC de React que facilita la "carga peresoza" de imágenes mejorando el rendimiento.

Como dependecias de desarrollo tenemos:

• Webpack, un empaquetador de módulos estáticos para aplicaciones de Javascript modernas, sirve para automatizar tareas, procesar, minificar y optimizar archivos quedando listos para producción.
• Babel, es un transpilador de Javascript moderno (ES10) a versiones con mayor compatibilidad (ES5).
• Jest, framework de testing de Javascript enfocado en la simplicidad.
• Enzyme, es una utilidad de testing para React (recuerda un poco a jQuery).
• ESlint, herramienta de análisis de código estático, ayuda a escribir código consistente a lo largo del proyecto.
• Prettier, herramienta para formatear el código de forma automática.