Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/CaptainFact/captain-fact-frontend

🔎 CaptainFact - Frontend. The one you see on https://captainfact.io
https://github.com/CaptainFact/captain-fact-frontend

captain-fact civic-tech collaborative fact-checking frontend hacktoberfest react spa

Last synced: 19 days ago
JSON representation

🔎 CaptainFact - Frontend. The one you see on https://captainfact.io

Awesome Lists containing this project

README

        


CaptainFact.io



Discord




AGPL3
GitHub release
Release Status
Coverage Status
Translation status










## 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):

- The API project: https://github.com/opencollective/opencollective-api
- NodeJS, ideally using [asdf-vm](https://github.com/asdf-vm/asdf) with `NODEJS_CHECK_SIGNATURES=no asdf install`
- App dependencies: `npm install`

- Run:
- `npm start` - Start the front-end
- `npm run test` - Runs all unit tests

Front-end is started on http://localhost:3333

A default account should have been created for you with
e-mail=`[email protected]` 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](https://bulma.io/documentation/) and was initially
customized with SASS. However we now include [styled-components](https://github.com/emotion-js/emotion), [styled-system](https://github.com/jxnblk/styled-system) and [@rebass/grid](https://github.com/rebassjs/grid).
This has become the prefered way to build new components.

#### Icons

We bundle a custom font icon built with [IcoMoon](https://icomoon.io/). 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](http://es6-features.org) with [Babel](https://babeljs.io/)
- [React](https://reactjs.org/): View layer
- [Redux](https://redux.js.org/): State management
- [React Router](https://github.com/ReactTraining/react-router): Routing
- [Phoenix](https://phoenixframework.org/): Interaction with [https://hexdocs.pm/phoenix/Phoenix.Socket.html](Phoenix.Socket)
- [Bulma](https://bulma.io/): Base styles

## Linked projects

- [Community discussions and documentation](https://github.com/CaptainFact/captain-fact/)
- [API](https://github.com/CaptainFact/captain-fact-api)
- [Extension](https://github.com/CaptainFact/captain-fact-extension)
- [Overlay injector](https://github.com/CaptainFact/captain-fact-overlay-injector)

## 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](LICENSE) for more info.