Doubloons - A digital card card game built with React and Firebase
By - ImaginaryType
You can check Doubloons out here: [https://playdoubloons.com/](https://playdoubloons.com/)
I built a web app for my new pirate-themed card game, Doubloons. It's inspired by Dominion and Exploding Kittens.
Wanted more design flexibility than what Tabletopia and TTS offer. And it's fully-scripted, so now people can play without me explaining what happens with each card!
Game mechanisms: card drafting, hand management, take that, push your luck.
Appreciate any feedback.
What tools did you use to build it out?
Also slight bug. If I join a game and then drop out it's stuck in the play state, I also can't see those games so I will never be able to return.
I used React and Firebase to build it out. All the styling is custom done currently, though considering different options like Tailwind.
Great feedback! Thanks for catching this. Definitely a problem that you can't come back to a game. Need to do more around how the game starts, finding them later, and even clocks per turn
Do you have a good React + Firebase resource? I just keep rolling my own APIs but it seems like Firebase is nice for not having todo that.
Yeah, I'm personally a big fan of using Firebase to handle backend requirements, which lets you focus on the React part. This is a good resource I've found: [https://react2025.com/](https://react2025.com/). I personally also am building an online course that uses this stack to build different types of apps at [https://www.solidsail.com/](https://www.solidsail.com/).
Is there a repo for this?? Looks awesome
Yo this is awesome, great work! Nice soundtrack, too!
Thanks! Appreciate that you liked that part
That's epic! It might feel more polished if the board didn't "shift" due to the white text showing/hiding.
Also, drag and drop might feel a lot more game like.
Just 0.02, not worthwhile advice :)
Added both these as good product requests. Especially the shifting and several of the ways text move around feel like they could use a lot more polish
Thanks! Appreciate it!
This is great. One thing that could be improved is that you're providing instructional text to the user underneath the card they select in their deck and pushing up the play area in the process. Maybe cut this entirely or make it a tool tip or float it in some way.
Really like this feedback! Much heavier use of tooltips would do a lot to improve the feeling of polish on this thing
Looks pretty cool. Started a 2-player game here if anyone wants to 1v1: [https://playdoubloons.com/game/CQvmN](https://playdoubloons.com/game/CQvmN)
Nice work! I’ve been looking at doing something similar (been following along with react2025). Have you come close to maxing out your document rewrites on firebase’s free plan? My fear was that things might get expensive if it takes off or gets spammed.
Yeah I hear you and actually since I spun up some Firebase functions to handle a few game state things, I need to upgrade to their Blaze plan. But I set an alert at a very reasonable price just in case it starts spiking too much.
Awesome! I have a dream project to build out a game in these technologies, but I’ve always felt like I’d need to use React Native and go into an app situation. I think the idea of needing to learn that whole ecosystem that has kept me from starting it.
Did you consider RN at all, or have plans to port this to a native app somehow?
Yeah took a while to feel like it was somehow possible. But a lot of it I think is actually on the design front figuring out what you want the UI/UX to be on either web or mobile. A mobile port would be amazing, but I think with up to 4 players on this game, we'd need to think about what that would look like. Once done, RN could totally get the job done. Since it's entirely a frontend app with Firebase handling the backend, we could even easily port to native iOS or Android if we wanted to as well. Again the real block is figuring out the UI/UX on those platforms
This is really cool! Thank you for sharing and sticking around in the comments to answer questions.
Sure thing! Appreciate you checking it out!
Thanks for checking it out!
Wow nice, that music though 😂
Haha, thanks. And yeah really wanted to add on that pirate feel...
That's really cool, just goes to show the extent of what can be done in React.
What's up with that "fluttering" effect in the music though, is that intentional? Kinda made me think something is wrong with my headset lol
Haha thanks! Lol sorry. Tried to speed it up a bit so it wouldn't be a long video and I think that happened
Gotcha gotcha, good job nonetheless
Looks really clean! I'm wondering how did you handle the rooms URL code and having people join that?
So I handled this on Firebase by doing 2 things:
1. every client is anonymously auth'd in once they add their name
2. every game is its own document with a unique code and having the auth'd users that joined added to the document's list of players
and then on the React side: we check if you are one of the allowed players on the game before we allow you access.
One of the benefits of this is that we can add a spectator mode pretty easily to this soon!
Looks great! How long did it take you to build it? did you use any libraries to manage the game state?
Took a few months between three of us contributing. We played with different libraries for state management, but ultimately Immer and Firestore were key parts of how we dealt with keeping track of client and game state, respectively