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.
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.
Build tools
Notable libraries
It is recommended to use Yarn for packages installation and running build scripts.
yarnBabel 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 buildwebpack-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 devThis 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
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.ascRun the following command to start provisioning.
terraform init
terraform applySince 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>/Travis CI is used to keep the deployed application updated with each code changes pushed into the repository.
MIT