Create uml diagram of frontend/backend

Aveline-art commented 2 years ago

Overview

As a developer we need to provide diagrams that helps the team make sense of our growing project. For this issue we will make a uml diagram of our front and backend design.

Action Items

[ ] Create a diagram using github's mermaid syntax
[ ] Add this diagram to our mkdocs assets
[ ] Have a link to it on our front/backend architecture wiki and somewhere in our README.md

Resources/Instructions

Resources

README.md Include diagrams in your Markdown files with Mermaid

Note: Since mermaid rendering is native to GitHub, feel free to use a comment in this issue as a space to R&D before drafting and committing the files.

Aveline-art commented 2 years ago

Backend dataflow

flowchart LR
    frontend(Frontend)
    style frontend fill:orange

    backend([CTJ Backend])
    style backend fill:lightblue

    pgdb[(CTJ Database)]
    style pgdb fill:lightgrey

    pplDepot([People Depot Backend ?])
    style pplDepot fill:lightblue

    frontend -- query --> backend
    backend -- query --> pgdb
    pgdb -- data --> backend
    backend -- opportunity data --> frontend
    frontend -. query .-> pplDepot
    pplDepot -. project data, role data, login data .-> frontend

Legend

flowchart TD
    frontend(frontend)
    style frontend fill:orange

    backend([Backend])
    style backend fill:lightblue

    db[(Database)]
    style db fill:lightgrey

    A[internal tool] --- B[internal tool]
    C[internal tool] -.- D[external tool]

Aveline-art commented 2 years ago

Frontend dataflow (volunteers)

flowchart LR
    qualifierPg(Qualifier Page)
    style qualifierPg fill:orange

    searchPg(Search Page)
    style searchPg fill:orange

    loginPg(Login Page)
    style loginPg fill:orange

    signupPg(Signup Page)
    style signupPg fill:orange

    setOfPages(((Frontend Pages*)))
    style setOfPages fill:orange

    backend[to CTJ Backend]

    pplDepot1[to People Depot]
    pplDepot3[to People Depot]

    pplDepot1 <== query for login data ==> loginPg 
    pplDepot1 <== query for login data ==> signupPg 
    loginPg & signupPg -- login credentials --> setOfPages
    setOfPages ---> qualifierPg
    setOfPages -- "(if logged in) qualifiers" --> searchPg
    qualifierPg -- qualifiers --> searchPg
    searchPg <== query for opportunity data ==> backend
    searchPg <== query for role data, project data ==> pplDepot3

*Note: Frontend pages are a set of pages including the landing, qualifier, and search page

Legend

flowchart TD
    frontend(frontend)
    style frontend fill:orange

    frontendPgs(((frontend)))
    style frontendPgs fill:orange

    A[frontend] --- B[frontend]
    C[frontend] === D[backend]

Aveline-art commented 2 years ago

Frontend/backend dataflow

Possible user states:

Not logged in
(new) Logged in but not oriented
(new) Logged in and oriented
(project) Logged in

flowchart TD
    qualifierPg(Qualifier Page)
    style qualifierPg fill:orange

    searchPg(Search Page)
    style searchPg fill:orange

    loginPg(Login Page)
    style loginPg fill:orange

    signupPg(Signup Page)
    style signupPg fill:orange

    setOfPages(((Frontend Pages*)))
    style setOfPages fill:orange

    backend([CTJ Backend])
    style backend fill:lightblue

    pgdb[(CTJ Database)]
    style pgdb fill:lightgrey

    pplDepot1([People Depot Backend ?])
    style pplDepot1 fill:lightblue

    pplDepot2([People Depot Backend ?])
    style pplDepot2 fill:lightblue

    subgraph graphLogin[Login Feature]
      pplDepot1 <-. query for login data .-> loginPg & signupPg
    end
    loginPg & signupPg --- cred1[login credentials] --- setOfPages 

    subgraph graphSearch[Search Results Feature]
      qualifierPg -- qualifiers --> searchPg
      searchPg <-- query for opportunity data --> backend
      searchPg <-. query for role, project data .-> pplDepot2
      pplDepot2
      backend <-- query for opportunity data --> pgdb
    end
    setOfPages --- qualifierPg
    setOfPages -- "(if logged in) qualifiers" --- searchPg

    subgraph graphProfile[Project Profile Feature]
      ??? & ???? --> ?????
    end
    setOfPages -- "(if logged in)" --- ??? & ????

*Note: Frontend pages are a set of pages including the landing, qualifier, and search page

Legend

flowchart TD
    frontend(frontend)
    style frontend fill:orange

    backend([Backend])
    style backend fill:lightblue

    db[(Database)]
    style db fill:lightgrey

    A[internal tool] --- B[internal tool]
    C[internal tool] -.- D[external tool]

sdimran commented 2 years ago

This is an excellent ticket @Aveline-art. will be very useful to understand the data flow. my apologies for the delay on clearing this one i thought i had previously

Aveline-art commented 2 years ago

flowchart TD
    qualifierPg(Qualifier Page)
    style qualifierPg fill:orange

    searchPg(Search Page)
    style searchPg fill:orange

    loginPg(Login Page)
    style loginPg fill:orange

    signupPg(Signup Page)
    style signupPg fill:orange

    setOfPages(((Frontend Pages*)))
    style setOfPages fill:orange

    backend([CTJ Backend])
    style backend fill:lightblue

    pgdb[(CTJ Database)]
    style pgdb fill:lightgrey

    pplDepot1([People Depot Backend ?])
    style pplDepot1 fill:lightblue

    pplDepot2([People Depot Backend ?])
    style pplDepot2 fill:lightblue

    subgraph graphLogin[Login Feature]
      pplDepot1 <-. query for login data .-> loginPg & signupPg
    end
    loginPg & signupPg --- cred1[login credentials] --- setOfPages 

    subgraph graphSearch[Search Results Feature]
      qualifierPg -- qualifiers --> searchPg
      searchPg <-- query for opportunity data --> backend
      searchPg <-. query for role, project data .-> pplDepot2
      pplDepot2
      backend <-- query for opportunity data --> pgdb
    end
    setOfPages --- qualifierPg
    setOfPages -- "(if logged in) qualifiers" --- searchPg

    subgraph graphProfile[Project Profile Feature]
      ??? & ???? --> ?????
    end
    setOfPages -- "(if logged in)" --- ??? & ????

hackforla / CivicTechJobs