Shuffl

A new card game experience. Redefining inclusivity. Highlighting accessibility. Playing smarter. 🌟

Comment 2

Inspiration

Card games should be for everyone, no matter where you are, what your skill level is, or what challenges you face. 🃏✨ That’s why we created Shuffl, a revolutionary smart card games table that seamlessly brings in-person and online players together. 🌍♠️ Whether you’re across the room or across the world, Shuffl makes sure you’re always in the game. 🎉 And we’re not just stopping there! Our accessibility-first approach ensures that visually impaired players can fully engage with the game, making Shuffl a truly inclusive experience for all. ♿💙

We love playing board and card games. Some of our best memories have been made sitting around a table, dealing hands, and bluffing our way to victory. But we always ran into the same problems:

  • Some friends could make it in person, while others couldn’t.
  • New players felt intimidated because there weren’t easy ways to learn some games and play against seasoned players.
  • Some of our friends with disabilities wanted to join but simply couldn’t.

That’s when we asked ourselves—in what world should fun be limited? If games are about bringing people together, then why do they leave so many people out? We saw that traditional approaches to accessibility, like braille cards, often fall short in capturing the excitement and challenge of card games. From that moment, we were “all in”🤩. Our mission? To create a system that connects people through games—regardless of skill, location, or impairments, ensuring that we all have a seat at the table!

What it does

Our purpose boils down to three core goals:

  • Accessibility ♿💙– Everyone should be able to play, regardless of visual impairments or other barriers.
  • Inclusivity 🌍🤗 – You, tú, 你, anda, आप, 너 and YOU! No matter who you are or where you are, Shuffl brings people together.
  • Learning 📚 – No one should feel left out because they’re still learning. And who doesn’t want to get better at a game?

How do we stand out? We’re shuffling things up! Unlike traditional online card games, we focus on hybrid gameplay, mixing hardware and software to create a truly immersive experience. Shuffl isn’t just another online card game site—it’s a next-level hybrid gaming platform powered by real-time AI coaching, speech recognition, and NFC-based card scanning.

How we built it

Conceptualising our vision, we settled on the name 'Shuffl' drawing inspiration from our vision: to mix/shuffle people together, just like cards. No matter your suit, rank, colour, or number, you’ve always got a seat at the Shuffl table 🤗.

We put accessibility first. From screen reader support to colour contrast compliance (3:1 WCAG ratio), we made sure everyone could join the game.

Frontend:

  • Developed with Next.js 14 and TypeScript for a modern, scalable architecture.
  • Styled using Tailwind CSS and enhanced with ShadCN UI components.
  • Managed state with React hooks for dynamic user interactions.
  • Enabled real-time updates via a WebSocket client.
  • Fine-tuned Azure Speech Recognition API with local model training for improved accuracy.

Backend:

  • Built with Spring Boot and Java for reliability and scalability.
  • Implements real-time gameplay using a WebSocket API with STOMP over SockJS.
  • Utilizes Lombok to reduce boilerplate code.
  • Provides a RESTful API endpoint for hardware communication.
  • Integrates 4o mini for AI-powered game advice.
  • Employs in-memory state management to optimize performance and speed.

Hardware:

  • Powered by an Arduino Uno for controlling hardware logic.
  • Uses a PN532 NFC module for real-time card scanning.
  • Features an LED screen and LED indicators for debugging and performance monitoring.
  • Components are interconnected via a breadboard for efficient prototyping.

CI/CD:

  • Utilized Azure, GitHub Actions, and Docker for continuous integration and deployment.
  • Diverse skills led to learning multiple operating systems and IDEs (e.g., WebStorm).
  • Docker ensures code runs consistently across different devices and matches the production environment.
  • GitHub Actions builds Docker images, stores them on GitHub Container Registry, deploys to Azure Container Apps with auto-scaling, and enforces linting and formatting rules.

Challenges we ran into

One of our biggest challenges was getting the NFC scanners to work simultaneously . Initially, we attempted to encode each card using hexadecimal values, but this proved to be too slow for a fast-paced card game. We then switched to mapping the UID of each card , significantly improving scanning speed and making gameplay feel seamless.

It was difficult finding a reliable voice to text solution, we ran into several obstacles while learning to develop this feature in Shuffl. We eventually settled on Azure’s custom AI speech recognition tool for its customizability for our niche, however learning API key management and using Azure’s speech recognition tool had a steep learning curve as for many of our team members, it was our first time using Azure and AI training models.

Our AI Assistant (trained on game theory optimisation) also gave us trouble. We originally tried implementing it through an external API, but it didn’t work as expected and we ran out of time. When we switched to an LLM-powered approach, the AI initially recommended folding every hand. After fine-tuning the model and experimenting with different prompts, we finally reached a level of strategic accuracy that we were happy with.

Accomplishments that we're proud of

We are especially proud of the accessibility features we built into Shuffl ♿. To ensure it was truly usable, we invited a visually impaired friend to test our platform, validating our screen reader support 🔊 and WCAG compliance ✅. The feeling of seeing his face light up 😃 in reaction to Shuffl was something we will never forget. 💙

Each member of our team contributed meaningfully, regardless of their experience level, and together we successfully implemented a poker hand evaluation algorithm that correctly identifies winning hands. We also deployed our platform using Docker containerisation , making it compatible across different machines. Our CI/CD pipelines on GitHub Actions automated linting, formatting, and builds, streamlining deployment to Azure Cloud.

Many of us had never worked with hardware before, but we successfully implemented our Arduino-powered NFC system , even tackling soldering for the first time .

What we learned

During our development journey, we were able to learn and use a range of different tools to enhance our development journey, these included Java to SpringBoot, Arduino hardware and Docker.

We learned it was crucial to try different solutions to problems. It was humbling to change code approaches which we had invested a lot of time into.

An example was during our first version of voice api-text feature, we had initially used an inbuilt web solution for voice to text, which worked well in chromium based browsers but did not support browsers like Microsoft Edge and Safari. Having spent over 2 hours on that ticket, we decided to change our approach to using an azure based api solution to address the accessibility issue.

Whilst LLM helped with explaining code and prototyping, we discovered it was not a 'one fix all solution'. As our code base progressed and became larger, not only were these LLM's inaccurate, but they pointed us in the wrong direction due to the complexity and scope of our task.

We found that AI was most effective in explaining new ideas and tools and brainstorming, rather than a magic solution.

What's next for Shuffl

We’re just getting started. Next, we plan to introduce more games 🎮, from UNO 🃏 to Pokémon TCG 🔥. We also want to expand our accessibility features ♿ to better support hearing-impaired players.

Additionally, we aim to enhance our AI voice capabilities 🎙️, making interactions smoother and more natural. Finally, we’re working on making our codebase more extensible 💻, allowing us to integrate even more card games in the future.

Because at the end of the day, fun is for everyone! 🎉

Built With

+ 98 more
Share this project:

Updates