rodion-arr/js-fullstack-practice

A project for practicing Fullstack JS technologies (Angular 12 + NodeJS-based API + DevOps CI/CD/Monitoring)

Full stack JS practice project

A project for practice Fullstack JS technologies

Summary of used technologies:

• Front-end (Angular 12/TypeScript/SASS/CSS Flex/CSS Grid/Angular Material/Jasmine)
• Back-end (Node.js/TypeScript/Express/Mongoose/Jest/Cluster)
• Infra (Docker/GitHub Actions/CI/Codecov/DependaBot/Prometheus/Grafana)

How to run

Development run

Run project locally (tested on Docker Desktop v19)

cd ".docker"
docker-compose up -d mongodb backend frontend #run project services with no monitoring
docker-compose exec backend migrate-mongo up #run migrations
open http://localhost:4200 # open project's frontend

docker-compose up -d prometheus grafana #run monitoring
open http://localhost:3000 # open grafana

Run tests

docker-compose exec frontend ng test --watch=false
docker-compose exec backend npm test

Production run

cd ".docker"
docker-compose -f docker-compose.yml -f docker-compose.prod.yml up mongodb backend frontend -d
open http://localhost

Unit tests will be run automatically during docker image build

Frontend

• Smart containers/Dummy components pattern
• Module organization: core, shared, feature - #3
• Templates
  • Angular Material - #2
  • Angular Flex - example - plates.component.html
  • SASS for styling - example - footer.component.sass
  • Build custom pipe - #13
  • Build custom directive - #14
  • Reactive forms - #30
• Routing
  • Lazy loaded modules - #16
  • Route guard - #18
  • Route resolver
• Async operations
  • NgRx for store
    • Dedicated Store module - #31
    • CRUD with entities
  • HttpClient for all async call
  • Build HttpInterceptor
• Unit tests
  • Karma, Jasmine - example with Material BreakpointObserver mock - top-menu.component.spec.ts
• Keeping up-to-date
  • Upgrade to Angular 9 - #29
  • Upgrade to Angular 10 - #200
  • Upgrade to Angular 11 - #305
  • Upgrade to Angular 12 - #321
• CSS Grid - #47

Backend

• NodeJs API
• Express - app.ts
  • Router - #216
• TypeScript - #39
• MongoDB - #35
  • Mongoose - #41
  • DB Migrations - #42
• Graceful shutdown - #199
• Auth

DevOps

• Use docker containers
  • Frontend image for development - #1
  • Backend image for development - NodeJS in container
• CI
  • Setup GitHub actions - #10
  • Run tests - Running in docker build
  • Publish coverage report - Integrated with Codecov
• CD
  • Frontend image for deployment - Production Docker image
  • Backend images for deployment - Production NodeJS Docker image
  • Push to dockerhub
• Monitoring
  • Prometheus + Grafana - #246