πŸ”Ž CaptainFact - Frontend. The one you see on https://captainfact.io
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
.idea
app
config
cypress
dev
rel
.babelrc
.dockerignore
.eslintrc.yml
.gitignore
.prettierrc
.sass-lint.yml
.tool-versions
.travis.yml
Dockerfile
LICENSE
README.md
cypress.json
docker-compose.yml
jsconfig.json
netlify.toml
package-lock.json
package.json
webpack.config.js
webpack.loaders.js
webpack.production.config.js

README.md

CaptainFact.io

Discord AGPL3 Build Status Greenkeeper badge



Getting started

If you're already have the API running locally, a simple npm install && npm start should be enough. Otherwise follow the procedure below:

  • Install (if you don't have them):

    • Docker and docker-compose (to start the API easily)
    • NodeJS, ideally using asdf with NODEJS_CHECK_SIGNATURES=no asdf install
    • App dependencies: npm install
  • Run:

    • docker-compose up - Start the API
    • npm start - Start the frontend
    • npm run test - run all unit tests

A default account should have been created for you with email=admin@captainfact.io and password=password.

Conventions

File structure

app
β”œβ”€β”€ API => Api libraries for both REST API and websockets
β”œβ”€β”€ assets => assets imported from JS
β”œβ”€β”€ components => All react components
β”œβ”€β”€ i18n => Translations
β”œβ”€β”€ lib => Misc utilities
β”œβ”€β”€ state => All redux related
β”‚Β Β  β”œβ”€β”€ comments
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ effects.js => Async actions creators, always return a promise
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ record.js => The object representing a single comment
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ reducer.js => Reducer + actions creators, always return an action object
β”‚Β Β  β”‚Β Β  └── selectors.js => re-select selectors to select data in state
β”‚Β Β  └── ...
β”œβ”€β”€ static => static assets, directly copied to the public directory
β”œβ”€β”€ styles => stylesheets in .sass format, all included from application.sass
└── router.jsx => Application router and main entry point

Styling

Styling is based on Bulma and was initially customized with SASS. However we now include styled-components, styled-system and @rebass/grid . This has become the prefered way to build new components.

Icons

We bundle a custom font icon built with icomoon. You can find scripts and config for this in dev/ but the preferred (and easiest) way to add new icons today is to use https://styled-icons.js.org/.

Main Libraries / Frameworks

  • ES6 with Babel
  • ReactJS: vue layer
  • Redux: state management
  • ReactRouter: routing
  • phoenix: interaction with phoenix socket
  • Bulma: base styles

Linked projects

License

GNU AFFERO GENERAL PUBLIC LICENSE Version 3

Permissions of this strongest copyleft license are conditioned on making available complete source code of licensed works and modifications, which include larger works using a licensed work, under the same license. Copyright and license notices must be preserved. Contributors provide an express grant of patent rights. When a modified version is used to provide a service over a network, the complete source code of the modified version must be made available.

See LICENSE for more info.