Hello and welcome to the game of life real-time editor! The goal of this project is to make exploration of the game of life easy and interactive. For more details about UX layer of the application, please watch the explainer video.

The main idea behind developing this application was to enable the user to explore the game of life interactively and systematically. Many apps give a possibility to load or even edit the grid, but I couldn't find an editor where I could tweak and save the grid easily and intuitively. Especially it is useful when you need to try small incremental changes to the grid. To achieve that, I had to make some design choices.

state management

I tried to create my own solution for the state management of the app. I decided to introduce oneway flow for updating the state of the grid. It consists of three elements: Browser Client, GraphQL server, and Hapi.js server. The browser client subscribes to the GraphQL server via WebSocket and gets the most actual state. When the user chooses a cell to be updated, the client app sends the data (grid state and coordinates of the changed cell) to the Hapi.js server, which computes the update. The result is forwarded to GraphQL, which automatically syncs the client because of the subscription.

server-side state rendering

I made this choice to make it possible for the user to "create a job" for the server to run some pattern for an extended time. The client doesn't have to be involved in the game at all. It also solves the problem of syncing many users' devices.

JWT & security

Many operations to authenticate the user on every API call would be using too much of the server resources. I decided to go with access+refresh token architecture. For safety reasons, the client is storing the refresh token in the httpOnly cookie. Only if the access token is close to expiring does the client fetches the new one. To make it possible to revoke access when necessary dedicated Redis DB keeps track of logged-in users.

• Browser Client: Gatsby.js (React framework), JWT (access + refresh token), Apollo Client (websocket support)
  In the browser client user can:
  1. register/login
  2. edit and save the grid state
  3. iterate grid in adjustable pace
  4. edit gird while it is iterating (realtime)
• GraphQL server: YogaGraphql, JWT
  Server stores the most actual state of the users grid & checks if the subscription client has valid access token.
• API: HapiJS (Node.js), JWT, Sequelize ORM
  Server renders the grid state, handles all the database transactions, registers & authenticates user.
• Databases: Postgres & Redis
  PostgresSQL stores patterns and user data. Redis keeps track of logged-in users & enables to revoke access if necessary.