# Code Review Instructions

## Summary

When conducting a code review, follow these steps to ensure a thorough and constructive process.  
**Ensure that all review guidelines are followed. If any guideline is not adhered to, make it explicitly clear which guideline needs to be followed.**

## Review Process

1. 🎯 **Key Issues**  
   Identify critical issues in the code such as bugs, security vulnerabilities, or violations of the project's coding standards.  
   _Include specific links to files and line numbers (e.g., file.js#L10) where applicable._

2. 💡 **Suggestions for Improvement**  
   Highlight areas where the code can be enhanced in terms of readability, performance, maintainability, or adherence to best practices.  
   _Clarify what constitutes a "Critical" versus a "Minor" issue to avoid ambiguity._

3. ✨ **Code Examples**  
   Provide specific, concise code snippets that illustrate your suggestions.  
   _Include both a "Before" (problematic code) and an "After" (improved version) example where beneficial._

4. 📚 **Relevant Documentation Links**  
   Attach links to useful resources or official documentation to support the suggested changes.  
   _For example, link to ESLint, Jest, or Angular Style Guide pages when relevant._

## Tone and Feedback

- Be constructive and supportive.  
  Frame suggestions as opportunities for growth rather than criticism.
- Use the following emojis to categorize your feedback:
  - 🚨 **Critical issues**
  - ❗ **Minor Issues**
  - ⚠️ **Warnings**
  - 💡 **Suggestions**
  - ✅ **Good practices**

## Additional Informations

- Missing tests and JSDocs are minor issues
- Missing unit test are minor issues
- Missing End-to-End (E2E) Testing Attributes (`data-what`, `data-which`) are warnings

### Review Template

````markdown
# Code Review

## Summary

A brief overview of the code’s overall quality, highlighting key strengths and areas needing attention. This sets the stage for the detailed feedback below.

---

## 🚨 Critical Issues

High-priority issues that must be addressed immediately due to their potential to severely impact functionality, performance, or security.

### 1. High Priority: [Issue Title]

#### 🚨 Issue

Describe the issue clearly, including links to specific files and lines (e.g., file.js#L10). Explain why it’s critical—highlight crashes, security risks, or significant performance issues.

#### 💡 Suggestions for Improvement

Provide specific steps or alternative approaches to resolve the issue.

#### ✨ Code Example

**Current**: [file](file.js#L10) Problematic code with path to the file and line of the code

```typescript
// Code...
```

**Improvement**: Improved version

```typescript
// Code...
```

#### 📚 Relevant Documentation

Include URLs for further research (e.g., [Jest Documentation](https://jestjs.io/docs/getting-started)).

---

## ❗ Minor Issues

Issues that can improve code quality, maintainability, or adherence to best practices when resolved.

### 1. Medium Priority: [Issue Title]

#### ❗ Issue

Describe the issue clearly, including file and line references (e.g., file.js#L10). Explain the impact on the project.

#### 💡 Suggestions for Improvement

Offer concrete steps or alternative approaches to mitigate the issue.

#### ✨ Code Example

**Current**: [file](file.js#L10) Problematic code with path to the file and line of the code

```typescript
// Code...
```

**Improvement**: Improved version

```typescript
// Code...
```

#### 📚 Relevant Documentation

Provide links to further resources.

---

## ⚠️ Warnings

Low-priority issues or suggestions that could help prevent future problems or improve the code quality over time.

### 1. Low Priority: [Issue Title]

#### ⚠️ Issue

Describe the issue clearly with references (e.g., file.js#L10). Explain the potential impact if left unaddressed.

#### 💡 Suggestions for Improvement

Provide suggestions or alternative implementations to mitigate the issue.

#### ✨ Code Example

**Current**: [file](file.js#L10) Problematic code with path to the file and line of the code

```typescript
// Code...
```

**Improvement**: Improved version

```typescript
// Code...
```

#### 📚 Relevant Documentation

Include relevant resources for more information.

---

## 🛑 Bad Practices

Highlight up to five bad aspects of the code to reinforce improvements and encourage good practices. Use different funny emoji at the beginning of each bad practice.

- Emoji **Bad Practice 1**:  
   Describe a specific weakness (e.g., clear code structure) with an example reference (e.g., file.js#L20). Explain why it’s bad.
- Emoji **Bad Practice 2**:  
   Outline another negative feature (e.g., effective error handling) with a snippet reference.

---

## ✅ Good Practices

Highlight up to five positive aspects of the code to reinforce well-implemented patterns and encourage good practices. Use different funny emoji at the beginning of each good practice.

- Emoji **Good Practice 1**:  
   Describe a specific strength (e.g., clear code structure) with an example reference (e.g., file.js#L20). Explain why it’s commendable.
- Emoji **Good Practice 2**:  
   Outline another positive feature (e.g., effective error handling) with a snippet reference.

---

## 📓 Additional Notes

- **General Feedback**: Optional thoughts regarding the overall quality or potential areas for future improvement.
- **Next Steps**: Outline follow-up actions or further examination areas as needed.
````