自分の結婚式のためのクイズアプリを作った話
結婚式のクイズアプリを自作した話UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
View Slide
自己紹介ufoo68(@ufoo_yuta)FlipdeskAWS, Next.js, Nest.js, TypeORM滋賀県在住UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
今回のテーマ結婚式の披露宴向けのアプリをWEBで作ってみた以心伝心ゲーム全員参加型クイズUV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
以心伝心ゲームとは解答者みんなの答えを揃えるゲーム例お題「カレーといえば?」「辛口」「甘口」というバラバラの回答だった場合は✕揃えば◯UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
以心伝心画面仕様UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
以心伝心要件会場・司会・回答者の画面がある会場の画面の表示を司会者画面が管理解答者画面は手書き入力で回答◯・✕は司会者が判断UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
以心伝心設計方針DBでStateをUpdateしてそれを書く画面で共有する形を採用UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
手書き入力で使ったものreact-signature-canvasUV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
全員参加型クイズUV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
クイズ画面仕様UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
クイズ要件管理画面でクイズを編集できる司会者画面で問題を進行回答画面では選択と並べ替えの操作ができるUV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
並べ替えで使ったものdnd kitUV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
全体で使用した技術などPlanetScaleMySQLのクライドサービス。無料枠が使える。t3-appNext.jstRPCPrismaTailwind CSSNextAuth.jsUV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
DEMO(時間の許す限り)ちなみにアプリは↓で公開してますUV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
本番(披露宴)運用をしてみて他の式準備の兼ね合いでエラーハンドリングをおざなりにしていた披露宴会場のネットワーク問題が発生した回答が送信できない場合に、ネットワークエラーなのかアプリケーションバグなのかの判断がつきにくかった参加者が途中でブラウザを閉じてしまったときの救済処置がなかったURLパラメータに参加者IDを保存していたので、ブラウザ履歴からたどれば復旧はできるのだがその導線を用意してなかったブラウザ内でのストレージを使うなどを今後は検討UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)