diff --git a/angular/mentoring/README.md b/angular/mentoring/README.md index 1bf1f2fc5..468a1aac5 100644 --- a/angular/mentoring/README.md +++ b/angular/mentoring/README.md @@ -55,7 +55,7 @@ If you have ever studied at RS School, or simply share our "Teach it forward" id #### Mentor responsibilities -- **Code review** of your students' pull requests after each sprint +- **Code review** of your student's pull requests after each sprint and task - **Answering students' questions** throughout the course - **Conducting a sprint interview** with each student after every sprint of the team task - **Conducting the final Angular interview** at the end of the course diff --git a/angular/mentoring/mentoring-roadmap.md b/angular/mentoring/mentoring-roadmap.md new file mode 100644 index 000000000..d69a78db5 --- /dev/null +++ b/angular/mentoring/mentoring-roadmap.md @@ -0,0 +1,196 @@ +# Mentoring Roadmap + +This document describes the mentor's journey week by week — from selecting mentees to the final interview. + +**Total duration:** ~11 weeks (1 week onboarding and team setup + 8 weeks team task + 2 week final interview). + +--- + +## Week 1 — Finding Mentees & Onboarding + +### 1.1 Selecting Mentees + +Students submit applications in the Discord channel **#students-looking-for-mentor** ([open channel](https://discordapp.com/channels/788026364372320256/1163363732672483369)). + +Each application follows a standard format: + +```text +Name: +Location (Country/City): +Communication languages: +RS App profile link: +GitHub profile link: +Telegram profile link: +Intro Task link: +About me: +``` + +> **Prerequisite:** Only students who have completed the [Angular Intro Task](../tasks/angular-intro-task/README.md) are eligible to apply. + +**What the mentor does:** + +1. Browse the applications in Discord. +2. Reach out to candidates who look promising (via Discord or Telegram). +3. Conduct an introductory conversation with the student — assess motivation, background, and potential. +4. If the student meets your expectations, confirm the mentorship. + +**Guidelines for choosing mentees:** + +- The student should be self-motivated and have a desire to learn. +- Having a completed intro task is a baseline; look for evidence of effort and curiosity. +- You can mentor **2 to 6 students** — choose a number you can realistically support with **3–5 hours per week**. + +### How to Add a Student to Your Mentee List + +Go to the confirmation form: +👉 + +Select **all** students you want to mentor (including those you already have) and submit the form. + +> ⚠️ **Known bug:** Students who are already assigned to any mentor (including you) will **not** appear in the selection list. To add a new student alongside your existing ones, you must: +> +> 1. Submit the form **without selecting any students** (this will unassign all your current mentees). +> 2. Open the form again — now all students (old and new) will be visible in the list. +> 3. Select all your existing students **plus** the new student and submit the form again. + +**Alternative (easier) way:** If you don't want to deal with the form, simply post a message with the student's name in the Discord channel: +👉 + +### 1.2 Getting to Know Your Students + +Once mentees are confirmed: + +- **Create a shared communication channel** (Discord group, Telegram chat, etc.). +- **Schedule an introductory group call** — let students introduce themselves, share their backgrounds, and get comfortable with each other. +- **Set expectations:** explain the course structure, sprint cadence, and your availability. +- **Familiarize yourself** with the [rules of interaction between students and mentors](README.md#basic-rules-of-interaction-between-students-and-mentors). + +### 1.3 Helping Students Form a Team + +The [team task](../tasks/angular-team-task/README.md) requires teams of **2–3 students**. + +> **Recommendation:** It is best to form teams exclusively from your own mentees. This significantly reduces the mentor's workload — you already know every student's progress, and coordinating code reviews and sprint interviews becomes much simpler. See [TEAM_SETUP.md](../tasks/angular-team-task/TEAM_SETUP.md) for details. + +**Mentor actions:** + +1. Help students find teammates within your group. +2. Guide them through creating the team in [RS App → Team Distribution](https://app.rs.school/). +3. Explain how to choose a project (CryptoTrade / ShopFront / MusicFlow) or help students design their own project that satisfies the requirements of all 4 sprints — see [PROJECTS.md](../tasks/angular-team-task/PROJECTS.md). +4. Walk students through the task structure: sprints, checkpoints, diary, scoring. +5. Make sure every student understands: + - The importance of the [development diary](../tasks/angular-team-task/DEVELOPMENT_DIARY.md) (mandatory for sprint interview admission). + - The requirement to develop **at least 2 personal Feature Components**. + - The [code standards](../tasks/angular-team-task/CODE_STANDARDS.md) and PR requirements. + +--- + +## Weeks 2–8 — Team Task (4 Sprints + Presentation Prep) + +### Sprint Schedule + +| Sprint | Duration | Topics | Checkpoint | +| ------------ | -------- | ------------------------- | ------------------------------------------------------------------------- | +| **Sprint 1** | 1 week | Components | [SPRINT1_CHECKPOINT.md](../tasks/angular-team-task/SPRINT1_CHECKPOINT.md) | +| **Sprint 2** | 2 weeks | Routing & Signals | [SPRINT2_CHECKPOINT.md](../tasks/angular-team-task/SPRINT2_CHECKPOINT.md) | +| **Sprint 3** | 2 weeks | Directives, Pipes & Forms | [SPRINT3_CHECKPOINT.md](../tasks/angular-team-task/SPRINT3_CHECKPOINT.md) | +| **Sprint 4** | 2 weeks | HTTP, RxJS & Testing | [SPRINT4_CHECKPOINT.md](../tasks/angular-team-task/SPRINT4_CHECKPOINT.md) | +| **Prep** | 1 week | Presentation preparation | [PRESENTATION.md](../tasks/angular-team-task/PRESENTATION.md) | + +### Weekly Code Review + +Each week the mentor must: + +1. **Review open Pull Requests** of your students before your weekly meeting. Follow the [PR review process](pull-request-review-process.md): + - Check PR format (description, screenshots, deployment URL, self-check). + - Clone the repo, build, and run the project. + - Verify linting and tests pass. + - Leave at least **3 meaningful comments** per PR — code quality, architecture, Angular best practices. +2. **Conduct a weekly meeting** (60–90 min, all students or 1-on-1): + - Discuss sprint topics and Angular concepts. + - Go over code review results and common mistakes. + - Answer questions, share tips on resume prep, Scrum, patterns, etc. +3. **Enter scores** into RS APP after reviewing the work. + +> **Deadlines for mentors:** Review student work within **1-3 days** of submission. The sooner the better. + +### Sprint Interviews (1 per Sprint = 4 Total) + +After each sprint deadline, the mentor conducts an interview with **one randomly assigned team** (the pair is formed in RS APP — this may not be your own team). + +**How it works:** + +1. After the sprint deadline, a **team ↔ random mentor** pair is formed. +2. The team contacts the mentor and schedules a call. +3. On the call, the mentor **speaks with each student individually** (~15–20 min per person). +4. The mentor evaluates: + - **Angular knowledge** — questions on the current sprint's topics. + - **Personal contribution** — what the student implemented, whether they can explain their own code. +5. The mentor submits a score for each student in RS APP. + +> **Important:** The call must take place **within 5 days** of the sprint deadline. If the team does not contact the mentor — the student receives **0** for that sprint. + +**Student eligibility:** Before the interview, the student must have: + +- Entries in the [development diary](../tasks/angular-team-task/DEVELOPMENT_DIARY.md) for the current sprint. +- Personally written code merged into `main`. + +**Points by sprint:** + +| Sprint | Max Points | Topic | +| ------------ | ---------- | ------------------------- | +| **Sprint 1** | 50 | Components | +| **Sprint 2** | 75 | Routing & Signals | +| **Sprint 3** | 125 | Directives, Pipes & Forms | +| **Sprint 4** | 150 | HTTP, RxJS & Testing | +| **Total** | **400** | | + +**Scoring guidelines:** + +| Level | ~% of Max | Indicators | +| ------------- | --------- | ----------------------------------------------------------------------------- | +| **Weak** | ~20% | Cannot explain code. Does not understand basic sprint concepts. | +| **Basic** | ~50% | Understands core concepts at a basic level. Struggles with details. | +| **Good** | ~80% | Confidently explains code and Angular concepts. Understands "why". | +| **Excellent** | ~100% | Deep understanding: trade-offs, approach comparisons, nuances (CD, DI, RxJS). | + +For detailed topic lists and example questions see [SCORE_PERSONAL.md](../tasks/angular-team-task/SCORE_PERSONAL.md). + +--- + +## Week 9+ — Final Interview & Feedback + +### Final Interview + +At the end of the course, the mentor conducts the **final Angular interview**. + +- **Pairs are formed randomly** in the RS School application — you will interview a student who is **not necessarily your own mentee**. +- The interview covers **all Angular topics** from the course: Components, Routing, Signals, Directives, Pipes, Forms, DI, Change Detection, HTTP, RxJS, Testing. +- Duration: ~40–60 minutes per student. + +### Leaving Feedback + +After the final interview, the mentor **must leave written feedback** on the student: + +- Strengths and areas for improvement. +- Level of Angular knowledge demonstrated. +- Recommendations for further learning. + +The feedback is submitted through RS APP and is visible to the student. + +--- + +## Summary Checklist + +| When | Mentor Action | +| ---------------------- | ---------------------------------------------------------------- | +| **Week 1** | Find mentees from Discord applications | +| **Week 1** | Conduct intro calls, confirm mentorship | +| **Week 1** | Introduce students to each other, create group chat | +| **Week 1** | Help students form teams (preferably from your own mentees) | +| **Week 1** | Explain task structure, diary, code standards | +| **Every week (W2–W8)** | Review student PRs (≥3 comments per PR) | +| **Every week (W2–W8)** | Conduct weekly meeting (60–90 min) | +| **After each sprint** | Conduct sprint interview with 1 random team (~15–20 min/student) | +| **After each sprint** | Submit personal scores in RS APP | +| **End of course** | Conduct final interview (random student pair) | +| **End of course** | Leave written feedback on the interviewed student | diff --git a/angular/tasks/angular-team-task/PROJECT_MUSIC.md b/angular/tasks/angular-team-task/PROJECT_MUSIC.md index 1d823f707..347636e77 100644 --- a/angular/tasks/angular-team-task/PROJECT_MUSIC.md +++ b/angular/tasks/angular-team-task/PROJECT_MUSIC.md @@ -141,7 +141,6 @@ The project uses its own backend for storing user content: playlists and uploade - Adding tracks via inline search: input field → results → "add" button. - A playlist must contain at least 1 track (validation). - Playlist deletion with confirmation. -- Data is saved locally (localStorage). ### 3. Recently Played (listening history) diff --git a/angular/tasks/angular-team-task/README.md b/angular/tasks/angular-team-task/README.md index cdd383862..ebf9def8a 100644 --- a/angular/tasks/angular-team-task/README.md +++ b/angular/tasks/angular-team-task/README.md @@ -9,13 +9,16 @@ - Gain experience in teamwork and code review. - Demonstrate what you have learned over 4 sprints. -**Each team chooses one of three projects:** +**Each team chooses one of three projects or proposes their own:** | Project | Description | API | | --------------- | ----------------------------------------------- | ------------------------------------------------------ | | **CryptoTrade** | Cryptocurrency analysis and trading application | [Binance Testnet](https://testnet.binance.vision/) | | **ShopFront** | Online store with catalog, cart, and checkout | [commercetools](https://docs.commercetools.com/api) | | **MusicFlow** | Music streaming service with search and player | [Jamendo API](https://developer.jamendo.com/v3.0/docs) | +| **Custom** | Your own project idea | Any public API of your choice | + +> **Custom project:** Teams are free to propose their own project as long as it satisfies the requirements of all four sprints (Components, Routing & Signals, Directives/Pipes/Forms, HTTP/RxJS/Testing). The project must be approved by your mentor before Sprint 1 starts. Detailed descriptions of each project, sprint requirements, and "Beyond API" features: **[PROJECTS.md](./PROJECTS.md)**. diff --git a/angular/tasks/angular-team-task/SPRINT1_CHECKPOINT.md b/angular/tasks/angular-team-task/SPRINT1_CHECKPOINT.md index 1cd5ca0a0..2d7ed9b03 100644 --- a/angular/tasks/angular-team-task/SPRINT1_CHECKPOINT.md +++ b/angular/tasks/angular-team-task/SPRINT1_CHECKPOINT.md @@ -21,18 +21,13 @@ The first sprint is the foundation of the entire project. The team must come tog All requirements met → 20 points, any requirement not met → 0. -### Team (done once per team) - 1. **Repository created on GitHub** — public, with a meaningful project name. 2. **Access shared with the course account** — add [rollingscopes](https://github.com/rollingscopes) as a collaborator with Read access. 3. **README.md filled in** — project name, short description (2–3 sentences), team members (name + GitHub link for each). 4. **Project initialized via Angular CLI** — `ng new` with TypeScript strict mode. The repository contains `angular.json`, `tsconfig.json` with `"strict": true`. - -### Individual (each member completes on their own) - -1. **At least 1 custom component created** — not `AppComponent`. The component uses `@Input()` or `@Output()`. Merged into `main`. -2. **At least 1 diary entry** — merged into `main` before the deadline. Location: `/development-notes/{github-username}/`. -3. **Entry contains summary and plan** — (a) what you worked on this sprint; (b) what you plan to do in Sprint 2. +5. **At least 1 custom component created** — not `AppComponent`. The component uses `@Input()` or `@Output()`. Merged into `main`. +6. **At least 1 diary entry by each team member** — merged into `main` before the deadline. Location: `/development-notes/{github-username}/`. +7. **Entry contains summary and plan** — (a) what you worked on this sprint; (b) what you plan to do in Sprint 2. --- diff --git a/angular/tasks/angular-team-task/SPRINT1_INTERVIEW.md b/angular/tasks/angular-team-task/SPRINT1_INTERVIEW.md new file mode 100644 index 000000000..5619ceb92 --- /dev/null +++ b/angular/tasks/angular-team-task/SPRINT1_INTERVIEW.md @@ -0,0 +1,78 @@ +# Sprint 1 Interview — Components (50 points) + +## Instructions for Mentors + +The interview takes **~15–20 minutes per student**. The goal is to evaluate two things: + +1. **Angular knowledge** — ask any questions from each module listed below. You do not need to ask every question — pick a few from each section to get a picture of the student's understanding. +2. **Personal contribution** — check what the student has done in the project (see [Project Questions](#project-questions) below). + +> **Important:** Students have only studied the topics listed in the [Sprint 1 "What to Study"](./SPRINT1_CHECKPOINT.md#what-to-study) section. Do **not** expect correct answers on topics from later sprints (Routing, Signals, Forms, HTTP, Testing, etc.). If a student demonstrates knowledge beyond Sprint 1 — great, but the absence of such knowledge should not lower the score. + +### Scoring + +| Level | ~% of 50 | Points | Indicators | +| ------------- | -------- | ------ | ------------------------------------------------------------------------- | +| **Weak** | ~20% | ~10 | Cannot explain their code. Does not understand basic sprint concepts. | +| **Basic** | ~50% | ~25 | Understands core concepts at a basic level. Struggles with details. | +| **Good** | ~80% | ~40 | Confidently explains code and Angular concepts. Understands "why". | +| **Excellent** | ~100% | ~50 | Deep understanding, compares approaches, explains trade-offs and nuances. | + +--- + +## Knowledge Questions + +### General + +1. What is Angular and what is it used for? +2. What is Angular CLI and what are its main features? +3. What is inter-component communication in Angular? Describe different ways of sharing data between components. + +### Angular CLI + +1. How do you create a new Angular project with `ng new`? What flags/options are useful? +2. How do you generate a component using angular cli? +3. What is the basic Angular project structure? What are `app.config.ts`, and `angular.json` responsible for? + +### Components + +1. What are standalone components? How do they differ from module-based components? +2. How do you configure a component's `selector`, `template`, and `styles` using the `@Component` decorator? +3. How does data binding work in Angular? Explain interpolation, property binding, and event binding. +4. What is the difference between one-way and two-way data binding? +5. What is Angular control flow? Describe `@if`, `@for`, and `@switch`. + +### Component Communication + +1. How do you pass data from a parent component to a child component using `input()`? +2. How do you emit events from a child component to a parent using `output()`? +3. When would you use `model()` instead of `input()` + `output()`? +4. How can components communicate through a shared service? +5. When should you use `input()`/`output()` vs a service for communication? +6. What is the difference between the signal-based `input()`/`output()` API and the legacy `@Input()`/`@Output()` decorators? + +### Signals (basics) + +1. What are Signals? +2. How to read and modify the value of a signal? +3. What is the main advantage of using signals instead of primitive values? + +### Lifecycle Hooks + +1. What are Angular lifecycle hooks? Name the main ones. +2. In what order are lifecycle hooks called? +3. What is `ngOnInit` used for? How does it differ from the constructor? +4. What is `ngOnDestroy` used for? Why is it important to clean up resources? +5. What is `ngOnChanges`? When is it called and what information does it provide? +6. What are `afterNextRender` and `afterEveryRender`? When would you use them instead of `ngAfterViewInit`? + +--- + +## Project Questions + +The mentor should also ask questions about the student's **personal contribution** to the project. Expect the student to: + +- Describe what they worked on during the sprint +- Navigate to their code and explain how it works +- Demonstrate understanding of the project structure and setup +- Explain decisions they made and challenges they faced diff --git a/angular/tasks/angular-team-task/SPRINT2_CHECKPOINT.md b/angular/tasks/angular-team-task/SPRINT2_CHECKPOINT.md index 4a1ca045c..350c9504f 100644 --- a/angular/tasks/angular-team-task/SPRINT2_CHECKPOINT.md +++ b/angular/tasks/angular-team-task/SPRINT2_CHECKPOINT.md @@ -27,21 +27,16 @@ Routing is impossible without services. In this sprint you will create full-fled All requirements met → 40 points, any requirement not met → 0. -### Team (+20) - 1. **Application is deployed** — the README contains a link to a working deployment (HTTP 200). Even a skeleton counts as a deployment. 2. **GitHub Actions workflow exists** — CI is set up (at least a linter). 3. **At least 6 issues in GitHub** — for work planning. 4. **Linter configured** — ESLint configuration in the repository. - -### Individual (+20) - -1. **At least 3 routes configured** — the application has page-to-page navigation. Merged into `main`. -2. **Lazy loading implemented** — at least 1 route is lazy-loaded via `loadComponent` or `loadChildren`. -3. **At least 1 Route Guard implemented** — `canActivate` or `canDeactivate`. Functional or class-based. -4. **Signals used in at least 2 components** — `signal()` and `computed()` or `effect()`. Merged into `main`. -5. **At least 2 services with `@Injectable()`** — injected via `inject()`. Merged into `main`. -6. **At least 1 diary entry for Sprint 2** — merged into `main`. +5. **At least 3 routes configured** — the application has page-to-page navigation. Merged into `main`. +6. **Lazy loading implemented** — at least 1 route is lazy-loaded via `loadComponent` or `loadChildren`. +7. **At least 1 Route Guard implemented** — `canActivate` or `canDeactivate`. Functional or class-based. +8. **Signals used in at least 2 components** — `signal()` and `computed()` or `effect()`. Merged into `main`. +9. **At least 2 services with `@Injectable()`** — injected via `inject()`. Merged into `main`. +10. **At least 1 diary entry for Sprint 2 by each team member** — merged into `main`. --- diff --git a/angular/tasks/angular-team-task/SPRINT2_INTERVIEW.md b/angular/tasks/angular-team-task/SPRINT2_INTERVIEW.md new file mode 100644 index 000000000..7d9cdfb98 --- /dev/null +++ b/angular/tasks/angular-team-task/SPRINT2_INTERVIEW.md @@ -0,0 +1,90 @@ +# Sprint 2 Interview — Routing & Signals (75 points) + +## Instructions for Mentors + +The interview takes **~15–20 minutes per student**. The goal is to evaluate two things: + +1. **Angular knowledge** — ask any questions from each module listed below. You do not need to ask every question — pick a few from each section to get a picture of the student's understanding. +2. **Personal contribution** — check what the student has done in the project (see [Project Questions](#project-questions) below). + +> **Important:** Students have studied topics from Sprint 1 and Sprint 2 only. The modules below cover Sprint 2 topics: Routing, Signals, Attribute Directives & Pipes (intro), and DI basics. Do **not** penalize students for lacking knowledge of topics from Sprint 3–4 (Forms, HTTP, RxJS, Testing, advanced DI, etc.). If a student demonstrates knowledge beyond Sprint 2 — great, but the absence of such knowledge should not lower the score. + +### Scoring + +| Level | ~% of 75 | Points | Indicators | +| ------------- | -------- | ------ | ------------------------------------------------------------------------- | +| **Weak** | ~20% | ~15 | Cannot explain their code. Does not understand basic sprint concepts. | +| **Basic** | ~50% | ~38 | Understands core concepts at a basic level. Struggles with details. | +| **Good** | ~80% | ~60 | Confidently explains code and Angular concepts. Understands "why". | +| **Excellent** | ~100% | ~75 | Deep understanding, compares approaches, explains trade-offs and nuances. | + +--- + +## Knowledge Questions + +### Routing + +1. What is Routing in Angular, and what is it used for? +2. How do you configure a basic routing system using? +3. How do you use route parameters and queryParams to pass and retrieve data in routes? +4. Can you provide an example of using child routes? +5. What are the preloading strategies, and how do you use them? +6. How do you use **Route Guards** (e.g., **CanActivate** and **CanDeactivate**) to protect routes? +7. In what order are route guards executed when multiple guards are applied to the same route? +8. What is **ActivatedRoute**, and how do you apply it to get information about the current route? +9. How do you handle lazy loading in routing? + +### Lazy Loading + +1. What is Lazy loading, and what is its purpose in Angular applications? +2. What are the advantages of using lazy loading in your application? +3. What is Preload strategy, and what are the main strategies used for preloading modules? +4. How do you debug lazy loading issues? + +### Signals + +1. How do we subscribe to a signal? +2. Can we read the value of a signal from a computed signal without creating a dependency? +3. Detecting signal changes with the effect() API. +4. What is the relation between Signals and change detection? +5. What is `linkedSignal` and when would you use it instead of `computed`? +6. How do you handle signal debugging? + +### Directives + +1. What are Directives in Angular, and what are they used for? +2. What types of directives do you know? +3. How do you create and use a custom directive? Explain the use of the `@Directive` decorator. +4. How do HostBinding and HostListener decorators work? +5. What is the difference between ElementRef and Renderer2? + +### Change Detection + +1. What is the change detection mechanism in Angular, and how do the Default and OnPush strategies differ? When is it better to use each one? +2. What types of change detection strategies exist in Angular and what is the difference between them? +3. What types of change detection exist in Angular and what is the difference between them? +4. What is the difference between `markForCheck()` and `detectChanges()`? +5. When does Angular re-check an OnPush component? + +### Components + +1. What are ViewChild and ViewChildren? + +### Dependency Injection + +1. What is Dependency Injection, and what are its objectives in Angular? +2. How do you create a service and use it in components for dependency injection? +3. What is the difference between _providedIn: 'root'_, _providedIn: 'any'_, and registering a provider in the "providers" section of NgModule? +4. How do you implement dependency injection for standalone components? +5. How can you reuse standalone components across different parts of your Angular application? + +--- + +## Project Questions + +The mentor should also ask questions about the student's **personal contribution** to the project. Expect the student to: + +- Describe what they worked on during the sprint +- Navigate to their code and explain how it works +- Show the running application and its features +- Explain decisions they made and challenges they faced diff --git a/angular/tasks/angular-team-task/SPRINT3_CHECKPOINT.md b/angular/tasks/angular-team-task/SPRINT3_CHECKPOINT.md index da286eb05..18e8bce14 100644 --- a/angular/tasks/angular-team-task/SPRINT3_CHECKPOINT.md +++ b/angular/tasks/angular-team-task/SPRINT3_CHECKPOINT.md @@ -26,15 +26,13 @@ In this sprint you will use `InjectionToken` / custom providers for the first ti All requirements met → 40 points, any requirement not met → 0. -### Individual (40 points) - 1. **At least 1 custom directive or pipe** — `@Directive()` or `@Pipe()` with meaningful usage in the project. Merged into `main`. 2. **At least 1 Reactive Form implemented** — with `FormGroup` and `FormControl`. At least 3 fields. Merged into `main`. 3. **Validation works** — at least 2 types of validators (e.g., `required` + `minLength` or a custom validator). Errors are displayed in the template. 4. **Form is functional** — on submit the data is processed (console output, sent to a service, navigation — any meaningful action). 5. **`InjectionToken` or custom provider** — `useValue`, `useFactory`, `useClass`, or `useExisting` in `providers`. Merged into `main`. 6. **At least 3 components use `OnPush`** — with `changeDetection: ChangeDetectionStrategy.OnPush`. Merged into `main`. -7. **At least 1 diary entry for Sprint 3** — merged into `main`. +7. **At least 1 diary entry for Sprint 3 by each team member** — merged into `main`. --- diff --git a/angular/tasks/angular-team-task/SPRINT3_INTERVIEW.md b/angular/tasks/angular-team-task/SPRINT3_INTERVIEW.md new file mode 100644 index 000000000..83f9df44c --- /dev/null +++ b/angular/tasks/angular-team-task/SPRINT3_INTERVIEW.md @@ -0,0 +1,94 @@ +# Sprint 3 Interview — Directives, Pipes & Forms (125 points) + +## Instructions for Mentors + +The interview takes **~15–20 minutes per student**. The goal is to evaluate two things: + +1. **Angular knowledge** — ask any questions from each module listed below. You do not need to ask every question — pick a few from each section to get a picture of the student's understanding. +2. **Personal contribution** — check what the student has done in the project (see [Project Questions](#project-questions) below). + +> **Important:** Students have studied topics from Sprints 1–3. The modules below cover Sprint 3 topics: Directives, Pipes, Forms, Content Projection, Change Detection (OnPush), and advanced DI. Do **not** penalize students for lacking knowledge of Sprint 4 topics (HTTP, RxJS, Testing). If a student demonstrates knowledge beyond Sprint 3 — great, but the absence of such knowledge should not lower the score. + +### Scoring + +| Level | ~% of 125 | Points | Indicators | +| ------------- | --------- | ------ | ------------------------------------------------------------------------- | +| **Weak** | ~20% | ~25 | Cannot explain their code. Does not understand basic sprint concepts. | +| **Basic** | ~50% | ~63 | Understands core concepts at a basic level. Struggles with details. | +| **Good** | ~80% | ~100 | Confidently explains code and Angular concepts. Understands "why". | +| **Excellent** | ~100% | ~125 | Deep understanding, compares approaches, explains trade-offs and nuances. | + +--- + +## Knowledge Questions + +### Directives + +1. What are Directives in Angular, and what are they used for? +2. What is the difference between structural and attribute directives? Please provide examples. +3. How do you create and use a custom structural directive? Explain the use of the `@Directive` decorator. How do you handle inputs of structural directive? +4. Explain **ngIf** and **ngFor** and their usage. +5. What is the purpose of **ngSwitch**, **ngSwitchCase**, and **ngSwitchDefault**, and how do you use them? +6. What is **ng-container** and what is it used for? Provide an example. +7. How do you create custom structural directives using **ng-template**? + +### Pipes + +1. What is a Pipe, and what is its purpose in Angular? +2. Can you provide examples of some built-in pipes (e.g., **date**, **uppercase**, **lowercase**)? +3. What is the difference between 'pure' and 'impure' pipes? How do they affect performance? +4. How do you use multiple pipes simultaneously? +5. How do you pass parameters to a Pipe to change behavior or format data? +6. What are the advantages of using Async pipes? How do you apply them with Observable or Promise? +7. How does the process of registering a custom pipe in a module occur? +8. How do you handle complex transformations in pipes? + +### Forms + +1. What is the difference between Template-driven Forms and Reactive Forms? +2. What are **FormControl**, **FormGroup**, and **FormArray** in the context of Reactive Forms? +3. What are the differences in working with validation for Template-driven Forms and Reactive Forms? +4. How do you implement custom validators for forms? +5. How can you retrieve and process data from forms after submission? +6. What is two-way data binding in the context of Template-driven Forms? +7. How do you use FormBuilder to create reactive forms using convenient and shorter syntax notation? +8. How do you track the change state of forms or form controls? +9. How do you handle asynchronous validation? + +### Components + +1. What is `ViewEncapsulation` and what modes are available (`Emulated`, `None`, `ShadowDom`)? When would you use each? +2. What is the `host` property in `@Component` and how do you use it to bind classes, attributes, or listeners? +3. What is the difference between using `host` in the decorator vs `@HostBinding`/`@HostListener`? +4. What are `exportAs` and `providers` options in the `@Component` decorator used for? +5. What is `ng-content` and why is it needed? +6. How do you use `ng-template` for reusable components? +7. When do you use `@ContentChild` `contentChild` / `@ContentChildren` `contentChildren`? +8. What is a `ngTemplateOutlet` and how do you use it? + +### Modules + +1. What is a Module in Angular, and what role does it play in an application? +2. Can you explain the structure of a module and its metadata? +3. How can you separate functionality into different modules and connect them to the main application module? + +### Dependency Injection + +1. What are **useClass**, **useValue**, and **useFactory**? How are they used when creating providers? +2. Explain the concept of Injector and provider hierarchy. +3. What is a DI token, and how do you use it for dependency injection? +4. How do you use **@Optional**, **@Self**, and **@SkipSelf** decorators to control dependency injection and their handling? +5. How do you inject dependencies based on conditions or by different provided implementations? +6. What is a multi-provider and how do you configure it? +7. What is `forwardRef` and when do you need to use it? + +--- + +## Project Questions + +The mentor should also ask questions about the student's **personal contribution** to the project. Expect the student to: + +- Describe what they worked on during the sprint +- Navigate to their code and explain how it works +- Show the running application and its features +- Explain decisions they made and challenges they faced diff --git a/angular/tasks/angular-team-task/SPRINT4_CHECKPOINT.md b/angular/tasks/angular-team-task/SPRINT4_CHECKPOINT.md index 97d6c3457..c261e4ebc 100644 --- a/angular/tasks/angular-team-task/SPRINT4_CHECKPOINT.md +++ b/angular/tasks/angular-team-task/SPRINT4_CHECKPOINT.md @@ -25,20 +25,15 @@ Most Angular applications communicate with a backend via HTTP. Angular's `HttpCl All requirements met → 40 points, any requirement not met → 0. -### Team (+20) - 1. **404 page** — navigating to a non-existent URL displays a meaningful page with a way to navigate back. 2. **Loading state** — a loading indicator (spinner, skeleton, text) is shown while data is being fetched. 3. **API error handling** — API requests are wrapped in error handling. On a network error the user sees a clear message. 4. **Video proof** — a short video (~1 min) demonstrating the 404, loading, and error states. Video link in the README. - -### Individual (+20) - -1. **HttpClient is used** — at least 2 HTTP requests (GET + POST/PUT/DELETE) to a real or mock API. Merged into `main`. -2. **At least 1 HTTP Interceptor implemented** — for auth token, logging, error handling, or any other purpose. -3. **At least 5 tests written personally by you** — `*.spec.ts` files. Total ≥5 test cases (`it`). Authorship is determined by commits (`git blame`). -4. **Code Review** — **Option A:** ≥3 meaningful comments in team PRs. **Option B:** a diary entry about how you studied another team member's code. -5. **At least 1 diary entry for Sprint 4** — merged into `main`. +5. **HttpClient is used** — at least 2 HTTP requests (GET + POST/PUT/DELETE) to a real or mock API. Merged into `main`. +6. **At least 1 HTTP Interceptor implemented** — for auth token, logging, error handling, or any other purpose. +7. **At least 15 test cases written** — `*.spec.ts` files. Total ≥15 test cases (`it`). Authorship is determined by commits (`git blame`). +8. **Code Review** — **Option A:** ≥3 meaningful comments in team PRs. **Option B:** a diary entry about how you studied another team member's code. +9. **At least 1 diary entry for Sprint 4 by each team member** — merged into `main`. > **Diary:** no diary — 0 for the entire checkpoint. diff --git a/angular/tasks/angular-team-task/SPRINT4_INTERVIEW.md b/angular/tasks/angular-team-task/SPRINT4_INTERVIEW.md new file mode 100644 index 000000000..bdf274fa2 --- /dev/null +++ b/angular/tasks/angular-team-task/SPRINT4_INTERVIEW.md @@ -0,0 +1,95 @@ +# Sprint 4 Interview — HTTP, RxJS & Testing (150 points) + +## Instructions for Mentors + +The interview takes **~15–20 minutes per student**. The goal is to evaluate two things: + +1. **Angular knowledge** — ask any questions from each module listed below. You do not need to ask every question — pick a few from each section to get a picture of the student's understanding. +2. **Personal contribution** — check what the student has done in the project (see [Project Questions](#project-questions) below). + +> **Note:** This is the final sprint. Students have studied all course topics (Sprints 1–4). The questions below focus on HTTP, RxJS, Testing, and modern Angular features, but you may also ask about earlier topics to check retention. The student should have a comprehensive understanding of Angular by this point. + +### Scoring + +| Level | ~% of 150 | Points | Indicators | +| ------------- | --------- | ------ | ------------------------------------------------------------------------- | +| **Weak** | ~20% | ~30 | Cannot explain their code. Does not understand basic sprint concepts. | +| **Basic** | ~50% | ~75 | Understands core concepts at a basic level. Struggles with details. | +| **Good** | ~80% | ~120 | Confidently explains code and Angular concepts. Understands "why". | +| **Excellent** | ~100% | ~150 | Deep understanding, compares approaches, explains trade-offs and nuances. | + +--- + +## Knowledge Questions + +### HTTP + +1. What is HttpClientModule, and why is it important in Angular applications? +2. How can you make HTTP requests using Angular's **HttpClient**? +3. Can you explain the difference between Observables and Promises in handling HTTP responses? +4. How can you handle errors during HTTP requests in Angular? +5. What are some techniques to optimize HTTP requests and handle caching considerations for Angular applications? +6. What is the purpose of **HttpInterceptor** in Angular, and how does it work? +7. In which scenarios would you consider using an interceptor for error handling in an Angular application? +8. How do you handle authentication and authorization with HTTP interceptors? + +### RxJS + +1. Define the concept of RxJS and its usage in Angular. +2. What are _Observable_, Observer, and Subscriptions? +3. What is the difference between Observable and Promise? +4. Can you provide examples of basic RxJS operators in Angular? +5. How do you create a Custom Observable using the new Observable method and manage the data passed into the stream? +6. What are Subject and BehaviorSubject, and how are they used in Angular? +7. How would you explain the concepts of **_Hot_** and **_Cold_** Observables? +8. How do you properly unsubscribe from an Observable? +9. What are the different approaches to state management in Angular? What are the benefits of using service-based methods versus NgRx or other state management libraries? +10. How do you handle error handling and retry logic with RxJS? +11. What is the difference between higher-order mapping operators? + +### Forms + +1. What is `ControlValueAccessor` and when do you need to implement it? +2. How do you create a custom form control that integrates with Angular's Reactive Forms? +3. How do you create a custom validator for template-driven forms? + +### Testing + +1. What types of Testing does Angular support (e.g., unit tests, integration tests, e2e tests)? +2. What are the main tools and libraries used by Angular for testing? +3. What is **TestBed**, and how is it used to set up a testing environment? +4. How do you test Angular components using **ComponentFixture** and **DebugElement**? +5. How do you test directives and pipes in Angular? +6. How do you mock and stub dependencies in tests for services? +7. How do you test forms based on templates and reactive forms? +8. What are async, **fakeAsync**, and **tick**, and how are they used when testing asynchronous code? +9. How do you ensure your tests are isolated and do not interfere with each other? + +### Dependency Injection + +1. How does the Angular injector hierarchy work? +2. How do you scope a service to a specific component subtree? +3. How does tree-shaking work with `providedIn: 'root'` vs explicit providers? +4. What are environment injectors and how do they differ from element injectors? + +### Signals + +1. What is the `resource` API and how does it simplify asynchronous data fetching with signals? +2. What is the difference between `resource` and `rxResource`? + +### Components + +1. How do you handle dynamic components? +2. What is `ngComponentOutlet` and when to use it? +3. What are deferrable views (`@defer`) and how do they improve performance? + +--- + +## Project Questions + +The mentor should also ask questions about the student's **personal contribution** to the project. Expect the student to: + +- Describe what they worked on during the sprint +- Navigate to their code and explain how it works +- Show the running application and its features +- Explain decisions they made and challenges they faced diff --git a/angular/tasks/find-mentor/README.md b/angular/tasks/find-mentor/README.md index 311546ae7..7743fa3ce 100644 --- a/angular/tasks/find-mentor/README.md +++ b/angular/tasks/find-mentor/README.md @@ -26,4 +26,6 @@ About me: The mentor will reach out to you directly via Discord or Telegram. +> **Be prepared:** During the introductory conversation the mentor may ask questions to assess your knowledge of JavaScript, TypeScript, and Angular fundamentals. Based on your answers, the mentor will decide whether to take you on as a mentee. Treat this conversation as a short screening interview. + ---