夏休みToDoビンゴ

Next.js

TypeScript

React

Figma

PostgreSQL

夏の暇つぶしアプリ。今回はちょっと意地悪なお題が生成される。

滝口雅人

永田悠人

小林陽翔

推しアイデア

- ビンゴ×夏休みの暇つぶしという斬新な切り口! - ただタスクを生成するのではなくやるのを躊躇うようなものにすることで、よりゲーム性を!

作った背景

夏休み暇になった時に、夏らしいやることを考えてくれるような、全く新しい形でのタスクアプリを作りたかった。

推し技術

- deepseek APIによる自然言語からの忠実なビンゴカードタスク生成 - ログイン、ユーザー情報の紐付け管理

プロジェクト詳細

アプリの概要

「スイカ割りをする」「線香花火をする」「かき氷を食べる」といった夏らしいお題が書かれた3×3のビンゴカードをAIで自動生成する。今回は少し恥ずかしいようなお題を生成するようにした。

現代の課題

現代の個人が抱える日常のマンネリ化 という課題に、このビンゴは向き合う。

新しい体験へのハードルと退屈

  • 行動のマンネリ化: 夏休み、毎日同じようなルーティンを繰り返す中で、「何か目新しいことをしたい」と思っても、具体的なアイデアが浮かばない。
  • SNS疲れと受け身の消費: InstagramやTikTokで他者のキラキラした日常を見るばかりで、自分の生活に変化を起こせない。

ターゲット

  • 夏休みに少し空いた時間ができた中高大生

技術スタック

フロントエンド

  • typescript(React),tailwindcss

バックエンド

  • typescript(next.js)

データベース

  • postgrasql(Neonと連携)

Vercelでデプロイ

image

処理フロー

  1. ログイン認証orアカウント生成

image

  1. 新しいビンゴカードを生成(or プレイ中のカードがある場合)続きから始める

image 3. aiによって九個のタスクが生成され、ビンゴカードにそのタスクが埋まる

image 4. ビンゴが一列できると新しいビンゴカードを生成が表示される

image

ヘッダーの右のアイコンを押すとプロフィールページにとべ、アイコンの変更、過去のビンゴカードの履歴が見れる

今回のAI活用

  • stitchによるデザインの叩き作成
  • github copilotによるスピーディな雛形作成

滝口雅人

@e464da0ea1871176