/home-interview-challenge

Primary LanguageJavaScript

Digiventures Take Home Exercise

Run Locally

Clone the project

  git clone https://github.com/DigiventuresFintech/home-interview-challenge.git

Go to the project directory

  cd home-interview-challenge

Install dependencies

  npm install

Start the server

  npm run dev

🙌🏼 ES-es

🤓 Objetivos

Deseamos crear páginas dinámicamente según un JSON de configuración consumido desde el servidor.

🎨 Frontend

Se debe utilizar la librería de componentes React Strap: https://reactstrap.github.io/?path=/story/home-installation--page

El comportamiento de las páginas será:

Si el "path" se encuentra configurado, la página existe y debe generar su contenido.

Si el "path" no se encuentra configurado, se debe informar un error 404.

Los formularios generados deben modificar un estado que defina propiedades en un objeto que se utilizará para emitir al servidor en el body (se puede utilizar axios o fetch).

El código debe soportar cambios de configuración sin deber incidir en el código, siempre y cuando las instrucciones de ejecución como los algoritmos de validación existan.

La emisión del estado contenedor de los valores de los inputs deberá hacerse como método POST a la ruta /:pathname, la misma donde nos encontramos actualmente.

Ejemplo: si nos encontramos en /login, el post se debe hacer a /login

Como resultado se deberá tener una pantalla genérica donde según la URL se cargue y se genere el contenido según la configuración, donde agregando la propiedad "recovery" a la configuración, al ingresar a "/recovery" deberíamos ver contenido nuevo sin realizar modificaciones en el FrontEnd.

🔧 Backend

Se debe completar el código faltante del método get de ConfigurationController - server.js (línea 28) para retornar la configuración.

Tips

Siempre es buena fuente de inspiración repasar un poco de teoría de patrones: (https://refactoring.guru/es/design-patterns/catalog)[link]

🏄 Objetivos adicionales

  • Integrar MongoDB
  • Crear modelo de configuración
  • Implementar búsqueda de configuración en MongoDB (buscar por nombre de página)

👉 ¿Qué implica cada posible valor del modelo?

Modelo real: https://github.com/DigiventuresFintech/home-interview-challenge/blob/main/models/inputs.json

Algunos inputs de ejemplo:

{
  "path": {
    //page path
    "title": "", //título de la página
    "inputs": [
      {
        "type": "text", //tipo de input o componente
        "name": "username", //nombre del input en el evento
        "label": "Username", //label del input
        "regex": "^\w{1,32}$", //regex de control
        "required": true //necesario o no para el envío
      },
      {
        "type": "link", //<a href='' />
        "target": "https://digiventures.la/", //página de destino
        "text": "¿Any problem? Contact us" //texto que debe ser presionado
      },
      {
        "type": "confirm_password",
        "name": "password",
        "label": "Confirm your password",
        "regex": "^(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$",
        "conditions": {
          //incluye condiciones complejas
          "validations": [{ "comparision": "same", "input": "password" }]
          //array de validaciones de comparación para dar como válido el input
          //comparision: algoritmo de comparación
          //input: indica un input del cual tomar el valor de comparasión
        }
      },
      {
        "type": "select",
        "name": "country",
        "label": "¿Where are you living?",
        "options": [
          //opciones del select
          { "value": "argentina", "label": "Argentina" },
          { "value": "other", "label": "Other" }
        ]
      },
      {
        "type": "text",
        "name": "custom_country",
        "label": "Specify which country",
        "conditions": {
          "validations": [
            {
              "comparision": "not_includes",
              "input": "country",
              "values": ["argentina"]
            }
            //not_includes: algoritmo de - no inclusión
            //values: array que contiene que valores no debe tener
            //si escribe argentina debe dar error
          ],
          "render": [
            [
              {
                "comparision": "includes", //includes - debe contener el valor
                "input": "country", //input de selección de valor
                "values": ["other"] //array: debe contener el valor other
              }
            ]
          ]
        }
      },
      {
        "type": "button",
        "label": "Create account",
        "method": "register" //debe invocar el método register
      }
    ]
  }
}

💪 Authors

Mock up demo

demo