Comic Frontier Booth Map

Introduction

Comic Frontier is a creators market event that is held bi-annually with hundreds of exhibitors attending the event. As the number of exhibitors rises each year, it's becoming a challenge for visitors to find the exhibitors in the venue.

This interactive map is aimed to help the visitors to navigate the venue to find the exhibitors they wanted to visit and also promote discovery of the exhibitors.

Demo

Version 1: https://cf-map.kogane.moe/

Version 2: https://cf-booth-map.web.app/ (In-development)

Version 2 is a complete rewrite that is aimed to provide better user experience and performance through the use of HTML5 canvas and WebGL for devices that support it.

Frontend

Tech Stack

Build tools

• TypeScript
• Webpack
• Babel
• Sass

Notable libraries

• React
• MobX
• PixiJS

Setup

It is recommended to use Yarn for packages installation and running build scripts.

yarn

Build

Babel is used to transpile the TypeScript source codes while Webpack is used to bundle the files for production. The following script will build the application in production mode into dist directory.

yarn build

Development

webpack-dev-server is used as the development server along with react-hot-loader to enable the HMR capability. Running the following command will start the development server at localhost:3000.

yarn dev

Deployment

This section is still WIP

The site uses AWS S3 bucket to host the static website with CloudFlare CDN to serve it to the users.

These are the requirements needed for deployment:

• Registered domain
• CloudFlare account
• AWS account
• AWS CLI
• GPG key

Provisioning

Terraform is used to easily provision the infrastructure with correct configurations and will provision the required resources both on AWS and CloudFlare sides.

Run the following command to generate your PGP public key.

gpg --export <email> | base64 > pubkey.asc

Run the following command to start provisioning.

terraform init
terraform apply

Deploying Application

Since the website is basically an S3 bucket, you can run the following command to build and immediately deploy the application.

yarn build
aws s3 sync --delete dist s3://<S3 website bucket name>/

Continuous Deployment

Travis CI is used to keep the deployed application updated with each code changes pushed into the repository.

License

MIT