Skip to content

Florida Lottery Website

Florida Lottery PPK

As Senior Software Developer at PPK, I served as technical lead on the rebuild of the Florida Lottery website. I engineered the full stack on Adobe Experience Manager as a Cloud Service, covering everything from component design and API integration to accessibility, testing, and CI/CD. I delivered a modern, thoughtfully crafted bilingual experience built for long-term growth and flexibility.

Website Rebuild

  • Adobe Experience Manager
  • Java
  • Vue.js

The Florida Lottery worked with PPK for years on various smaller web projects before asking us to help tackle their main website.

Their legacy website was slow, difficult to manage, and did not meet modern accessibility or mobile standards. Our goal was to transform their digital presence into a high-performing, bilingual platform and increase player engagement across demographics, drive sales, and prominently showcase the Lottery’s contribution to education.

More details

We collaborated on a solution that involved moving their infrastructure to Azure, and building their website on Adobe Experience Manager. Within that collaboration, as lead developer I was responsible for architecture, technical direction, and ensuring our small team could deliver a complex, enterprise-grade site on time.

I oversaw all technical architecture decisions, including AEM setup, Vue/Tailwind adoption, and content & component model design. I established & executed testing regimes (accessibility, browser, performance, security), and managed CI/CD pipelines.

I built dozens of Vue components in a custom Storybook environment, allowing each to be tested for accessibility & multilingual support, reviewed by the client, and refined in isolation. This allowed for rich content expression by authors without requiring developer support.

Knowing the site had to survive the rush of high jackpot drawings, I implemented aggressive caching (dispatcher & CDN), asynchronous loading for API calls, and lazy loading for media & components. High-traffic pages surpassed all Core Web Vital recommend thresholds. I wrote Locust load-testing scripts to simulate thousands of concurrent user workloads, with no failures and ﹤600ms server response times.

Accessibility and multilingual support were baked into component design and development from the start. Automated Axe audits and manual testing across multiple screen readers helped ensure we met compliance targets.

Post-launch analytic data indicated a drop in bounce rate and rise in pages per session. Our speed improvements correlated with increased winning number searches and fewer frustrated user drop-offs across both language audiences.

This project required a blend of deep AEM knowledge, modern TypeScript, high-traffic performance engineering, accessibility standards, and security best practices. It put my entire skill set to the test, and is the most satisfying project I've worked on to date.

Custom Storybook

  • Vue.js
  • Axe

The Florida Lottery website is built on Adobe Experience Manager (AEM), using a hybrid of HTL server-rendered components and Vue.js islands. The project grew to over 60 components, from simple UI elements to complex interactive tools like a Winning Number Search, an interactive Ticket Breakdown, and a Mapbox-powered retailer locator.

With a component library this large, we needed a way to develop, test, and share components in isolation, without requiring a full AEM build or content population every time the client needed to review UX or functionality.

More details

We started with official Storybook on Vue 2, but hit persistent issues as Storybook's team shifted focus to Vue 3. Over time this grew more and more frustrating, and began to impact the component review flow.

So I spent a few days building a lightweight custom Storybook clone. It matched the standard story file format, making a future migration back to official version straightforward (if needed). I implemented all critical dev & review features, including:

  • Real-time prop editing for live UX iteration
  • Responsive device modes for layout validation
  • English/Spanish language switching
  • Theme switching
  • Integrated Axe accessibility auditing.

When the codebase later migrated to Vue 3's Composition API, returning to the official Storybook became viable, but we stuck with the lightweight custom version, as it covered all necessary functionality and was simple enough to maintain.

This project enabled the client, along with our team, to review of all components without depending on the AEM environment. This compressed our feedback cycles significantly. Building simple, genuinely useful tools like this is one of my favorite parts of coding.