Maintenance guide

[Betree]

This project is currently under low-maintenance mode and will likely receive very few updates in the future.

This guide aims to provide:

• A reference for developers who want to pursue the development of CaptainFact.
• An overview of the project's architecture and the technologies used.
• Some technical guidelines to move the project in a more maintainable direction.

We will update this guide as the project evolves.

CaptainFact

CaptainFact is composed of several parts:

• A Fronted in React
• An API built with Elixir, Phoenix, PostgreSQL, and Absinthe
• A Browser Extension for Chrome and Firefox
• An Overlay injector, on which the browser extension relies

Architecture

Frontend

The frontend is a React application built with Webpack and Babel.

Styles

There are two ways to apply styles in the project: SASS (deprecated) and styled-components. SASS was used in the past, but
new development should use styled-components.

The project was initially set up with Bulma as a CSS framework, but the latest updates have introduced breaking changes. For this reason, any PR that aims to remove Bulma would be welcome.

When using styled-components, the @rebass/grid library should be removed to use custom helpers instead (they are not maintained anymore, and gap is not supported for flex).

State management

The project was initially setup with Redux, but the latest versions break the project. Redux seems an overkill for our use case, especially since we introduced Apollo Client for GraphQL queries (see below).

We would gladly accept a PR that removes Redux and replaces it with a simpler solution, such as React's Context API.

Data fetching

There are three types of data fetching in the project: REST, GraphQL, and WebSockets:

• REST is used mainly for authentication and user data. It is now deprecated in favor of GraphQL and should ideally be removed.
• GraphQL is used for all the newer features. It is powered by Apollo Client.
• WebSockets are used for everything real-time (comments, statements, votes...etc), namely the VideoDebate page. They're currently served by the REST API, but new sockets should be served by the GraphQL API.

API

The API is built with Elixir, Phoenix, PostgreSQL, and Absinthe.

Many libraries and core functionalities need to be updated. Any tested PR that aims to update the project's dependencies would be welcome.

Extension

The extension is built with Webpack, Babel, and React.

It was recently migrated to Manifest V3.

Overlay injector

The overlay injector uses React and extracts the logic of injecting the overlay into a separate library. It can be used
on any website.

Having to update this library to update the extension is a pain point, so we may want to merge the two projects at some point.