結婚式のクイズアプリを自作した話

結婚式のクイズアプリを自作した話 UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

自己紹介 ufoo68(@ufoo_yuta) Flipdesk AWS, 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-canvas 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)

並べ替えで使ったもの dnd kit UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

全体で使用した技術など PlanetScale MySQLのクライドサービス。無料枠が使える。 t3-app Next.js tRPC Prisma Tailwind CSS NextAuth.js
UV 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)

結婚式のクイズアプリを自作した話

結婚式のクイズアプリを自作した話

ufoo68

More Decks by ufoo68

Other Decks in Programming

Featured

Transcript