15 implement mvp with spa websockets and real time features

[lmangall]

Implemented SPA structure for the Pong "app",

• Created a central view in pong/views.py to serve the main HTML template.
• Designed index.html template with Bootstrap and a JavaScript entry point.
• Added {% load static %} at the top of the index.html file for static file handling.
• Added a navbar with links for "Home" and "About" sections.
• Configured URL patterns in pong/urls.py to direct all relevant paths to the SPA entry point.
• Included pong app URLs in the main project urls.py.
• Developed app.js to handle client-side routing and dynamically update page content.
• Set up static file handling in settings.py to serve JavaScript and CSS files.

It is usefull to see the files that were modified in the commit after Django installation to understand the page organisation and routing

Implemented SPA Structure and Real-Time Features

Single Page Application (SPA) structure + real-time interaction using WebSockets.

• SPA Structure:

  • Central view in pong/views.py to serve the main HTML template.
  • index.html with Bootstrap and JavaScript entry point.
  • Navbar with "Home" and "About" links.
  • URL patterns in pong/urls.py and integration in the main project urls.py.
  • app.js for client-side routing and dynamic content updates.
  • Static file handling configured in settings.py.

• WebSocket Integration:

  • Added daphne for ASGI support.
  • WebSocket consumer in pong/consumers.py for real-time interactions.
  • Configured WebSocket URL patterns in routing.py.

• Real-Time Feature:

  • Implemented real-time controlled red square across two clients using WebSockets.

Usage:

start the venv: source venv/bin/activate go into the dir

eventually collect: python manage.py collectstatic

• start Development Server:
  • Start with Daphne: daphne -p 8000 ft_transcendance_backend.asgi:application