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_KEYwith 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
You May Also Enjoy
A github template for your cordova and electron projects
Each time I need to do a little personal android project (with a light angularjs),I have to remember how to configure android environement, cordova packa...
Multiplix - an angularjs multiplication game for children
I know that angularjs is outdated, but I find it’s a fast way to do simple projects. For example, multiplix :) Mutiplix is a little (and simple) game for...
Functional tests with puppeteer and gherkin scenarios
For my custom needs, I was looking for puppeteer functional testing suite. As a php developer, I ordinary use behat to write and play my functional tests...
Manage your jekyll blog as a cms with Forestry.io
Did you know that gkdv.net uses jekyll as blog engine? Jekyll is a tool written in ruby to generate static html pages from markdown files. And github pag...
How to totally remove a too big file from your github repository
Oops, you added a too big file on your github repository, and… no way to totally remove it from your history.Oh, wait, there is a workarround, thanks to ...
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.