Document Owner: Kevin Yim

Last Updated: 6/19/24

1. Overview

Purpose:

This document outlines the system architecture for Graphling, according to PRD (Product Requirement Document) , a platform designed to enhance Brazilian Jiu-Jitsu (BJJ) training and strategy development through deterministic modeling and advanced visualization techniques.

Scope:

This document covers the architecture design, major components, data flow, and integration points within the Graphling system.

2. Architecture Diagram

graph TD
  A[Users] --> B["Front-End (React)"]
  B --> C["API Gateway (AWS API Gateway)"]
  C --> D["Back-End (Django)"]
  D --> E["Database (PostgreSQL)"]
  D --> F["Data Storage (AWS S3)"]
  D --> G["Visualization Tools (Three.js, D3.js, Zdog)"]
  D --> H["User Authentication (Auth0)"]

https://example.com/graphling-architecture-diagram

• Mermaid Code for sequence flow

sequence flow between

3. Major Components

1. Front-End (Client Side)
   • Framework: React
   • Description: Handles the user interface and interactions, rendering dynamic content based on user actions.
   • Key Responsibilities:
     • Display interactive visualizations using Three.js, D3.js, and Zdog.
     • Manage user authentication and sessions.
     • Provide interfaces for match analysis, strategy development, and community engagement.
2. Back-End (Server Side)
   • Framework: Django
   • Description: Manages business logic, data processing, and integration with the database.
   • Key Responsibilities:
     • Handle API requests and responses.
     • Manage user data, match videos, and training plans.
     • Perform data processing and deterministic modeling.
3. Database
   • Type: PostgreSQL
   • Description: Stores all persistent data required by the application.
   • Key Responsibilities:
     • Maintain user profiles, match data, training plans, and community content.
     • Ensure data integrity and security.
4. Data Storage and Management
   • Service: AWS S3
   • Description: Provides scalable storage for match videos and large datasets.
   • Key Responsibilities:
     • Store and retrieve video files efficiently.
     • Integrate with the back-end for seamless data access.
5. Authentication and Authorization
   • Service: Auth0
   • Description: Manages user authentication and access control.
   • Key Responsibilities:
     • Securely authenticate users.
     • Manage user roles and permissions.
6. Visualization Tools
   • Libraries: Three.js, D3.js, Zdog
   • Description: Render 3D models and interactive diagrams.
   • Key Responsibilities:
     • Provide dynamic and intuitive visual representations of BJJ positions and transitions.
7. API Gateway
   • Service: AWS API Gateway
   • Description: Facilitates communication between the front-end and back-end services.
   • Key Responsibilities:
     • Manage API endpoints.
     • Ensure secure and efficient data transfer.