PixelPong

The project is a web application developed as part of a school project. It utilizes React for the front end and Nest for the backend.

Technologies Used

• Frontend: React
• Backend: Nest

Installation

Walkthrough

Authentication

Our web application supports authentication through Google and 42 OAuth, providing users with a secure and convenient login experience:

Group Management

• We allow anyone to create a group and setting this :

• Within each group a hierarchical structure is established like this:

• Groups can be searchable and accessed based on their privacy settings(public, password-protected, and private):

Game Management

• Players are Managed by called Rooms each Player who gets joined into a Game will be added to a Room by that he will be waiting for another Player to join in to Play also we secure that no more than 2 Players will join.

---

Contributors

                      Omar Toufah    Mohamed Amellal    Ayoub Bensguia    Ibrahim nada    Mohamed Khalil Naqqad   

To create a new React project:

npm create vite@latest

Install npm modules:

npm install
npm install nes.css
npm install react-cookie
npm install -D sass
npm install jwt-decode
npm install react-router-dom
npm install xp.css
npm i react-draggable
npm i react-hot-toast
npm i react-scroll-horizontal
npm install --save react-animated-text-content
npm i react-anime -S --force
npm install framer-motion --force
npm install react-awesome-reveal @emotion/react --force
npm i p5 --force
npm i react-p5-wrapper --force
npm i --save-dev @types/p5 --force
npm i react-countdown --force 

Run server:

npm run dev

Ressource :

Logos :

https://iconduck.com/sets/pixelarticons-icons-set

https://www.streamlinehq.com/icons/pixel

https://www.syncfusion.com/blogs/post/top-7-react-animation-libraries-in-2022.aspx

Sounds And Effects

https://downloads.khinsider.com

FlexBox Visualizer :

https://flexbox.tech/

Interface :

https://www.pluralsight.com/guides/use-interface-props-in-functional-components-using-typescript-with-react

Uploading an image to the backend

https://stackoverflow.com/questions/41453224/uploading-a-file-with-reactjs-and-dealing-with-c-fakepath-file

Axios

https://jasonwatmore.com/post/2020/07/17/react-axios-http-post-request-examples

https://stackoverflow.com/questions/61385454/how-to-post-multiple-axios-requests-at-the-same-time

https://rapidapi.com/guides/axios-async-await

Addons :

timolins/react-hot-toast#40

https://www.youtube.com/watch?v=5j7QLUx277Q

https://masteringjs.io/tutorials/fundamentals/foreach-break

SFX :

https://pixabay.com/sound-effects/search/chip/

Color Palettes :

https://mycolor.space

Routing :

https://stackoverflow.com/questions/70491774/usenavigate-may-be-used-only-in-the-context-of-a-router-component

DataStructures :

• Map :

https://howtodoinjava.com/typescript/maps/

Errors :

https://sentry.io/answers/how-do-i-resolve-cannot-find-module-error-using-node-js/

https://stackoverflow.com/questions/62185425/why-is-console-log-logging-twice-in-react-js

Typescript :

https://www.youtube.com/@kodebot

https://stackoverflow.com/questions/52051857/nest-schedule-npm-not-working

Multiple Values For UseState

https://codesandbox.io/s/usestate-with-an-object-multiple-values-sorta-d52zt

useMap React Hook

https://usehooks.com/usemap#:~:text=The%20useMap%20hook%20provides%20a,whenever%20these%20operations%20are%20performed.