Architecture

Short Introduction

• GitHub is used for recording issues
• Flask for the main backend operation
• A layer of JavaScript to handle the JSON data

The simplified graphical version looks a bit like this:

@startuml
Browser -> webcompat: HTTP Request [by JS on client]
webcompat -> Browser: HTTP Response (html/css/js/images)
Browser -> "webcompat API": HTTP XHR Request [by JS on client]
"webcompat API" -> "GitHub API": HTTP Request [by Python]
"GitHub API" -> "webcompat API": HTTP Response (json)
"webcompat API" -> Browser: HTTP Response (json) [by Python on server]
@enduml

See also https://github.com/webcompat/webcompat.com/issues/2525#issuecomment-403676858

Webhook

@@explain how we use webhooks@@

Webcompat-bot

@@explain the webcompat-bot role@@

Flask + JS

@@explain the way the page is rendered@@