An implementation for playing the game of Concept by Repos Productions online. Different players can connect to the same game and can follow the concept that is being defined in real-time. Different games can be played at the same time, each accessed through a unique URL.
Available at concept.stijnvermeeren.be.
This project can serve as a demonstration for how to use the following technologies:
- A Vue.js frontend with the Vuetify Material Design Framework and drag-and-drop support using SortableJS (Vue.Draggable).
- A serverless backend based on the AWS services API Gateway, Lambda and DynamoDB.
- Infrastructure-as-code management of the backend deployment using Pulumi.
- Frontend-backend communication using websockets.
- Game concept by Repos Production. Do buy a physical copy of the original game if you like it!
- Code written by Stijn Vermeeren.
- Icons by Melina Found.
- The setup for using Websockets with API Gateway and Lambda on AWS is inspired by the AWS Developer Guide.
The recommended way of deploying this application is using AWS and Pulumi. After having installed Pulumi and configured Pulumi to access your AWS account, go to the pulumi subdirectory of this project and run the command pulumi up to deploy the whole stack. The websocket_url, which is required for the frontend configuration, will be provided as an output of this command.
Download all the dependencies using npm install.
To correctly connect to the Websocket API that is running on AWS, the URL of the Websocket API must be defined in the VUE_APP_WEBSOCKET_URL environment variable.
One way to do this is to copy the file frontend/.env to frontend/.env.local (this file will be ignored by git) and to define the URL in this .env.local file. More options can be found in the Vue CLI documentation on modes and environment variables.
Compile for development (with hot-reloading) using npm run serve.
Build and minify for production using npm run build.