Knowledge Base - KonstantinosLamprakis/42_ft_transcendence GitHub Wiki

Project structure

pong-tournament-root/
├── backend/
│   ├── auth-service/            # Auth microservice (Google OAuth + JWT + 2FA)
│   ├── game-service/            # Game engine microservice (Pong logic, scoring)
│   ├── chat-service/            # Real-time chat microservice (WebSocket support)
│   ├── api-gateway/             # API gateway aggregating microservices, SSR renderer
│   ├── monitoring/              # Prometheus config + Grafana dashboards
│   ├── logging/                 # ELK stack config (Docker + pipelines)
│   └── common/                  # Shared code (utils, types, DB schema)
│
├── frontend/
│   ├── public/                  # Static assets (icons, fonts)
│   ├── src/
│   │   ├── index.ts             # Main TS entrypoint
│   │   ├── app.ts               # SPA bootstrap + routing
│   │   ├── components/          # UI components (vanilla TS)
│   │   └── styles/              # Tailwind CSS config and styles
│   └── tailwind.config.js
│
├── docker-compose.yml           # Orchestrate all microservices + ELK + Prometheus + Grafana
└── README.md

Commands

• npm install:
  • installs node dependencies from package.json
  • npm install : this will also update your package.json with this spesific package
  • generates package-lock.json which locks the versions of your packages to ensure they will be the same every time npm install runs and setup the project. This should NOT be on .gitignore as it helps everyone work with same packages to avoid inconsistencies
• npm start: runs the "special" script called start, as starting poing of your app
• npm run "script_name": runs the script from package.json
• docker-compose up --build

package.json

• a crucial file in any Node.js
• defines project metadata (name, version, description, etc.)
• lists dependencies
• specifies scripts to automate common tasks like building or starting your app
• elps manage versions and makes your project portable and shareable
• tsc: typescript compiler to js, usually in a folder dist/
• ts-node: compile typescript during excecution, on the fly. Great for dev, but not for prod due to lack of performance and stability.
• Semantic Versioning (SemVer)?
  • X.Y.Z:
    • X is major change API backward incompatible
    • Y is minor change API backward compatible
    • Z is minor patch API backward compatible

tsconfig.json

• a file for tsc, the typescript compiler

Single Page Application (SPA)

• a web app that loads a single HTML page and dynamically updates the content as the user interacts with the app—without reloading the entire page
• JavaScript updates the page content and UI dynamically, usually by manipulating the DOM or using frameworks like React, Vue, Angular, etc
• No full page reloads: Navigation between “pages” happens within the app, no full page refresh needed
• Faster and smoother user experience: Because you avoid the repeated loading of entire HTML pages

Server-Side Rendering (SSR)

• web pages are rendered on the server before being sent to the browser
• instead of sending a mostly empty HTML shell and loading content with JavaScript (like in a Single Page Application), the server generates the full HTML page and sends it to the client
• browser receives a fully rendered page ready to display immediately
• after the initial load, JavaScript can take over to make the page interactive (this is often called hydration).
• examples: Next.js (React), Nuxt.js (Vue)

Cross-Origin Resource Sharing (CORS)

• server decides who can access its resources from a different origin and browser applies these rules
• how does CORS work?
  • the browser sends an HTTP request to a different origin
  • the server responds with special CORS headers that say who is allowed to access
  • the most important header is Access-Control-Allow-Origin
  • if the server allows the requesting origin, the browser lets the frontend JavaScript read the response
  • if not allowed, the browser blocks the request, and you get a CORS error in the consolei
• an extra use case:
  • browsers enforce a Same-Origin Policy to protect users — meaning scripts on a web page can only make requests to the same domain, protocol, and port the page was loaded from
  • without CORS, a web page from https://example.com can’t normally request data from https://api.example2.com
  • CORS relaxes this restriction in a controlled way, allowing servers to specify who can access their resources

Docker:

• Docker deamon (also called docker engine): Is the core of docker, responsible to deal and deploy with all containers. Docker desktop is just a wrapper for it which offers also other things like GUI, cli client etc. The important thing is docker desktop(and alternatives e.g. colima) is runs docker engine out of the box, inside VM which is mandatory for MAC OS and Windows but not for linux.
• Docker CLI: a CLI client to access and handle the docker deamon
• Docker containers: the actual containers you want to deploy. Could be deployed on other software alternatives rather than docker engine.

Useful docker commands:

sudo systemctl start docker
sudo systemctl stop docker
sudo systemctl disable docker
sudo systemctl enable docker
sudo systemctl restart docker
sudo systemctl status docker