Trello board to ReactAdmin frontend

Trello 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 like https://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