Blackjack Trainer

I designed all 52 cards in Illustrator and exported them as SVGs, keeping them crisp at any size. Each card leads with an oversized rank that reads at a glance, since quick recognition is crucial when practicing split-second decisions. A Roman numeral X keeps the tens to a single character like every other rank, while the face cards trade portraits for simple weapon icons that match the app's clean visual language.

Rather than starting in code, I prototyped the full overhaul in Figma first, working out every page's layout, panels, and interactions where changes were quick to make and easy to share with the team. Once the design was settled, I rebuilt each page in React and Vite, closely following the prototype so the finished app matched what we had planned.

In Play Hands, the backend deals and plays the dealer's hand, sending every move over a WebSocket so the table responds instantly. I restructured the training page around two simple panels for the dealer and player, with the available moves color coded below, so that a new player always knows what they can do next.

Quiz Mode, built by Andrea Allmon on the backend and Lucas Mach on the frontend, tests basic strategy one scenario at a time, with feedback after every answer explaining the correct play. Keeping it in the same visual language as the rest of the trainer, from the cards to the buttons, makes moving between the two training modes feel seamless.

The simulation engine, built by Devin Dubois and Serena Seymour, runs thousands of hands at once to show how a strategy performs over time. I rebuilt the page around clear Options, Control, and Results panels, so that setup, execution, and outcome follow a natural top-to-bottom order.

Serena Seymour built the dashboard to collect every saved simulation in one place, with game rules up top and bankroll and true count charts, built with Recharts, for each session. I restyled it to match the rest of the app, so that all of this data reads as part of one cohesive system rather than a separate tool.

Behind the scenes, I moved styles out of the React components into shared stylesheets, establishing a consistent system of panels, buttons, and type. That foundation made it possible for the team to add features like Devin Dubois's strategy editor, which adjusts plays based on the true count, without each new screen drifting from the rest.