AquaPong Website 🏓

Welcome to the AquaPong world! Here 🚀 , users can play single games of pingpong 🏓, take part in tournaments, and hone their skills while connecting with other users and tracking their progress and achievements 🏅.

Index

1. Usage
2. Technologies Used
3. Conception
4. File Structure
5. Models
6. Preview
7. Ressources

Usage

You should first modify .env.example and rename it to .env !!

Technologies Used

Part	Technology
FrontEnd
Server
Containerization
BackEnd Frameworks
Languages
Design

Conception

Use Case Diagram

Models

• Use a Framework as backend

This module is really important because it uses a specific web framework in backend development, called Django. It has some great features, like MTV Architecture, which helps you organise your code into Models, Templates, and Views for cleaner, easier-to-maintain applications ORM: Makes database operations easier with Python objects. Admin Panel: Makes it simple to build backend interfaces. Built-in Security: Protects against common web vulnerabilities. Scalability: Makes sure your applications can handle high traffic. Community Support: Gives you access to a rich ecosystem of packages and resources.

• Use Database for the backend

This module ensures the consistency and compatibility of data across the website, which is a prerequisite for the framework module, in this model, we use PostgreSQL an open-source database that uses SQL to store data, and is reliable and robust, and the open-source community behind it is dedicated to delivering innovative solutions.

• Game Customization Options

This module shows how to customize all the games on the platform. We want to: We'll offer customization features like different maps to improve gameplay. Users can choose a simpler version of the game with basic features. All games on the platform should have the same customization features. Users should be able to adjust game settings easily.

• Standard user management, authentication, users across tournaments

This module looks at how users interact with and access the Pong platform. It has two parts. One is about users taking part in different tournaments,The other is about using remote authentication.

• Live chat

In this module, we implement a chat functionality for your users. This enables users to send messages to other users, block them, and invite them to play a Pong game. Furthermore, users should be able to access other players' profiles.

• User and Game Stats Dashboards

In this module, we are creating a system showing statistical data about users and gaming sessions.

• Minor module: Support on all devices

This module guarantees that our site works seamlessly on all devices. It is fully responsive, adapts to different screen sizes and orientations, and provides a consistent user experience on desktops, laptops, tablets, and smartphones. Users can easily interact and navigate the website using different input methods, including touch screens and keyboards.

• Use of advanced 3D techniques

In this model, the ThreeJS framework is employed to facilitate the integration of 3D graphics within the gaming environment. This approach aims to enhance the overall gameplay experience for players through the utilisation of advanced techniques, ensuring compatibility and optimal performance.

• Remote player

This module implements a server-side game to offer the best user experience possible. It allows each distant player to play against another. WebSocket ensures a bidirectional, stable connection between players and the server.

• Expanding Browser Compatibility

The objective of this minor module is to enhance the accessibility of the web application by offering users the option of an additional web browser, thereby providing them with a greater degree of choice in terms of their browsing experience.

• Major module: Implement Two-Factor Authentication (2FA) and JWT Major module: Implementing a remote authentication

The principal objective of this significant module is to reinforce the security of user accounts by providing two-factor authentication (2FA) and by augmenting the authentication and authorisation processes through the utilisation of JSON Web Tokens (JWT).

• Server-Side Rendering (SSR) Integration

The objective of this module is to enhance website performance and search engine optimisation (SEO) by integrating server-side rendering, which facilitates faster page loads and an enhanced user experience.

Preview

LandingPage

SignUp

SignIn

Settings

Two Factor Auth

Dashboard

Profile

PrivateChat

View Profile

Join Clan

Map

Solo Match

Tournament

3D Game

File Structure

django_backend
│   ├── Dashboard_home
│   ├── Sign_up
│   ├── chat
│   ├── django_backend
│   ├── groups
│   ├── notification
│   ├── playground
frontend
│   ├── app
│   │   ├── (firstSide)
│   │   │   │   ├── signIn
│   │   │   │   ├── signUp
│   │   │   ├── landingPage
│   │   ├── (playground)
│   │   │   ├── playground
│   │   │   ├── privateGame
│   │   │   ├── tournament
│   │   ├── (scondSide)
│   │   │   ├── chatPage
│   │   │   ├── clanPage
│   │   │   ├── gamePage
│   │   │   ├── homePage
│   │   │   │   ├── [id]
│   │   │   ├── setPassword
│   │   │   ├── settingsPage
│   │   ├── ErrorPage
│   │   ├── api
│   │   ├── assets
│   │   ├── callback
│   │   ├── chat
│   │   ├── components
│   │   ├── contexts
│   │   ├── globalchat
│   │   ├── group_chat
│   │   ├── styles
│   │   ├── utils
│   ├── public
│   │   ├── clans
│   │   ├── gameElement
│   │   ├── maps
│   │   ├── ranks
│   │   ├── soundEffect

Ressources

https://nextjs.org/

https://codevoweb.com/django-implement-2fa-two-factor-authentication/

https://auth0.com/blog/refresh-tokens-what-are-they-and-when-to-use-them/#When-to-Use-Refresh-Tokens

https://www.django-rest-framework.org/api-guide/authentication/