Show and Tell: Competitive Pokemon TCG analysis site

Hello everyone!

I recently completed a site I’ve been working on for some time called Trainer Hill. This site communicates with an API I wrote (using Flask Restx) which in turn gathers data from a site that hosts Pokemon Trading Card Game, Pokemon Video Game, and Digimon Trading Card Game tournaments.

The app includes two different analysis tabs that visualizes different types of data for players: overall meta analysis and individual deck analysis. The app also includes a leaderboard for both players and deck archetypes. Lastly, the app allows individual player reports to be created and downloaded.

I host the site using DigitalOcean’s app platform ($5 per month for dynamic sites).

If there are any specific components or pieces you are curious about, feel free to reply below and I’d be happy to try and create a small example.

Below I’ll highlight some of the more interesting things I did with the Dash framework.

Let me know what you think!

Custom radio item component that uses images instead of text:


Selecting and highlighting DataTable rows by clicking anywhere in the row, both multi and single select:


Downloading full reports from the site using clientside callbacks:

Removing columns from DashTable based on screen size:


You gotta see this. @adamschroeder

1 Like

This is so cool! @raptorbrad
What a great idea for a Dash App. As a Pokemon fan myself this is really fun to see :heart_eyes:

Amazing work !

1 Like

Great job sir :grinning:


hi Brad @raptorbrad .
Thank you so much for sharing this with the community. You’ve come a long way since the last version.

Would you be ok sharing with us the piece of code on custom radio item component that uses images? I thought that was a neat trick.

Thank you,


Of course! I created that component in React based on other radio buttons, but included some very specific syntax. Each radio item is a normal radio item with a card as a child and within each card is an image.

To use it, first install the package:

pip install dash-utility-components

Then use as the following

import dash_utility_components as duc
radio_images = duc.RadioImages(
        {'label': '/assets/images/img1.png', 'value': 'img1'}
        {'label': '/assets/images/img2.png', 'value': 'img2'}
    image_class_name='p-3 w-100',

The id, options, persistence, and value operate the same as other radio items. input_class_name sets the classes for the radio button itself. image_class_name sets the classes of the images and card_class_name sets that of the classes. The color parameter sets the color of the selected card. I suggest using a border on the card to emulate the card being selected.