-
Framework/Library: The frontend is built using vanilla JavaScript, leveraging several libraries for UI components and state management.
-
Single Page Application (SPA): The frontend implements SPA architecture for smooth user experiences without page reloads.
-
State Management: Implements a custom state management system with a Store pattern, similar to Redux or Vuex, located in
srcs/frontend/src/store/index.js
. -
3D Rendering: Three.js is used for 3D graphics, especially in the game canvas component (
srcs/frontend/src/views/components/game/gameCanvas.js
). -
Styling: Utilizes Bootstrap for UI components and custom styles with CSS and SCSS. The project employs Webpack to compile SCSS to CSS.
-
Module Bundler: Webpack is configured for bundling JavaScript modules, as seen in
srcs/frontend/webpack.config.js
. -
Internationalization: Features a custom implementation for language selection and dynamic text rendering based on the selected language.
- Reverse Proxy: Nginx serves as a reverse proxy, routing requests to the appropriate backend service, configured in
srcs/middleware/conf/default.conf
. - SSL/TLS: Nginx is configured to use SSL/TLS for secure HTTP communication, as shown in
srcs/middleware/conf/default.conf.
- Static File Delivery: Utilizes Docker volumes to serve static files directly from the
frontend/dist
directory without the need for rebuilding the middleware container. This is achieved by referencing the dist volume in both the frontend and middleware service definitions within thedocker-compose.yml
file, ensuring that the Nginx server within the middleware container can serve the latest frontend static files.
- Framework: The backend is powered by Django, a Python-based web framework, with settings and URL configurations in
srcs/game/config/settings.py
andsrcs/game/config/urls.py
. - Database: PostgreSQL is used for data storage, as specified in the
docker-compose.yml
configuration for the database service. - WebSocket Communication: Socket.IO is employed for real-time bidirectional event-based communication, indicated by the use of
socket.io-client
insrcs/frontend/src/store/actions/gameActionHandler.js
. - Authentication with 42 OAuth : Implemented for user authentication, allowing login via external providers. The logic is encapsulated in
srcs/game/users/views.py
, particularly in the OAuthCallbackAPIView. - Blockchain Integration : Smartcontract with Ethereum blockchain for secure tournament log recording and retrieval.
- SSL/TLS: Daphneis configured to use SSL/TLS for secure HTTP communication, as shown in
srcs/game/tool/docker_entrypoint.sh
.
-
Containerization: Docker and Docker Compose are pivotal in creating isolated environments for both the frontend and backend, streamlining development and deployment processes. The Dockerfile and
docker-compose.yml
files detail the container configurations. -
Static File Sharing: Frontend static files (JS, CSS) are generated in a
dist
directory, shared with the Nginx container via a named volume indocker-compose.yml
. This ensures Nginx serves the latest static files without needing container rebuilds. -
Bind Mounts for Development:
docker-compose.yml
supports bind mounts, linking host directories to containers. This allows immediate reflection of changes in the container, streamlining development by bypassing rebuilds for every update, crucial for rapid frontend development iterations.
services:
django_game:
volumes:
- ./game:/game
frontend:
volumes:
- ./frontend:/app