Skip to content

ITA Challenges Frontend [Castellano]

Jump to bottom
Francesc 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 (Eli)

API's consumidas (Francesc)

  • ITA-Challenges

    Mantiene el repositorio de retos de programación, gestiona el registro y login de usuarios y su progreso, y permite a estos aportar y validar las soluciones a los retos propuestos. Puedes encontrar más información sobre esta API en el siguiente [enlace](http://dev.ita-challenges.eurecatacademy.org:9080/swagger- ui/index.html?urls.primaryName=Challenge%20OpenAPI%20Definition).

  • ITA-Wiki

    Proporciona recursos en diferentes lenguajes. Puedes encontrar más información sobre esta API en el siguienteenlace.

  • ITA-SSO

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.

Nueva estructura para la WIKI:

  • Introduccion

  • Getting Started (Instalación y Configuración)

    • Versiones empleadas
    • See README para instalación, etc

  • Code Overview (Estructura del Proyecto)

    • Estructura de folding, modulos , etc

Coding Guidelines (see README Guidelines)

Clone this wiki locally