Trello board to ReactAdmin frontend

October 2, 2019

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 ;)

generate react admin from trello board

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.

convert trelloboard to reactadmin ui

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

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  
Let's twitt about it!

When you click on links to various merchants on this site and make a purchase, this can result in this site earning a commission.
Affiliate programs and affiliations include, but are not limited to, the eBay Partner Network and Amazon.