Skip to content

ITA Challenges Frontend [Castellano]

Jump to bottom
Yulibeth Rivero edited this page May 21, 2024 · 79 revisions

Challenge Project

ITA Challenges es una aplicación de la plataforma educativa IT Academy, diseñada para que los alumnos accedan a retos de programación, participen en actividades educativas y sigan su progreso, con el propósito de mejorar sus habilidades de programación. Desarrollada por Juniors Developers de IT Academy, la aplicación ofrece una interfaz intuitiva y eficiente.

Esta herramienta está dirigida a desarrolladores y otros profesionales de la comunidad IT Academy, incluyendo a alumnos que buscan perfeccionar sus habilidades y a mentores que proporcionan orientación y feedback. ITA Challenges fomenta el aprendizaje continuo y el desarrollo técnico a través de retos estructurados por niveles de dificultad y tipo de lenguaje.

Aspectos funcionales

1. Listado de retos

En la página de retos, el usuario puede acceder al listado de retos. Estos se pueden filtrar en el menú lateral por:

  • Lenguaje: Javascript, Java, Python i PHP.
  • Dificultad: Fácil, media y difícil.
  • Progreso: No empezados, Falta completar y Completados

Este listado también se puede ordenar por popularidad o fecha.

figma-starter

2. Detalle y opciones de un reto

Al clicar un reto se accede al detalle de este reto. Hay cuatro pestañas:

  • Detalles: Se muestra la explicación del reto. Cuande se ha hecho login se muestra un editor de código y mediante un botón de check se muestra o se esconde el texto explicativo.

  • Soluciones: Se muestran soluciones de otros usuarios a este mismo reto.

  • Recursos: Se ofrecen recursos que pueden ayudar a la resolución del reto.

  • Relacionado: Es muestren otros retos con características similares.

Para poder enviar la solución del reto se ha de hacer login o registrarse si no se ha hecho previamente.

Para poder ver las soluciones del reto de otros participantes el usuario ha de haber enviado previamente la solución de este reto.

figma-challenge

Instalación

Los procedimientos para llevar a cabo la instalación están detallados en el siguiente enlace.

Configuración

Entre las principales herramientas y dependencias utilizadas se encuentran las siguientes:

Para más detalles sobre las dependencias específicas y sus versiones, consulta el archivo package.json del proyecto.

Directrices de Codificación

Las directrices de codificación para el proyecto ITA Challenges se encuentran detalladas en el archivo GUIDELINES_ES.md.

Estructura del Proyecto

ITA Challenges se ha basado en un layout que cumple con los estándares del desarrollo web y ha sido creado con una arquitectura escalable.

1. Diagrama Layout 'ITA Challenges'

A continuación se representa la estructura y disposición de los componentes clave de la aplicación:

new_layout_IT_challenge3

2. Arquitectura 'ITA Challenges'

En el siguiente gráfico se detallan los elementos que conforman la aplicación:

Arquitectura-'ITA-Challenges

Components (Joaquin)

  • Análisis de distintos componentes

Services

En el siguiente gráfico se detallan los servicios que conforman la aplicación:

services-ita-challenges2

Interceptors (Eli)

Helpers

Cookie Encryption Helper

Se utiliza API Web Crypto para encriptar y desencriptar cookies. Cuando se ejecuta, genera una clave secreta utilizando la contraseña proporcionada en el entorno y la almacena. Sus métodos son los siguientes:

  • generateSecretKey: Genera una clave secreta utilizando el algoritmo PBKDF2 y la devuelve. La clave se deriva de la contraseña proporcionada, utilizando un hash SHA-256 y 1000 iteraciones.

  • setSecureCookie: Encripta el valor de la cookie utilizando la clave secreta y el algoritmo AES-GCM, y luego guarda la cookie encriptada. El valor encriptado se convierte en una cadena utilizando la función btoa antes de ser almacenado.

  • getSecureCookie: Obtiene la cookie encriptada, la desencripta utilizando la clave secreta y el algoritmo AES-GCM, y luego devuelve el valor original de la cookie.

API's consumidas

  • ITA-Challenges

    Mantiene el repositorio de retos de programación y permite a los usuarios aportar y validar soluciones a los retos propuestos.

  • ITA-Wiki

    Proporciona recursos de programación en diferentes lenguajes.

  • ITA-SSO

    Gestion de usuarios.

Testing

Para obtener detalles sobre las pruebas del proyecto ITA Challenges, se puede revisar el archivo README.md.

Deployment

Encuentra instrucciones detalladas sobre cómo desplegar la aplicación ITA Challenges en el archivo README.md.

FAQs

Explora respuestas a preguntas frecuentes sobre el proyecto ITA Challenges en el archivo README.md.

Clone this wiki locally