ilahyani / ft_transcendence

Multiplayer online pong game webapp

PONG CLUB

IT'S LEVELS IT'S LAYERS SO PRAY FOR THE PLAYERS 🎮

What and How

This project encompasses a web-based multiplayer pong game, complete with user profiles, achievements, direct messaging, and channels. It also allows for one-on-one pong matches with friends or randomly selected opponents. The frontend is crafted using Next.js and Tailwind CSS, while the backend utilizes Nest.js with Socket.IO. PostgreSQL, in conjunction with Prisma, serves as the database. The entire project is containerized within a Docker environment.

Shots

Check the whole project in Figma Designed By ilahyani

How To Run The Application

first you need a .env file in /backend with the following variables:

42_UID
42_SECRET
42_CALLBACK_URI

POSTGRES_DB
POSTGRES_USER
POSTGRES_PASSWORD
DATABASE_URL

JWT_SECRET

Running Locally

To run the frontend and backend locally, follow these steps:

1. Run the database:

docker-compose up database --build

2. In a new terminal, navigate to the frontend directory and install the dependencies:

cd frontend
npm install -f

Make sure the backend_host env in in /fronetend/.env.local is set to the right value

3. Start the frontend:

npm run dev

4. In a new terminal, navigate to the backend directory and install the dependencies:

cd backend
npm install -f

5. Start the backend:

npm run start:dev

Running with Docker

To run the application with Docker, set the backend_host env in /fronetend/.env.local to the right value then use this:

docker-compose up --build

You can also use the Makefile:

make

Here are the available commands:

• make : Builds and starts the Docker containers.
• make down: Stops and removes the Docker containers.
• make clean: Stops the Docker containers and removes the Docker images and volumes.
• make re: Runs make clean and then make up.
• make fclean: Runs make clean and then removes all Docker objects and cache.

If you want to try the application without using Intra for login, run this command in /backend to create a test account

npm run db:populate

Then login with these credentials: username: Mugiwara | password: aBcd!123

ft_transcendence's Issues

Need to refresh after login

Enable TFA -> logout -> login -> enter TFA code -> it gives you a blank page and you need to refresh to see your profile

Refresh always takes you back to profile

Wherever you're in the app, when you refresh the page it takes you back to the profile

Can't leave game

on random match (maybe on friend match too! didn't test) Leave Game not working for one player

Game score not accurate

Game Score not accurate, game finished 5 - 4 and database records 6 - 5 (it adds one to each)