Explosion AI.

Prodigy Teams

I worked as a Front End Engineer at Explosion AI (developer tools for AI, Machine Learning and Natural Language Processing) on their SaaS product, Prodigy Teams.

Prodigy Teams collaboratively uses their developer tool, Prodigy, in the cloud, managing teams, annotators, data tasks, and running automated processes like model training (including LLMs), all while the user hosts their data on their own cluster. It was built in Vue/Nuxt 3 with Pinia, TailwindCSS, Typescript, Vitest, Cypress for e2e tests, Storybook for building components in isolation, Docker containers/Nomad. A far cry from beginner friendly for my first job in tech, but I thrived on the challenge.

With permission from the founders (full disclosure: it was their idea), as a taste of a portion of my contributions, I am showcasing the dashboard feature and all of its components I made for Prodigy Teams. Instead of screenshots, have refactored it in its entirety for use in my portfolio to show the full code.

I learned a lot from the process of getting this to look and function as it did in the original app, which was built desktop first with a very complicated backend. It was great to strip the components down even further and see where they could be improved.

View dashboard feature

Dashboard Components

Project X

US news in English

Train & Evaluate

Actions

header

The header is used throughout the app in main sections and subsections, which required it to be flexible in its size, style and layout. The custom icons which I created and used in part in this component contribute to the personality of the Prodigy Teams SaaS app while aligning with the pixel aesthetic of its mother app, Prodigy.

There is nothing to preview.

Empty State

Empty states are app wide in previews, dropdowns, individual items, error states, and data statuses. The icon and text are dynamic, matching the related data, with the dashboard using its generic default. The little bounce animation is a subtle but nice touch.

Percentage Bar

This was an extra fun one to build. The linear gradient is a utility function which has unit tests, and adding the white break between each colour was an added challenge in order to exclude it if there is only one stat taking up the entire height.

custom icons

Ah the world of Figma! I loved putting on my design hat to give the app unique personality through icons. The main icons were designed in a wide pixel style, while all others were thinner but equally as cool. The sparkle animation displays to the admin when an annotator is currently annotating. I refactored all of the original svgs into components (the Vue/Nuxt 3 way) with the Typescript Component type.

Stats

stats list

This was built specifically for the dashboard while following the same theme used throughout the app to display the state of data. It was tricky for my backend coworkers to nail down the complexity of these states which were coming from Nomad and I was lucky to work with them getting the states we needed written in python for me to wire it up to UI. The items are to to be links, but I have prevented them from going anywhere for this portfolio.

12
Actions: 9
Running: 2
Failed

Stats Grid

The stats in grid form are the most prioritized and dominant stats throughout the app, sitting just below the header. It is large with a maximum of 3 items which vary depending on the type of data. If the stat value is zero, the icon is grey, while if above zero, its corresponding colour matches the stat.

1Admin
8Devs
22Annotators

Stats

These stats are to be horizontal (the Prodigy Teams app being desktop first) with no dynamic colours or links, differentiating them from the other stats components. A simple component but needed dynamic spacing for use on small screens for use in my portfolio.