Advanced frontend applications

by Karol Wieczorek published 2026/03/03 10:49:00 GMT+1, last modified 2026-03-03T16:00:28+01:00

Project Course Organization

Projects are carried out in groups of 3–4 students. Any other group size requires prior approval from the Instructor. Each project team must appoint a Team Leader, who is responsible for coordinating the team's work and acting as the primary point of contact with the Instructor.

Work Methodology:

  • Teams must work using a task management board (e.g., Trello, Jira, GitHub Projects).

  • Classes held during even-numbered weeks serve as "Sprint Reviews" (Retro/Planning) – the team reports on interface development progress and outlines the plan for the next 2 weeks.

  • After each even-numbered class, the Team Leader must send an email to the Instructor (subject: AFA_PROJECT_GR_SURNAMES_DATE) containing a link to the task board and a brief progress report.

Project Schedule:

  • Week II – Team registration, selection of Team Leader, and project topic submission. Setup of the repository and task board.

  • Week IV – Presentation of application mockups (e.g., Figma or similar) and component architecture.

  • Week VI – Project setup in the chosen framework, routing configuration, and basic views (using Mock data).

  • Week VIII – Implementation of advanced State Management and navigation.

  • Week X – Integration with an external API (asynchronous communication, handling network errors).

  • Week XII – Implementation of advanced features: internationalization (i18n), interceptors, themes, and component testing.

  • Week XIV – Final review, performance optimization (Lighthouse score), and UI/UX refinement.

  • Week XV – Project submission and Final Defense (1st attempt).

Project Requirements:

  • The project must be implemented as a "Thin Client" based on a modern frontend framework (e.g., React, Angular, Vue.js).

  • Technologies: Mandatory use of TypeScript. Styling using modern approaches (e.g., CSS Modules, Styled Components, Tailwind CSS, or SASS/SCSS preprocessors).

  • State Management: Use of advanced state management mechanisms (e.g., Redux Toolkit, NgRx, or advanced Context API).

  • Communication: The application must communicate with an external API (this can be your own backend from another course, a public API, or a Mock API).

  • Functionalities:

    • High-level Responsive Web Design (RWD).

    • Authentication handling and Protected Routes (Guards).

    • Form validation (e.g., React Hook Form, etc.).

    • Implementation of advanced features: internationalization (i18n), interceptors, and themes.

  • Testing: Mandatory component or E2E tests (e.g., Jest, Vitest, Cypress) – minimum 30% coverage of key interfaces.

Technical Documentation Scope:

  1. Description of the application architecture and directory structure.

  2. List of utilized libraries with justification for their selection.

  3. UI Mockups (screenshots from prototyping tools).

  4. Description of the state management strategy.

  5. API communication documentation (description of utilized resources).

  6. Instructions for building and running the application (npm/yarn scripts).