Role: Front-end Developer (Practical Training)
Organisation: Barcelona Activa IT Academy
Period: March – April 2025

Contributed to the front-end development of the IT Academy Challenges platform, an Angular-based application used in the Barcelona Activa IT Academy programme to deliver programming exercises, starter code, and learning resources. The platform provides dedicated interfaces for students and mentors, enabling browsing of challenges, solution submission workflows, and role-aware access to mentoring tools.

View the project: Source code on GitHub

Core Responsibilities & Contributions

Platform Architecture & Shared UI

• Worked within a modular Angular architecture, with a CoreModule providing layout components (header, main menu, footer) and feature modules for starter, challenge, profile, and mentor areas.
• Helped wire feature modules into the root AppModule, ensuring the platform remained maintainable and easy to extend as new challenge types and views were added.
• Used Bootstrap and NgBootstrap for layout and modal interactions, making sure challenge and resource pages were responsive across common screen sizes.
• Contributed to shared components such as breadcrumbs, pagination, and cards to keep navigation and visual language consistent across the platform.

Student Challenge Discovery & Favorites

• Implemented the ChallengeCardComponent to present individual challenges with title, languages, difficulty level, popularity, and favorites count, using @ngx-translate to adapt labels to the current language.
• Added logic in the challenge card to read and persist favorite status via localStorage, so students could see which challenges they had already marked as favorites even after a page refresh.
• Extended ChallengeService with mocked addToFavorites and removeFromFavorites methods returning RxJS Observables, updating both is_favorite_{id} and favorites_count_{id} keys in localStorage and simulating backend latency with a small delay.
• Ensured the favorites UX felt realistic for students while remaining safe to run entirely from the frontend in a classroom or sandbox environment.

Student Journey & Solution Submission

• Supported the student flow from challenge discovery through completion by using ChallengeService to track whether a challenge had been started via a BehaviorSubject and a challengeStarted flag stored in localStorage.
• Connected this state to the solution submission UX, so that starting a challenge would enable appropriate controls and opening the "send solution" modal would reset the started flag and move the student into a submission-focused flow.
• Helped wire this behaviour into modal-driven components used to upload or send solutions, keeping the student journey clear and avoiding inconsistent UI states.

Navigation, Breadcrumbs & Resources

• Used a BreadcrumbComponent backed by BreadcrumbService to generate dynamic breadcrumb trails (for example, Home ⇒ Challenges ⇒ Specific challenge), helping students orient themselves when moving between views.
• Contributed to shared resource and challenge listing UIs, including card components and pagination, so that both exercises and learning materials presented consistent metadata and interactions.
• Ensured the navigation and layout worked well with the application's multilingual setup (Catalan by default, with support for additional languages through translation files and TranslateHttpLoader).

Tech Stack & Practices

• Angular and TypeScript for the application architecture and state management, complemented by RxJS observables for shared auth and challenge state.
• HTML5, CSS3, Bootstrap, and NgBootstrap for responsive layout and modal interactions.
• @ngx-translate and a custom I18nModule for translations and locale-aware UI behaviour.
• Local storage-based mocking for favorites and challenge state to decouple front-end exercises from backend availability during practice sessions.