I made a website to play Blokus online with friends

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

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
  • 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

    The library for web and native 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!

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • 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

  • Meet Cheryl Murphy: Full-Stack Developer, lifelong learner, and volunteer Project Team Lead at Web Dev Path

    2 projects | dev.to | 22 Apr 2024
  • What is the ideal Tech stack to build a website in 2024? 👨‍💻

    2 projects | dev.to | 23 Jan 2024
  • 😳 Next.js vs React - A Beginner's Guide

    2 projects | dev.to | 30 Oct 2023
  • Wow! Server Actions are now Stable from Next.js 14! Dramatic changes in React and Next's form

    3 projects | dev.to | 27 Oct 2023
  • How to Protect Next.js 13 App Routes with Authentication

    2 projects | dev.to | 31 Jul 2023