I made a website to play Blokus online with friends

This page summarizes the projects mentioned and recommended in the original post on reddit.com/r/boardgames

Our great sponsors
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • Scout APM - Truly a developer’s best friend
  • Zigi - The context switching struggle is real
  • Sonar - Write Clean JavaScript Code. Always.
  • chickenroll

    Online game inspired from the classic board game Can't Stop.

    It's not open source, at least not yet, except for one of the games if you are curious.

  • React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

    The website itself is coded in React (using Next.js). It loads the games in an so that games are decoupled from the platform. The backend is written in Typescript. Communication between backend and frontend is mostly done using socket.io.

    Each game is made of two parts:

    • The game logic, written in Typescript. This defines the state of a match, the moves players can make and how they influence the state, options found in the lobby, how bots play, etc. This uses a custom framework that takes care of the boilerplate and tricky parts (things like synchronizing the match state between players, dealing with timers, etc.). This makes coding a new game very straightforward.
    • The UI is a React component that defines what should be displayed for a given player and a given match state. The state of a given match is passed to the component using some redux magic (abstracted away from the game developer), again to make the game development as smooth as possible. I use a lot of react-spring for animations and TailwindCSS (most of the color schemes in games are from that library!).

    Some of the logic of the game is executed on the frontend, for optimistic UI, but everything ends up running on the backend. Everything is then committed to a database.

    That's a quick summary, let me know if you have any questions!

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Data Platform where developers build real-time applications for analytics, IoT and cloud-native services in less time with less code.

  • Next.js

    The React Framework

    The website itself is coded in React (using Next.js). It loads the games in an so that games are decoupled from the platform. The backend is written in Typescript. Communication between backend and frontend is mostly done using socket.io.

    Each game is made of two parts:

    • The game logic, written in Typescript. This defines the state of a match, the moves players can make and how they influence the state, options found in the lobby, how bots play, etc. This uses a custom framework that takes care of the boilerplate and tricky parts (things like synchronizing the match state between players, dealing with timers, etc.). This makes coding a new game very straightforward.
    • The UI is a React component that defines what should be displayed for a given player and a given match state. The state of a given match is passed to the component using some redux magic (abstracted away from the game developer), again to make the game development as smooth as possible. I use a lot of react-spring for animations and TailwindCSS (most of the color schemes in games are from that library!).

    Some of the logic of the game is executed on the frontend, for optimistic UI, but everything ends up running on the backend. Everything is then committed to a database.

    That's a quick summary, let me know if you have any questions!

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts