React-Trello-Multiboard is a single-page application built with React displaying multiple cards of several Trello® boards and lists. The cards can be filtered by preferred team members.
- React-Trello-Multiboard
- 📝 flexible multiboard configuration (eg. select multiple lists to display from multiple boards)
- 🏢 optimised teamwork experience, (eg. send deeplinks to your colleagues with their stories already filtered)
- 🚪 add private (accessible only to invited members of the Board) and public Trello boards
- 🔒 your data stays secure in your browser and is not shared with others
- 🔨 built with awesome technologies, like: react 16.x, react-router-dom, redux, material-ui and styled-components (to name a few)
- 📦 Small package size thanks to webpack and size-limit
- 💪 There's more to come. 😀
As you can see in the example, there are three Trello® boards and two members.
From each board all cards of a list matching the #sprint1 pattern in the
title (can be any pattern, defined in config.js) is
listed below. Each member can be selected, which causes the list of cards to only
show those of the selected member. Additionally, you see five sprints on the page.
You can select one sprint and see the cards of the selected pattern. This allows
you to plan ahead.
You can find the example in the gif above here: https://multiboardfortrello.com/example/#/
node v8.9.x
npm 5.6.x
// or
yarn 1.3.x
Switch to the required version with nvm use. If you have not installed this
node version, install it with eg. nvm install v8.9.4.
// first install nvm (eg. with brew)
brew install nvm
// then install the required node version
nvm install v8.9.4
// and the required npm version (if you have not npm 5.6.x)
npm install -g [email protected]
// finally use the just installed versions
nvm useLog in to Trello and get your api key here: https://trello.com/app-key
First install all Dependencies with
yarn // or npm installOnce you have installed all dependencies, yarn/npm will copy ./config/config.example.js
for you and rename it to ./config/config.js. You then have to customize it according to
your needs and eg. enter your API key and other settings into the config.js.
module.exports = {
app_title: 'Multiboard for Trello®',
api_key: 'your_api_key',
google_analytics_property: 'UA-12345678-9',
company_member: 'exampleusername'
preferred_members: /exampleusername|anotheruser/,
lists: [/#sprint1/, /#sprint2/, /#sprint3/],
boards: [
{
shortcut: 'hw',
name: 'hello-world',
id: 'board-1',
estimates_with_round_brackets: true,
estimates_with_square_brackets: true,
},
],
}The main config properties look like this:
app_title: name that appears in the Menubar and website titleapi_key: your trello api keygoogle_analytics_property: your Google Analytics propertycompany_member: representing the company and available on all cards, because this user is used to calculate the company estimations when all members are toggledpreferred_members: usernames of the ones you want to highlight, filter and calculate the estimations from. Note: currently the app can only display preferred members and not all of the found oneslists(array with regex strings): search pattern of the list name(s) you want to get tasks fromboards: array of board configs
The list of boards should contain board objects like this:
shortcut(string): the title above each list of tasksname(string): name of trello boardid(string, optional): id of trello board, only required when board is public but user should see itestimates_with_round_brackets(bool)estimates_with_square_brackets(bool)
With the id property you can add boards, which are public and the user is not
part of when accessing your TrelloMultiBoard App.
Let's assume the url of your board looks like this: https://trello.com/b/123asdf/hello-world. You can get the id of the board now by changing the url to: https://trello.com/b/123asdf/hello-world.json. Wait for some time (depends on the number of lists and card of the board) and you should see a result similar to
{ "id": "IGVA5wQ67w2mBbkctLxi", "name": "hello-world", "desc":"", ... }
The id at the beginning of the JSON is the id of the board.
Additionally you can calculate and get the estimations from the cards, if their name looks similar to: "Setup server (3)[1]". Now you can turn the feature on by adding one of the following boolean flags to the board' config.
estimates_with_round_brackets(bool)estimates_with_square_brackets(bool)
Each of the values will be summed up by their type.
Example:
- Board name: Example-Board
- Card 1: "Setup server (3)[1]"
- Card 2: "Upload docker imge (3)[0]"
Would result in the following total estimation for the board: Example-Board (6)[1]
It is possible to integrate Google Analytics with pageviews by simply adding
google_analytics_property to the config.js. This will add
https://www.google-analytics.com/analytics.js to the app and track pageviews.
By default doNotTrack browser settings are respected.
At the same time a privacy page (eg. http://localhost:2222/#/privacy) is created and a CookieNotice presented to new users. The content can be defined in src/pages-content by adding a privacy.md file.
By default gaOptout
is available to set a disable Google Analytics cookie in the user's browser.
One can use it like this in the privacy.md file:
Or you deactivate it with a DoNotTrack Cookie: <a href="javascript:gaOptout();">Deactive Google Analytics</a>.Certain url links can be used to eg. customize the inital lists and selected member:
- Selected lists on page refresh
- Filter a member already
Now, when you have set up the config.js start the app with: yarn start. The
webpack-dev-server will start the app and open: http://localhost:2222/#/.
You can now interact with the board, filter members or show all cards again.
yarn start will build and run a development version of the app, but you should
create a stable and production ready build with yarn build before you upload
the files onto your server.
The output will be available in the dist folder.
Clone the repository, commit your changes and create a PR for new features, bugfixes or other ideas.
The following scripts are available (also work with npm run):
yarn analyse: bundles the production build and analyses it with Jarvis, see other analyse here.yarn lint: lints the js-code with Eslint (without--fix)yarn lint:scss: lints the scss-code with Stylelint (without--fix)yarn start: starts the app with the webpack-dev-serveryarn test: runs tests with jestyarn test:watch: runs tests with jest in watch modeyarn test:coverage: runs tests with jest and creates a coverage reportyarn test:verbose: runs tests with jest in the verbose mode
When attempting to commit and push changes, some taks will automatically run:
-
JavaScript files (.js):
- runs
eslintandprettierand formats the code - runs all related tests of the committed files with
jest
- runs
-
Scss files (.scss):
- runs
stylelintand formats the code
- runs
Runs all tests with Jest.
Jest was selected as the test framework for this app. Simply run it with one of the test commands listed above. A cheatsheet for some of the most important features can be found here.
If you run into problems building the App or working with the source code, create an issue please.
We are not affiliated, associated, authorized, endorsed by or in any way officially connected to Trello®, Inc. (www.trello.com).
I would be very happy if you tell me more about your project and if your TrelloMultiBoard is public I can list it here if you want.
Stefan Natter 
|
