参議院選挙なので、投票サービスを作った 【Amplify × Next.js × Tailwind】
こんにちは。普段はWebアプリ開発とは無縁のエンジニアですが、2025年の参議院選挙をきっかけに「エンジニアとして何か社会に貢献できないか？」と思い、投票を共有できるWebサービスを作ってみました。
HOT SHARE: みんなの参院選投票
経歴とスキル
- 未経験新卒
- AIエンジニアを1年未満
- バックエンドを半年
- プラットフォームエンジニア（再設計とは聞こえの良いリファクタ屋さん）を半年程度
サービス概要
- サービス名：HOT SHARE
- URL：https://www.hot-share.com
- できること：投票を始めとしたイベントを作成し共有するプラットフォーム
なぜ作ったのか
- もっと気軽に投票を作成し、参加できるようにする
- 既存のSNSの投票だと、項目や機能に限界がある
- プラットフォームに依存せず、投票を始めとしたイベントを共有しやすくする
技術スタック
- AWS（Amplify Gen2, Cognito, Lambda, ...）
- Next.js（Reactベースのフレームワーク）
- Tailwind CSS（モダンなCSSユーティリティ）
Webアプリ開発は初挑戦でしたが、ドキュメントやチュートリアルを参考にしながら、なんとか形にできました。
サービスの主な機能
-
投票機能
単純な投票アプリとして、誰でも簡単に投票を作成・参加できます
-
統計情報の表示
投票結果は、年齢・性別・都道府県などの属性ごとに集計し、グラフや数値でわかりやすく表示できます
-
パスワード設定（限定公開）
身内や特定のグループだけで使いたい場合、投票ごとにパスワードを設定して限定公開できます。*追加機能で、より詳細な参加・公開範囲を指定できるようになります
-
SNS的な要素
- 他のユーザーが作成した投票やイベントをアプリ内で一覧表示
- 他人の投稿や参加したイベントを閲覧できる
- みんなで投票を共有し合える
- （まだ、いいねやレコメンド機能は作れていません）
苦労したこと
-
初めてのWebアプリ開発
：ReactやNext.js, tailwind, Amplifyの概念に慣れるまで時間がかかりました。勉強を含め、2週間くらいかかりました -
Cognito
：特に沼リました。OAuth関連の設定の仕方に関して、もう少し丁寧に解説してほしい -
デザイン
：知識皆無であり、なかなか試行錯誤させられた。AI頼りでした
まとめ
- 「エンジニアとして社会にできること」を考え、選挙に関するWebサービスを作ってみました
- まだまだ改善点は多いですが、少しでも役に立てたら嬉しいです。バグがあれば教えてください🙏
- フロントのコツを掴んできたので、1週間以内に "第二弾" を作ります！！！
もし興味があれば、ぜひ使ってみてください！
HOT SHARE: 投票・多数決フォーム
ご覧いただきありがとうございました！