Pain in my Deck! â A Mobile-First Cards Against Humanity clone
Like "pain in my neck", but cards. Get it?
Overview
Pain in my Deck! was a project born out of necessity during the COVID-19 lockdown. With traditional game nights on hold, I wanted to recreate the chaotic fun of Cards Against Humanity in a mobile-friendly format. This project allowed me to connect with friends remotely while exploring real-time multiplayer functionality, responsive design, and interactive features like live chat and custom cards.
Key Features
- Real-Time Multiplayer: Players could join games, submit cards, and vote on the funniest answersâall in real time.
- Custom Cards: Add a personal twist by creating and sharing your own cards.
- Live Chat: Stay connected with friends during the game via an integrated chat feature.
- Engaging Animations and Microinteractions: Smooth animations and subtle microinteractions enhanced the overall experience.
- Mobile-First Design: Optimized for responsive gameplay across devices, making it easy to play anywhere.
Technology Stack
- Frontend: Built with Nuxt.js (Vue) for its flexibility and intuitive design capabilities.
- Backend: Leveraged Firebase, with Firestore storing game state and delivering real-time updates to players.
- DevOps: Firebaseâs serverless infrastructure made deployment seamless and the game highly scalable.
Challenges & Solutions
One major challenge was ensuring smooth real-time gameplay across multiple devices while managing network latency. By using Firestoreâs real-time database capabilities, I ensured that every playerâs actions updated seamlessly for all participants. Additionally, I focused on designing an intuitive interface and implementing small touchesâlike hover effects and animationsâto make the game feel polished and immersive.
The game was meant for mobile, but I didn't want to leave desktop out of the fun. Designing an interface that was intuitive on both desktop and mobile was a challenge (i.e. swiping a card to trash it makes sense on mobile, but it's not very intuitive on desktop), but lots of playtesting and user feedback helped carve a path forward.
Impact
Pain in my Deck! brought friends together during a challenging time, offering a creative way to connect and have fun remotely. While it was a personal project, it demonstrated the potential of combining innovative design with practical technology to create memorable experiences.
Postmortem
This project helped cement two core tenants of mine:
Use the right tool for the job
I chose to build this using universally accessible front-end tech (i.e. HTML and Vue) so anyone could simply join with a link. In retrospect, I should've used a javascript-based game engine instead of a framework built for frontend reactivity. Ensuring the game functioned properly on each browser ended up being a massive pain in my neck (get it?), and it couldn't been avoided entirely if I'd used canvas to handle all the gameplay.
Avoid vendor lock-in at all costs
Firebase wasn't the worst choice for this, but mid-way through the development process I began to have some doubts. Relying on a custom-made SDK to interface with the backend makes it easier to get from zero to one, but it doesn't allow for as much hands-on control when you need it. In general, I want the tools I'm using to get out of my way when I know what I'm doing, and I don't think Firebase was very good at that.
Conclusion
Pain in my Deck! was an exciting opportunity to combine my love for game design with technical problem-solving. It taught me valuable lessons about real-time systems and the importance of user experience. Though it was a project created for friends, it laid the groundwork for exploring more complex and polished games in the future.