Creating a Multiplayer Card Game with React and Firebase

I find that one of the best ways to learn a new language or framework is by building a small project. Games in particular are fun to build and due to the complexity of having a lot of business logic (the game rules) and UI interactions, are typically great projects to get started. I had a 3 days weekend during early COVID days and decided to learn the React framework by porting one of my favorite board games - Century Spice Road - to the web using React and Firebase.

Introducing: "The Spice Trader"

Day 1

• Setting-up Github, Trello, Visual Studio Code, Node.JS

• Defining the entities for the game (card, resource, deck)

• Building the game rules and sequence of actions 

• Populating the data for the game (all the resource cards and victory cards)

All in pure js, no UI, testing with Nodejs console logs only

Day 2

• Building the UI with React

• Implementing various UI components(player status, cards, victory points, resources, ...)

• Implementing User actions and turn mechanics

• Hotseat multiplayer (playing on the same computer)

Day 3

• Integration with Firebase real-time database (Firestore)

• Integrate with Firebase authentication to log-in and define stable player IDs

• Store game state on Firebase and rebuild React widgets on state update

• Lock actions when viewer is not active player

• Integrate with Chrome/HTML5 Notification API

• Added game log with moves history

• CSS and user experience tweaks

Day 3+1 (some time later)

• Implemented a Lobby system for users to invite each other and start gaming sessions

• Minor tweaks to the UI (based on player feedback)

I published the 20-min video on the YouTube channel where I run through the process in more details giving some tips along the way. You can also find the Github repository for the game code here: here.

Enjoy and let me know in the comments if you are using the code for your own projects and what you build with it :)