T O P

Doubloons - A digital card card game built with React and Firebase

Doubloons - A digital card card game built with React and Firebase

' + '
' + '
' + '
' + '
' + '
' + '
' + '
' + '

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.


pm-me-noodys

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.


ImaginaryType

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


pm-me-noodys

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.


ImaginaryType

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/).


LoafLion14

Is there a repo for this?? Looks awesome


Nick337Games

Yo this is awesome, great work! Nice soundtrack, too!


ImaginaryType

Thanks! Appreciate that you liked that part


toobulkeh

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 :)


ImaginaryType

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


mau_45konfd

Really impressed


ImaginaryType

Thanks! Appreciate it!


Eat_the_Path

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.


ImaginaryType

Really like this feedback! Much heavier use of tooltips would do a lot to improve the feeling of polish on this thing


topoftheoak

Looks pretty cool. Started a 2-player game here if anyone wants to 1v1: [https://playdoubloons.com/game/CQvmN](https://playdoubloons.com/game/CQvmN)


Jamimeson

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.


ImaginaryType

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.


hosspatrick

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?


ImaginaryType

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


martim0t0

This is really cool! Thank you for sharing and sticking around in the comments to answer questions.


ImaginaryType

Sure thing! Appreciate you checking it out!


Filo01

That's cool!!


ImaginaryType

Thanks for checking it out!


normalweirdo94

Wow nice, that music though 😂


ImaginaryType

Haha, thanks. And yeah really wanted to add on that pirate feel...


kiwidog8

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


ImaginaryType

Haha thanks! Lol sorry. Tried to speed it up a bit so it wouldn't be a long video and I think that happened


kiwidog8

Gotcha gotcha, good job nonetheless


Tester821

Looks really clean! I'm wondering how did you handle the rooms URL code and having people join that?


ImaginaryType

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!


ryzun

Looks great! How long did it take you to build it? did you use any libraries to manage the game state?


ImaginaryType

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