Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trobert42/transcendence
A website that includes a Pong game and a real-time chat
https://github.com/trobert42/transcendence
0auth2 docker docker-compose jwt-authentication nestjs-backend postgresql prisma react-front-end rest-api typescript websocket
Last synced: 9 days ago
JSON representation
A website that includes a Pong game and a real-time chat
- Host: GitHub
- URL: https://github.com/trobert42/transcendence
- Owner: trobert42
- Created: 2024-02-23T18:27:48.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-02-26T18:44:23.000Z (9 months ago)
- Last Synced: 2024-02-26T19:23:07.931Z (9 months ago)
- Topics: 0auth2, docker, docker-compose, jwt-authentication, nestjs-backend, postgresql, prisma, react-front-end, rest-api, typescript, websocket
- Language: TypeScript
- Homepage:
- Size: 25 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Website with a pong game and real-time chat
It is the final project of the common core, time to learn some web stuff !
The project involves creating a website featuring an interactive Pong game and a matchmaking system. Client users can create accounts, log in to chat and play.
| Project Name | ft_transcendence |
| :----------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------: |
| Description | A website that runs an online multiplayer pong, a real-time chat and a user management system |
| Technologies | |## Features
- User's features include profile data, settings, friend lists, private chats, custom avatars, game stats, and match history.
- Authentication management is handled using the 42 API (OAuth2) and Google Authenticator for 2FA.
- Database management employs an ORM (Object Relational Mapping), Prisma, connecting the server to a PostgreSQL database, ensuring password security and protection against injections via POST forms.
- The frontend built using React, on port __3333__.
- The Backend development utilizes NestJS, providing a project architecture and tools for creating a REST API to enable coherent and structured communication between systems via HTTP. On port __3000__.
- It is Docker-compatible using docker-compose.
- Chat channel management involves websockets programming, supporting both public and private channels.
- The website is one-page and responsive.## Prerequisite
To run the project, you have to install __docker-compose and docker__. You need to rename "example.env" to ".env" and setup the file __.env with your credentials__ and __42 API credentials__.
```bash
gcl https://github.com/trobert42/transcendence.git
cd transcendence
mv example.env .env
code .env #or vi .env
```You have to put a password for the jwt secret and for the refresh jwt secret. You need also to put your __42 API credentials__, if you don't it won't work.
```bash
...
JWT_SECRET=""
JWT_REFRESH_SECRET=""
API_42_UID=""
API_42_PWD=""
...
```## Usage
```bash
make
```
When the containers are done building up and are running, you go to your chrome browser (firefox also works) and write on the URL bar "localhost:3000" to access to the application.## Screenshots
Here are the ideas we gathered and drew on Figma:
![](https://github.com/trobert42/transcendence/blob/main/transcendence_figma.png)And look how the website ended up ! We succeed to realize what we wanted to display.
![](https://github.com/trobert42/transcendence/blob/main/transcendence_clip.gif)## 💬
Big thanks to Antoine, Pierre, Elsie and Cyril! We ended the final project together, we can be proud :D
It was a wonderful group experience. I think we gained valuable experience in collaboration, problem-solving, and technical skills development. I really feel a sense of accomplishment and satisfaction in seeing our project come to fruition despite the challenges we faced along the way !