Skip to content

Sekolah-Beta-2023/Asrofil-Fachrul-Riidlo_whisper.io

Repository files navigation

Whisper.io

Frontend

Nuxtjs Vue.js TailwindCSS DaisyUI

Backend

Express.js Socket.io MySQL

Cloud

Google Cloud Nginx Docker

CI-CD

GitHub Actions

Simple functional web chat app with intuitive UI.

Screenshot App

Link Deploy

GCP (IaaS)

main | alternative

above links will not work start from Nov 13, 2023 (end of my free tier plan). Please kindly wait because I'm considering to migrate the hosting to another IaaS that provide free tier plan or (last choice) using PaaS such as Vercel or Netlify. The migration process is undoubtly simple, I just need to register for new IaaS, set up the VM with basic setup like SSH and installing docker & NGINX, upload files script to the vm and update the secret key on github to target address vm. Once all set, i just need to run the script to execute docker-compose or I can directly test the CI-CD process by making test changes on the app and push it to trigger the jobs.

I prefer using IaaS because it can demonstrate my skill in Development-Operation (DevOps) side too. See my gist for the scripts I'm using on ops side:

Original Repo Link

Frontend: whisper.io

Backend: api.whisper.io

Both original repo have been implemented CI/CD using github actions deployed to GCP through docker-hub pulling. Visit my gist to view operation-related files on the VM

Diagrams

Infrastructure

Diagram of Technincal Infrastructure (when app is previously hosted on IaaS)

Diagram

App Activity

Diagram of App Activity

Diagram

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate