4.6 KiB
4.6 KiB
概要（Agenda）
初心者が一人でも取り組めて、かつ短期間で完成させられるプロジェクトを提案する。また、健全にスキルを伸ばすために、以下の性質を満たす必要がある。
- 楽しさ（Fun）：学習者がプロジェクトに興味を持てること。
- 現実性（Realistic）：実際の開発現場で経験豊富な開発者が行っていることを反映していること。
- 誤解を招かないこと（Non-misleading）：学習者が悪い癖を身につけないこと。
- 拡張性（Extensible）：完成後に、学習者がさらに機能を追加・改善できる余地があること。
これらの目的を達成するため、以下のプロジェクトを提案する。
技術スタック（Tech Stack）
フロントエンド
- Next.js：一般的なWeb開発において、おそらく最も広く使われているReactフレームワーク。
- React：多くの人にとってデフォルトの選択肢。
- TypeScript：最も人気があり、かつ習得しやすい言語。
- shadcn/ui：すぐに使えるコンポーネントを提供し、そこから必要なものを追加していくことで開発を高速化できる。
- valibot：フォームのデータバリデーション用ライブラリ。zodより軽量。
バックエンド
- Next.js：Server Actionsを用いたフルスタック構成にすることで、初心者には難しいAPI設計を省略できる。
- Drizzle ORM：使いやすく柔軟性の高いORM。
- PostgreSQL：新規プロジェクトにおける現在のデフォルトの選択肢。Vercelを使うことを踏まえ、無料のサーバーレスDBであるNeonを利用すると便利。
- Vercel：無料で使える便利なサーバーレスプラットフォーム。Next.jsを開発した企業でもある。
ツール類
- Git：使い方を必ず身につけておくべきツール。
- Node.js：bunなど他のランタイムを使うと予期しない問題が起きる可能性があるため採用。
- npm：Node.jsに標準で付属。
- Biome：フォーマッターとリンターを兼ね備えた堅実なツール。
プロジェクト概要
このハッカソンでは、主流のフレームワークを使ってシンプルな投票アプリケーションを構築する方法を学ぶ。
このアプリケーションでは、ユーザーが投票ルームを作成または参加し、新しいアイデアを投稿したり、気に入ったアイデアに投票したりできる。
必須機能
アプリケーションには以下のページが必要である。
/：ホームページ。ここでユーザーはルームを作成するか、既存のルームに参加するかを選択できる。/create：ルーム作成ページ。ここでユーザーは投票の設定（ルーム名、ユーザーごとの投票可能数など）を行う。作成後、ルームのオーナーは/manage/{room_number}にリダイレクトされる。/enter：ルーム番号とユーザー名を入力し、ルームに参加するためのページ。/vote/{room_number}：投票ページ。各選択肢の表示順はシャッフルされ、各選択肢の得票数は非表示にする。/manage/{room_number}：ルームのオーナーが投票を終了したり、ルーム名を変更したりできる管理ページ。
認証・認可はトークン方式とする。アプリケーションはランダムな文字列を生成し、その文字列の所有者をデータベースに記録することで、各リクエストが誰からのものかを識別する。トークンはCookieに保存する。ログアウトボタンも忘れずに実装すること。
追加機能（チャレンジ）
グルーピングモード
ルーム作成ページに「グルーピングモード」というオプションを追加する。これを有効にすると、投票アプリケーションがグループワークの班分けアプリケーションに変化する。自分の意見を投稿し、十分な票を集めた人がチームのリーダーになる。他のユーザーは、自分がどのグループに入りたいかを示すために投票する。
詳細な実装には「ハンガリアン法（Hungarian algorithm）」と呼ばれるアルゴリズムが必要となる。
自動終了
ルーム作成ページに「投票終了日時」というオプション項目を追加する。値が設定されている場合、指定した日時に投票が自動的に終了する。