もくもく会はおせっかいだ！

https://github.com/KinuGra/ramen-2602
https://ramen-2602.vercel.app/

Next.js

Go

GitHub

AWS

PostgreSQL

カレンダーの余暇時間を見つけて勝手にもくもく会を主催、参加させる

fe01

zatunohito

推しアイデア

もくもく会がカレンダーに勝手に入ってくる

作った背景

モチベーションを上げたかったから！

推し技術

postgresql(supabaseは甘え) Go (リアルタイム自作PRレビュー)

プロジェクト詳細

Topa'z - プロダクト紹介【2026-03-01】

プロダクト概要

Topa'z は3人チームで開発したプロダクトです。

フロントエンドに Next.js / TypeScript、バックエンドに Go / PostgreSQL、インフラに Docker / Railway / AWS（Lambda, API Gateway, DynamoDB, Amazon Bedrock） を採用し、フルスタックで構築しました。

初挑戦へのこだわり

本プロダクトの開発では、メンバーそれぞれが 未経験の技術に積極的に挑戦 しました。

  • Go言語 に初挑戦し、バックエンドの主力言語として採用
  • Docker でフロント・バック・DBすべてのローカル環境構築に初挑戦
  • クラウドマネージドではない PostgreSQL に初挑戦し、リレーショナルDB設計を徹底
  • Claude Code を開発フローに初導入

ハッカソンという限られた時間の中で、あえて慣れた技術に頼らず新しい技術スタックを選択し、チーム全員が成長する機会としました。

Architecture

image image

開発環境・本番環境の違い

image

フロントエンド

使用技術

Next.js, TypeScript

こだわり
  • 徹底的に Figma で「timeleft」というアプリのUIを模倣し、自分たちのテーマに沿うように詳細な変更を施しました。
  • フロントエンド担当はJS初学者でほぼ未経験にもかかわらず、あえてフロントを担当し、チャレンジの場としました。

苦戦した内容と解決方法
  • UI設計においてFigma上のボタン配置の操作性に不満があり、AIでの自動生成を検討。しかし適切なAIが見つからなかったため、操作画面を複製→さらに複製→補助線を引きまくる という工夫で解決しました。
  • JSの理解が追いつかない部分は Gemini と何度も対話 して理解を深めました。
  • チームメンバーが作成した教材を基にフロントエンドを勉強し、実装に落とし込みました。
  • Figma AIのコード出力がそのままでは使えないことに気づき、メンターの方と協力して別の方法を模索 しました。

バックエンド

マッチングの仕組み（MVP）
  1. ユーザーがイベントタイプを選んでキューに参加
  2. 同じイベントタイプで待っている人が2人揃ったら即マッチ
  3. セッションが自動作成され、チャット開始

使用技術

Go, PostgreSQL, AWS（Lambda, API Gateway, DynamoDB）

こだわり
  • 初挑戦を個人テーマにGo, PostgreSQL, Docker, Railway, Claude Codeに挑戦した！
  • 1対多だけでなく、中間テーブルによって多対多のリレーション を実現しました。
  • PrismaのようなORMに頼らない、徹底したDB設計 を行いました。
  • 部分インデックス でクエリを最適化
    • status = 'waiting' の行だけをインデックス化
    • matched/canceled の行が増えても検索速度が落ちない

特筆すべき取り組み

1対多・多対多のリレーションをしっかり理解して実装することを目標に、AIに頼りすぎないよう意識し、実装しました。DB設計の本質的な理解を深めるために、あえて手動で設計・構築する道を選んでいます。

image

インフラ・CI/CD

使用技術

Docker, Railway, AWS（GitHub Actions, Lambda, Amazon Bedrock）

ローカル開発環境

ローカルの開発環境では Next.js, Go（gin）, PostgreSQL をすべてDockerコンテナ内 で動かしました。フロントエンドだけでなく、air というツールを導入しバックエンドもホットリロードに対応 させ、開発体験を大幅に向上させています。また、Docker化により環境構築を容易にし、チーム全員がすぐに開発に着手できる状態を整えました。

GitHub Actions × Bedrock による AI PR レビュー（HTTP Streaming）

チームが3人と少人数であるため、高速なPRレビュー を実現する仕組みを構築しました。

この仕組みにより、概要が先行して届き、内容をある程度つかんだ頃にAIレビューが届く という体験を実現。レビュアーはAIレビューを評価するだけでレビューが完了し、開発速度が非常に向上 しました。

image

苦戦した内容と解決方法
  • Claude Haiku 3.5 がレガシー化 していたため、最新の Haiku 4.5 にリクエスト先を変更
  • Amazon Nova は us. プレフィックスが必要 だったが、つけても動かない問題が発生。原因は us. 付きのリクエストが us-east-1 に飛んでしまい、コスト最適化のため us-west-2 に配置していた Lambda から us-east-1 の Bedrock へのアクセス権限がなかったこと
  • HTTP Streaming の実装自体が初めてであり、さらに GitHub Actions 上でコメントをリアルタイム編集していくという実装に 約6時間 を要しました

AI活用

本プロダクトの開発では、開発プロセスの あらゆるフェーズでAIを活用 しました。

活用場面使用したAI内容
ミーティングNotion AI議事録の自動取得による効率化
UIプロトタイプFigma AIプロトタイプの素早い作成・検討
コーディングClaude Code, GitHub CopilotClaude Codeを初導入し、実装を加速
DB設計Notion AI（Claude Opus）ChatGPTが遅くなったためNotion AI経由でClaude Opusを活用し壁打ち
フロント学習GeminiJSの理解を深めるための対話的学習
CI/CD（PRレビュー）Amazon Bedrock（nova-micro, Haiku-4.5）HTTP Streamingによるリアルタイム自動PRレビュー

特に、CIパイプラインにAIを組み込み、PRの概要生成とコードレビューを自動化した点 は、単なるコーディング補助にとどまらず、開発プロセスそのものをAIで変革した取り組みです。

テーマ決めから開発の流れ
  1. FigJam を使ったチーム全体でのブレインストーミング
  2. メインアイデアの選定と言語化
  3. 参考アプリ（timeleft）の調査とUI設計の学習
  4. Figma でのUI作成（timeleft を参考にカスタマイズ）
  5. Progate で Go を学習（1日の学習量で1位を達成！）
  6. Figma AI・Gemini を活用した並行学習と実装
  7. Docker によるチーム開発環境の統一
  8. issueドリブンによるフロント・バック・インフラの同時並行開発

まとめ

我々は、3人という少人数チーム でありながら、Go・Docker・PostgreSQL・Claude Code・HTTP Streamingなど 多くの初挑戦 を含むフルスタック開発を完遂しました。ORMに頼らないDB設計やAIを組み込んだCIパイプラインなど、ハッカソンの短期間でありながら 技術的な深さ を追求しています。開発プロセス全体を通じてAIを多角的に活用し、限られた時間と人数で最大のアウトプットを実現しました。image

おわり

Taishi Aono, pan, zatunohito. image

fe01

@f0e72fc098fc575f