Angular 22 Machine Coding

Angular 22 interview practice project.

Live Demo

https://mkv-mkverma.github.io/Angular-22-machine-coding/

Sonar

https://sonarcloud.io/summary/overall?id=mkv-mkverma_Angular-22-machine-coding&branch=main

Sentry

https://manish-7e.sentry.io/issues/?project=4512096706822144

Topics Covered

• RxJS
• Signals
• Resource API
• Machine Coding
• Angular 22
• GitHub Actions
• GitHub Pages

Documentation

• 📘 GitHub Pages Deployment
• 📘 GitHub Actions Guide
• 📘 AWS S3 Deployment
• 📘 Interview Questions

Run Project

npm install
ng serve

Build

ng build

Code Quality and Pre-commit Checks

This project uses ESLint and Husky to catch common issues before code is committed.

One-time setup

npm install --save-dev husky
npx husky init
ng add angular-eslint
npm install @sentry/angular

• husky lets the repository run scripts during Git actions, such as git commit.
• npx husky init creates the .husky/pre-commit hook and adds the prepare script so hooks are installed after npm install.
• ng add angular-eslint configures Angular ESLint and adds the ng lint command.

What happens on commit

The .husky/pre-commit hook runs:

npm run lint
npm test

The commit is stopped if linting or tests fail. This prevents avoidable problems—such as unused imports, unsafe types, formatting issues caught by ESLint, or a broken unit test—from entering the Git history.

npm test runs once with ng test --watch=false, so Git can continue after the checks complete. While developing, use npm run test:watch to rerun tests whenever files change.

Fix lint issues automatically

npx ng lint --fix

This fixes rules ESLint can safely correct automatically. Review the changes and resolve any remaining lint errors before committing.

git fetch origin # update local knowledge of GitHub branches git merge origin/main # bring latest main changes into your feature branch

Squash and merge — combines all 11 PR commits into one clean commit on main. Best choice here; it keeps main history tidy.

Create a merge commit — retains all 11 commits and creates an additional “merge” commit that joins your branch with main. Useful when you want to preserve the branch’s exact history.

Rebase and merge — replays the 11 commits one-by-one on top of the latest main, with no merge commit. Keeps a linear history, but changes commit hashes.

Upcoming

1. Enhance Google Analytics Events
2. Telemetry sentry (DONE)
3. AWS S3 + Jenkins CI/CD
4. Protect Guards - bug
5. New Auth
6. Playwright
7. Header, Footer Lib

Structure

• core → infrastructure
• features → application functionality
• playground → practice
• shared → reusable UI
• docs → explanations/notes