A full-stack Pong game with extensive features built as the final project of 42's Common Core . Developed with Fastify (Node.js), TypeScript, Tailwind, and an SQLite-backed microservice architecture, the project combines gameplay, user management, modern web design, blockchain integration, and 3D graphics.
It includes customizable gameplay, an AI opponent, 3D visual enhancements, tournament score storage on the Avalanche blockchain, and structured log management infrastructure. Designed with scalability and modularity in mind!
Make sure you have docker and make installed on your machine. Then, clone this repository and run:
makeThis will display a list of available commands. For a first run, simply run:
make upThis will create a default .env file, build the Docker images and start the containers.
If you don't have a clue how anything works, this very simple pong game gives a good idea of the basic stuff:
https://www.geeksforgeeks.org/javascript/pong-game-in-javascript/
Code is written in TypeScript. Browser only understands JavaScript, so the TypeScript code is compiled to JavaScript thanks to Docker.
HTML page styled with CSS allows to introduce the different pages & elements of the website.
The drawing and physics of the pong game on a canvas is also done with TypeScript (pong.ts)
Using Docker, we can build a Docker Image with nginx and all the frontend files copied inside.
Implemented Tailwind!
Why Tailwind?
Allows us to style things more easily. Instead of having a long CSS file, we can write the details directly in HTML:
HTML
<button className="px-6 py-2 bg-stone-800 text-white rounded-xl shadow hover:bg-blue-500">
Start Game
</button>
-> No need to open/edit a separate stylesheet.
-> Styles are consistent across components.
-> Easy to prototype and keep the UI responsive.
We also have access to pretty cool-looking fonts (downloaded from Google Fonts [see styles.css + tailwind.config.js])
-
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API (the Canvas API is used to draw the pong game)
-
https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API
-
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
-
https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API
-
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model