The cube consists of 6 sides with their current color. The server holds the current state of the cube and you can change the color of a side by mutating it.
Your first task is to view the current state of the cube by querying the server using GraphQL and drawing it in a browser using React. Use this tech stack:
- React and TypeScript using
create-react-app --template typescript - Apollo Client
I also recommend you quering the graphql schema using Insomina, GraphiQL or Apollo Studio so that you know how the data structure looks like.
Your second task is to mutate the colors of the cube. Read a color in you UI and create a mutation that sends that to the server. Remember there are only ONE cube so you will also change the color of the other teams cubes. 😈
Using a graphql subscription you can listen to changes to the cube. There is a websocket on the server that will post any changes that has been made. Make the visualization of the cube live!
If you are stuck, there are scaffolds for the different tasks ready made that you can get from Martin. But first, try yourself :D