Uno Card Game Project
A full-stack Uno card game application with real-time multiplayer functionality, built in 12 hours for a hackathon.
The Uno Card Game Project is a full-stack application designed to provide users with a real-time multiplayer Uno card game experience. Built within 12 hours for a hackathon hosted by UFV, this project showcases the rapid development of a complex game using modern web technologies. Real-time interactions are facilitated using PusherJS, enabling smooth gameplay and immediate updates during matches. The collaboration with Josh Borseth was key to the successful completion of the project, resulting in us winning 1st place.
Hackathon Details
This project was created during the November 2023 UFV (University of the Fraser Valley) Hackathon, which had a time limit of 12 hours. Our efforts resulted in 1st Place!
Collaboration
I collaborated with Josh Borseth throughout the entire project. Josh's contributions as a full-stack developer were instrumental in building the game logic, integrating real-time features, and ensuring the application was ready within the tight deadline.
Features
- Real-Time Multiplayer: Players can compete against each other in real-time, with instantaneous updates using PusherJS.
- Full-Stack Type Safety: Utilizing TypeScript with tRPC and DrizzleORM to ensure type consistency between the client and server.
- SQL Database: Planetscale is used as the primary database, providing scalability and reliability for managing game state and user data.
- Custom Game Logic: Developed custom game rules and state management to accurately replicate the Uno card game experience.
- Responsive UI: Built with TailwindCSS, the game interface is fully responsive and optimized for various devices.
Challenges and Solutions
- Real-Time Communication: Managing the real-time communication between multiple players required careful coordination. PusherJS was used to create seamless, low-latency connections.
- Ensuring Type Safety: Maintaining type safety from the database to the client using tRPC and DrizzleORM required thoughtful integration. The benefit was a reduction in runtime errors and improved developer confidence.
- Database Scaling: Using Planetscale to handle concurrent connections and manage real-time game states involved designing the database to handle rapid state changes efficiently.
- Game State Management: Implementing the rules of Uno and ensuring consistent state between all players was challenging. Custom hooks and server-side logic ensured that the game stayed synchronized.
- Time Constraints: With only 12 hours to complete the project, time management and prioritization were crucial. We focused on implementing core features first, ensuring that the game was fully functional before adding additional enhancements.
Project Gallery
Testimonials
"The real-time capabilities of this game were impressive. It felt like a real Uno experience, but online!"
"An incredible project completed in such a short time! The real-time features worked flawlessly, and the game was a lot of fun to play."
Conclusion
The Uno Card Game Project brought together advanced tools and frameworks to create a real-time, multiplayer experience. Despite the tight 12-hour timeline, collaboration with Josh Borseth and a focused development approach led us to secure 1st place in the UFV Hackathon. Utilizing TypeScript across the stack minimized bugs and enabled a seamless developer experience, while PusherJS allowed us to replicate the fast-paced gameplay of Uno.
This project not only demonstrated our ability to work efficiently under pressure but also enhanced my skills in developing real-time applications, leveraging type-safe full-stack solutions, and working with a scalable SQL database. It was a truly rewarding experience and a testament to what can be achieved through teamwork and dedication.