paolocattani / calcetto

Calcetto Webapp

Calcetto : Table football app manager

Application diagram

Frontend

• Reactjs
• Typescript
• Routing : React Router
• Style :
  • Framework : Bootstrap 4
  • Icons : Fontawesome 5
  • Notifications : React Toastify
  • Tables : React Bootstrap Table
• State Managment :
  • Redux
  • Middleware : Saga
  • Persistance : Redux Persist
    • Storage : Localforage
• Internationalization : i18next
  • React implementation
  • Language Detector
  • Load Resources
• Swagger
  • Swagger UI
  • Open API 3
• Misc :
  • Jokes
• Test :
  • Jest
  • Ts-Jest
  • React Testing Library

Backend

• Express
  • cookie parser
  • helmet
  • web token
  • nodemon
  • concurrently
  • bcrypt
• ORM :
  • Sequelize
  • Sequelize typescript
• Db :
  • Postgres
• Logger :
  • Log4js
• Dev
  • Nodemon
• Detect memory leak
  • MemWatch
  • Node inspector

Test

• Jest
• Ts-Jest
• Supertest
• E2E : Cypress
  • Run Cypress on WSL2
  • Ubuntu on WSL2
  • Cucumber :
    • Integrate Cypress and Cucumber
  • UI Testing Best pratictices

Cli

• sed
• sed & awk
• grep, awk, sed
• Git Hooks

Heroku

• Plugins :
  • heroku-builds

GitHub Action

• Test actions locally

Development

Backend runs with nodemon and ts-node to enable live reload along with typescript compilations. Frontend is bootstraped with CRA.

# Together
npm run dev

# Detached
npm run dev:server
npm run dev:client

# Bundle size
npm run analyze

# Eslint report ( used by Sonarcloud )
npm run lint:report

Connect to redis

redis-cli -h localhost -p 6379

Cli

Cli utilities for development

# Show help
./cli/cli.sh help

# Examples.

  # Build all and install production dependencies
  ./cli/cli.sh build --all --install

  # Update app version
  ./cli/cli.sh release --patch
  
  # Tag current commit with version from package.json ( also update heroku env vars )
  ./cli/cli.sh tag

  # Deploy current branch to heroku
  ./cli/cli.sh heroku --deploy

  # Create docker image and push it to Github container registry
  ./cli/cli.sh docker --build --push

  # Enable git hooks and set type ( for update version ) as minor
  ./cli/cli.sh hooks --enable --hook pre-commit --type minor

Test

# Frontend unit test
npm run CRA:test

# Coverage
npm run test:coverage

Production

# Build all ( see cli )
./cli/cli.sh build --all

# Run server in production mode
npm run prod

Heroku

# Login
heroku login

# List builds
heroku builds -a $APP_NAME

# Cancel pending build
heroku builds:cancel $ID -a $APP_NAME

Guides

• SSE - Server Sent Events : express-sse
• IIFE : a trick to use async function inside not async functions

---

• Test : E2E - jest-test-express-react

• Test : Redux - Test connected component

• Test : React Testing library

• Test : Redux + Router

• Test : Enzyme - Shallow/Mount/Render

• Test : Enzyme Testing FC

---

• Shell : sed - Substitute variable using sed

Topic to explore

• Sonar typescript:S4784
• Memory leak