ITA Challenges Frontend [English]
ITA Challenges is an application from the IT Academy educational platform, designed for students to access programming challenges, participate in educational activities, and track their progress to improve their programming skills. Developed by Junior Developers at IT Academy, the application offers an intuitive and efficient interface.
This tool is aimed at developers and other professionals in the IT Academy community, including students seeking to enhance their skills and mentors who provide guidance and feedback. ITA Challenges promotes continuous learning and technical development through challenges structured by difficulty levels and programming languages.
For more details on the functional aspects of the application, see the following link: Figma Design.
On the challenges page, the user can access the list of challenges. These can be filtered in the sidebar by:
- Language: Javascript, Java, Python, and PHP.
- Difficulty: Easy, Medium, and Hard.
- Progress: Not Started, Incomplete, and Completed.
This list can also be sorted by popularity or date.
Clicking on a challenge takes you to the details of that challenge. There are four tabs:
-
Details: The challenge explanation is shown. When logged in, a code editor is displayed, and with a check button, the explanatory text can be shown or hidden.
-
Solutions: Solutions from other users for this challenge are displayed.
-
Resources: Resources that can help solve the challenge are offered.
-
Related: Other challenges with similar characteristics are shown.
To submit a solution for the challenge, you must log in or register if you haven't done so previously.
To view other participants' solutions, the user must have previously submitted their solution for the challenge.
The installation procedures are detailed in the following link.
The main tools and dependencies used include:
- Angular CLI version 17.1.2.
- Node.js version 20.10.0.
- npm version 10.2.3.
- TypeScript version 5.2.2.
- Bootstrap version 5.2.3.
- Codemirror version 6.0.1.
- Ngx-cookie-service version 17.1.0.
- Jest version 29.5.0.
For more details on the specific dependencies and their versions, see the project's package.json file.
The coding guidelines for the ITA Challenges project are detailed in the GUIDELINES.md file.
The following diagram details the elements that make up the application:
This project is based on a component architecture. Each component has its own responsibility and can be reused in different parts of the project. The most relevant components for the project are described below.
The StarterComponent is located in the starter.component.ts file. It is responsible for the initial functionality of the application and handles the main logic of the home page.
Functionality
The StarterComponent manages the challenges in the application. This component interacts with the StarterService to retrieve the challenges and handle their pagination.
Additionally, this component also manages the challenge filtering functionality. Filters are handled through the FiltersModalComponent, which opens when the openModal() method is invoked.
The ChallengeComponent is located in the challenge.component.ts file. It handles and presents the details of a specific challenge in the application.
Functionality
The main purpose of the ChallengeComponent is to load and display the details of a specific challenge. This includes information such as the challenge title, creation date, difficulty level, challenge details, proposed solutions, and the allowed programming languages for the challenge.
The ChallengeCardComponent is located in the challenge-card.component.ts file. It is used to display the information of a challenge in a card format.
Functionality
The ChallengeCardComponent is used to display the information of a challenge in a card format wherever needed in the application. Each card contains the challenge title, associated programming languages, creation date, difficulty level, and challenge popularity. Clicking on a card redirects the user to the corresponding challenge details page.
The ChallengeInfoComponent is located in the challenge-info.component.ts file. This component is part of the challenges module and is used to display detailed information about a specific challenge.
Functionality
The ChallengeInfoComponent is used to display detailed information about a specific challenge. This includes the challenge description, examples, notes, popularity, allowed programming languages, and solutions. Additionally, it allows the user to submit a solution to the challenge and view related challenges.
The following diagram represents the structure and layout of the key components of the application:
The following diagram details the services that make up the application:
The JwtInterceptor implements Angular's HttpInterceptor interface. It is used to intercept and potentially modify HTTP requests in the application. It retrieves the authentication token from the TokenService and checks if the request URL matches the one defined in the environment. If both conditions are met, it sends the request unmodified.
The Web Crypto API is used to encrypt and decrypt cookies. When executed, it generates a secret key using the password provided in the environment and stores it. Its methods include:
-
generateSecretKey: Generates a secret key using the PBKDF2 algorithm and returns it. The key is derived from the provided password, using an SHA-256 hash and 1000 iterations.
-
setSecureCookie: Encrypts the cookie value using the secret key and the AES-GCM algorithm, then saves the encrypted cookie. The encrypted value is converted to a string using the
btoafunction before being stored. -
getSecureCookie: Retrieves the encrypted cookie, decrypts it using the secret key and the AES-GCM algorithm, then returns the original cookie value.
-
Maintains the repository of programming challenges and allows users to contribute and validate solutions to the proposed challenges.
-
Provides programming resources in various languages.
-
User management.
For details on testing the ITA Challenges project, see the README.md file.
Find detailed instructions on how to deploy the ITA Challenges application in the README.md file.
Explore answers to frequently asked questions about the ITA Challenges project in the README.md file.