Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
結婚式のクイズアプリを自作した話
Search
ufoo68
April 11, 2023
Programming
0
550
結婚式のクイズアプリを自作した話
自分の結婚式のためのクイズアプリを作った話
ufoo68
April 11, 2023
Tweet
Share
More Decks by ufoo68
See All by ufoo68
初めて開発リーダーをやってみた話
ufoo68
0
82
M5Stack用の指紋認証デバイスを試す
ufoo68
0
630
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
620
KASHIKOIHAKO
ufoo68
0
520
LIFF通話をつくろう!
ufoo68
0
1.3k
KASHIKOIHAKO計画その4
ufoo68
0
270
AWS CDKで作るLINE bot
ufoo68
0
350
解説!LINE bot開発
ufoo68
0
260
Udonで始めるVR開発
ufoo68
0
410
Other Decks in Programming
See All in Programming
CloudNativePGを布教したい
nnaka2992
0
120
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.5k
Rubyと自由とAIと
yotii23
6
1.8k
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
150
TCAを用いたAmebaのリアーキテクチャ
dazy
0
210
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
160
楽しく向き合う例外対応
okutsu
0
710
React 19アップデートのために必要なこと
uhyo
8
1.6k
AIプログラミング雑キャッチアップ
yuheinakasaka
19
4.9k
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
250
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
940
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.8k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Site-Speed That Sticks
csswizardry
4
410
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Speed Design
sergeychernyshev
27
810
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
GraphQLとの向き合い方2022年版
quramy
44
14k
Fireside Chat
paigeccino
35
3.2k
What's in a price? How to price your products and services
michaelherold
244
12k
Transcript
結婚式のクイズアプリを自作した話 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)