Year
Tech Stack
Description
For the last 42 Common Core project, my team built a full-stack Pong platform instead of a small game demo. It has single-player, multiplayer, round-robin tournaments, profiles, stats, friends and settings.
The frontend was the part I spent the most time on: a native TypeScript SPA with React-like components, client-side routing and explicit state updates. No React, no Vue, no framework safety net.
My Role
I built and wired most of the frontend structure, real-time screens and gameplay flows as part of a three-person team.
My work sat where the browser meets the backend and the game itself: routing, UI state, notifications, WebSocket updates, canvas rendering and Pong interactions connected to services for auth, users, friends and game data.
Case Study
Summary
My 42 Lyon capstone: a Dockerized real-time Pong platform with a custom TypeScript SPA, Fastify services, WebSocket gameplay, tournaments, user profiles and monitoring.
Context
ft_transcendence is the final web project in the 42 Common Core. The assignment expects a real multiplayer web app, with accounts and social flows, not just a canvas with a paddle.
Frontend frameworks were forbidden, which made the project much more useful for me. I had to build the pieces I usually get from React and understand why they exist.
Problem
The hard part was keeping the game responsive while the rest of the product still behaved like a normal app: accounts, profiles, friends, settings, stats and tournament screens all had to fit around the match flow.
We also had to build the actual Pong game in the browser: canvas dimensions, ball movement, paddle hitboxes, collision behavior and the small details that decide whether a match feels fair or broken.
Because we couldn’t use React or a similar framework, I had to make lifecycle, rendering, state changes and routing explicit in TypeScript. That exposed every shortcut.
Contributions
Built a native TypeScript single-page app with component classes, lifecycle methods and reusable UI pieces.
Worked on the web canvas game layer, including match dimensions, ball behavior, paddle hitboxes, collisions, AI player and gameplay states.
Connected game and social flows through WebSocket updates, route-level UI states and toast notifications that users could actually act on.
Helped ship Pong across single-player, multiplayer and tournament modes, including an algorithmic AI opponent.
Technical Decisions
We split backend responsibilities into services for authentication, users, friends, game data and gateway concerns.
We used Docker Compose with Fastify, SQLite, Prometheus, Grafana and OpenTelemetry so the whole platform could run the same way on each machine.
On the frontend, I copied the useful parts of modern component architecture in plain TypeScript: predictable rendering, explicit state updates and route-owned UI.
Result
We delivered a complete real-time game platform with account management, social features, match flows, tournament support and monitoring.
I came out of it much more comfortable with WebSocket UX, Dockerized services and the frontend mechanics that frameworks normally hide.