Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ufoo68
April 11, 2023

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

自分の結婚式のためのクイズアプリを作った話

ufoo68

April 11, 2023
Tweet

More Decks by ufoo68

Other Decks in Programming

Transcript

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

    View Slide

  2. 自己紹介
    ufoo68(@ufoo_yuta)
    Flipdesk
    AWS, Next.js, Nest.js, TypeORM
    滋賀県在住
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

    View Slide

  3. 今回のテーマ
    結婚式の披露宴向けのアプリをWEBで作ってみた
    以心伝心ゲーム
    全員参加型クイズ
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

    View Slide

  4. 以心伝心ゲームとは
    解答者みんなの答えを揃えるゲーム

    お題「カレーといえば?」
    「辛口」「甘口」というバラバラの回答だった場合は✕
    揃えば◯
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

    View Slide

  5. 以心伝心画面仕様
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

    View Slide

  6. 以心伝心要件
    会場・司会・回答者の画面がある
    会場の画面の表示を司会者画面が管理
    解答者画面は手書き入力で回答
    ◯・✕は司会者が判断
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

    View Slide

  7. 以心伝心設計方針
    DBでStateをUpdateしてそれを書く画面で共有する形を採用
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

    View Slide

  8. 手書き入力で使ったもの
    react-signature-canvas
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

    View Slide

  9. 全員参加型クイズ
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

    View Slide

  10. クイズ画面仕様
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

    View Slide

  11. クイズ要件
    管理画面でクイズを編集できる
    司会者画面で問題を進行
    回答画面では選択と並べ替えの操作ができる
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

    View Slide

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

    View Slide

  13. 全体で使用した技術など
    PlanetScale
    MySQLのクライドサービス。無料枠が使える。
    t3-app
    Next.js
    tRPC
    Prisma
    Tailwind CSS
    NextAuth.js
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

    View Slide

  14. DEMO(時間の許す限り)
    ちなみにアプリは↓で公開してます
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

    View Slide

  15. 本番(披露宴)運用をしてみて
    他の式準備の兼ね合いでエラーハンドリングをおざなりにしていた
    披露宴会場のネットワーク問題が発生した
    回答が送信できない場合に、ネットワークエラーなのかアプリケ
    ーションバグなのかの判断がつきにくかった
    参加者が途中でブラウザを閉じてしまったときの救済処置がなかっ

    URLパラメータに参加者IDを保存していたので、ブラウザ履歴か
    らたどれば復旧はできるのだがその導線を用意してなかった
    ブラウザ内でのストレージを使うなどを今後は検討
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)

    View Slide