Multi-step Form - Frontend Mentor Challenge

Enlaces

• Repositorio Accede a los archivos del proyecto en GitHub.
• Demo Accede a la web desplegada y prueba su funcionamiento.

¿En qué consiste el proyecto?

El desafío expuesto en Frontend Mentor es construir un formulario multi paso (multi-step-form) lo más cercano al diseño que entrega Frontend Mentor, considerando las siguientes funcionalidades:

• Hacer que los usuarios completen cada campo obligatorio del formulario antes de avanzar al paso siguiente.
• Permitir volver atrás para actualizar sus selecciones.
• Mostrar un resumen de las selecciones del usuario en el último paso y permitir confirmar orden o volver atrás.
• Ver los estados de “hover” y “focus” de todos los elementos inactivos de la página.
• Recibir mensajes de validación en caso de que exista un campo obligatorio vacío.
• Recibir mensajes de validación en el formulario si:
  • Un campo obligatorio se ha omitido.
  • La dirección de email no encuentra correctamente formateada.
• Se intenta avanzar pero no se han hecho ninguna selección o no se ha rellenado la información correspondiente.
• Se requiere utilizar HTML, CSS y JavaScript pero puede usar cualquier herramienta que le permita al desarrollador completar este desafío.

Tecnologías escogidas

• TypeScript: Personalmente disfruto utilizar TypeScript en lugar de JavaScript si es posible, esto porque cometo menos errores al programar al recibir avisos sobre propiedades que me he olvidado mientras desarrollo, puedo crear interfaces o tipos que me permiten estructurar los objetos que voy creando al momento de desarrollar el software.
• React: Si bien es posible completar este desafío sin utilizar librerías de Frontend como React, lo utilicé debido al conocimiento que tengo y porque puedo unirlo fácilmente a otras tecnologías como Redux toolkit.
• Redux Toolkit: Como mencioné justo en el punto anterior, esta librería la utilicé junto a React para compartir el estado entre componentes concentrando la información en un solo lugar, si bien pude utilizar Session Storage o Local Storage para lograr lo mismo, considero que React Redux es una excelente alternativa, sobre todo en aplicaciones web modernas y que requieren escalar con el tiempo.

Conclusiones

Con el fin de completar este desafío, utilicé React para el frontend y Redux Toolkit para el manejo del estado, lo cual me permitió desarrollar la aplicación de manera eficiente y escalable. Esto me permitió extender mis conocimientos en React y me permitió adentrarme en el mundo de Redux, una de las librerías más populares y utilizadas en la actualidad.