🎨 Fableous

Fableous is a collaborative drawing platform to support the learning environment of children with ASD (Autism Spectrum Disorder). Fableous is is powered by Go backend and React frontend, using WebSocket protocol and Protocol Buffer-encoded messages.

Features

• Collaborative drawing with multiple roles
• Public gallery
• Achievements
• Guided walkthrough
• Audio annotations and TTS (Text-to-Speech)

External Links

This project is hosted on a VPS, deployed and running via Docker containers. Source code is hosted on GitHub, and static code analysis is run by SonarCloud to ensure code maintainability.

• Fableous
• GitHub
• DockerHub
• SonarCloud

Service

The application is divided into two parts:

Name	Code Name	Stack
Backend	fableous-be	Go, Gin + Gorm, PostgreSQL
Frontend	fableous-fe	TypeScript, React

Develop

The protobuf implementations for both fableous-be and fableous-fe must be generated prior to starting development. Ensure that Go and Node.js are properly installed.

$ make

fableous-be

fableous-be uses Go Modules module/dependency manager, hence at least Go 1.11 is required. To ease development, comstrek/air is used to live-reload the application. Install the tool as documented.

To begin developing, simply enter the sub-directory and run the development server:

$ cd fableous-be
$ go mod tidy
$ air

fableous-fe

To begin developing, simply enter the sub-directory and run the development server:

$ cd fableous-fe
$ yarn
$ yarn start

Deploy

Both fableous-be and fableous-fe are containerized and pushed to Docker Hub. They are tagged based on their application name and version, e.g. daystram/fableous:be or daystram/fableous:be-v1.1.0.

To run fableous-be, run the following:

$ docker run --name fableous-be --env-file /path_to_env_file/.env -p 8080:8080 -d daystram/fableous:be

And fableous-fe as follows:

$ docker run --name fableous-fe -p 80:80 -d daystram/fableous:fe

Dependencies

The following are required for fableous-be to function properly:

• PostgreSQL

Their credentials must be provided in the environment variable.

Helm Chart

To deploy to a Kubernetes cluster, Helm charts could be used. Add the repository:

$ helm repo add daystram https://charts.daystram.com
$ helm repo update

Ensure you have the secrets created for fableous-be by providing the secret name in values.yaml, or creating the secret from a populated .env file (make sure it is on the same namespace as fableous installation):

$ kubectl create secret generic secret-fableous-be --from-env-file=.env

And install fableous:

$ helm install fableous daystram/fableous

You can override the chart values by providing a values.yaml file via the --values flag.

Pre-release and development charts are accessible using the --devel flag. To isntall the development chart, provide the --set image.tag=dev flag, as development images are deployed with the suffix dev.

Docker Compose

For ease of deployment, the following docker-compose.yml file can be used to orchestrate the stack deployment:

version: "3"
services:
  fableous-be:
    image: daystram/fableous:be
    ports:
      - "8080:8080"
    env_file:
      - /path_to_env_file/.env
    depends_on:
      - "postgres"
    restart: unless-stopped
  fableous-fe:
    image: daystram/fableous:fe
    ports:
      - "80:80"
    restart: unless-stopped
  postgres:
    image: postgres:13.3-alpine
    expose:
      - 5432
    volumes:
      - /path_to_postgres_data:/var/lib/postgresql/data
    restart: unless-stopped

PostgreSQL UUID Extension

UUID support is also required in PostgreSQL. For modern PostgreSQL versions (9.1 and newer), the contrib module uuid-ossp can be enabled as follows:

CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

Contributors

• Danny August Ramaputra
• Jiarui Li
• Michael Sudirman
• Nicolaus Christian Gozali
• Tianyu Ma
• Wahyu Ananda Duli Tokan