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
630
結婚式のクイズアプリを自作した話
自分の結婚式のためのクイズアプリを作った話
ufoo68
April 11, 2023
Tweet
Share
More Decks by ufoo68
See All by ufoo68
今更ながら、開発現場での生成AI活用について
ufoo68
0
34
28歳独身エンジニア 婚活してみた
ufoo68
0
3
OpenAIでクッキー型を作る
ufoo68
1
40
初めて開発リーダーをやってみた話
ufoo68
0
110
M5Stack用の指紋認証デバイスを試す
ufoo68
0
770
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
680
KASHIKOIHAKO
ufoo68
0
580
LIFF通話をつくろう!
ufoo68
0
1.5k
KASHIKOIHAKO計画その4
ufoo68
0
300
Other Decks in Programming
See All in Programming
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.9k
CSC305 Lecture 09
javiergs
PRO
0
310
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
CSC305 Lecture 11
javiergs
PRO
0
270
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
16k
品質ワークショップをやってみた
nealle
0
640
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
290
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
500
ドメイン駆動設計のエッセンス
masuda220
PRO
3
320
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
130
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
A better future with KSS
kneath
239
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Six Lessons from altMBA
skipperchong
29
4k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
The Pragmatic Product Professional
lauravandoore
36
7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
How to Think Like a Performance Engineer
csswizardry
27
2.1k
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)