Trello board to ReactAdmin frontend
October 2, 2019Trello is cool to manage lists. However, Cards are a bit ugly, and not designed to be shown as reactAdmin pretty does.
Idea: show a frontend reactadmin, using trello as data source :)
About ReactAdmin
https://github.com/marmelab/react-admin is an easy way to build a react frontend from rest resource, or json source. It’s really easy, try it ;)

About Trello
I guess you know trello: it’s an app (for phones) and a website (for browser) which allows you to manage todo-list or projects using a simple rows view.

How to convert your trello board in a react admin frontend?
I’m a cool guy, I give you my sources
https://github.com/gpenverne/trello2react
Install
$ git clone https://github.com/gpenverne/trello2react.git
$ cd trello2react
$ make install
Get trello credentials
- Get your personal token on https://trello.com/app-key/ (just follow what is written, it’s easy ;)
- Generate your trello oauth token on https://trello.com/1/authorize?expiration=never&scope=read,write,account&response_type=token&name=Trello2React&key=YOUR_API_KEY Hm. Replace
YOUR_API_KEY
with your api key retrieven in first point (of course… :p) - Get your trello board id:
Go to your board, and take a look on url (it will be something likehttps://trello.com/b/xxxxxx/my-awesome-board
). The board id is just after/b/
and before/my-awesome-board
- Put values in
config.json
:{ "trello": { "api_key": "YOUR_API_KEY", "oauth_token": "YOUR_TOKEN", "board_id": "xxxxxx", "parser": "raw" } }
About parsers
I have 2 boards: one about video games collection, and another about movies collection. And I want pictures on each card :)
I wrote one parser which retrieves informations about video games (using http://igdb.com), and another one which retrieves movies information (from https://www.thetvdb.com/). If you want to use it, replace the parser
value with igdb
or tvdb
and follow guidelines from the https://github.com/gpenverne/trello2react.
If your board isn’t about video games or movies, just put raw
in parser
node, it will convert each column from your trello board to a react admin category.
Fetch data from trello
$ make fetch
Build static version
Want to use your awesome reactadmin ui as a git page? You can build static html/css/js/json files using the build
makefile command:
$ make build
Start local server
To watch the result:
$ make start