achrafelkhnissi / ft_transcendence

ft_transcendence is a web application platform for users to play Pong with others in real-time multiplayer online games. The project includes features such as user authentication, user profiles, a chat system, and game functionality.

PongTime

Project developed at 1337 Khouribga coding school.
Authors: @fathjami & @achrafelkhnissi & @zsarir

---

Table of Contents

• Table of Contents
• Introduction
• Authors
• Technologies
• Features
• Usage
• Screenshots

Introduction

PongTime is a simple web application platform that allow users to play classic ping-pong with other users in real-time.

Authors

• Fathiya Olatokunbo Jamia - Frontend & UX/UI Design
• Achraf El Khnissi - Backend & DevOps
• Zaineb Sarir - Game (Frontend & Backend)

Technologies

• Frontend: Next.js, Typescript, Tailwind CSS, Socket.io
• Backend:
  • API: Nest.js
  • Real-time communication: Socket.io
  • Database: PostgreSQL
  • ORM: Prisma
  • Authentication: Passport.js
  • 2FA: Twilio
  • Infrastructure: Docker, Docker Compose
• Game: Phaser.js, Matter.js, Next.js, Nestjs

Features

• Real-time multiplayer game
• User authentication
• Friendship system
• Notification system
• Achievements
• Search system
• Two Factor Authentication (2FA)
• Leaderboard
• Private chat
• Chat rooms (public, private, protected with a password)
• User profile (avatar, stats, achievements, friends, etc.)

Usage

1. Clone the repository

git clone [email protected]:achrafelkhnissi/ft_transcendence.git

2. In the .env.example file at the root of the project, fill in the environment variables and rename the file to .env \

   Notes:

• Put your hostname or IP address in the DOMAIN_NAME variable
• In case of production build, set NODE_ENV to production and comment backend and frontend bind mounts volumes in docker-compose.yml file because those volumes are only needed for development because of hot-reloading.

3. Run the following command to start the project

make

4. Open your browser and go to http://${DOMAIN_NAME}:${NEXT_PORT} to access the application and http://${DOMAIN_NAME}:${NEXT_PORT}/api to access the API

• Change ${DOMAIN_NAME} and ${NEST_PORT} with your environment variables set in the .env file

---

Screenshots

• Dashboard

• Profile

• Messages

• Game Invite

• Game

• Game win

ft_transcendence's Issues

folder struture

maybe dashboard can't be a component..(pages folder)