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.
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.
This project is currently under low-maintenance mode and will likely receive very few updates in the future.
This guide aims to provide:
We will update this guide as the project evolves.
CaptainFact
CaptainFact is composed of several parts:
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/gridlibrary should be removed to use custom helpers instead (they are not maintained anymore, andgapis 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:
VideoDebatepage. 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.