みんなのレシピ

日本語 | 한국어

Next.jsを使って作られたレシピ共有アプリケーションです。

概要

テレビなどで見た知らない料理を再現するためのアプリです。ユーザーが写真をアップロードすると、画像分析とベクター検索を行い、Supabase上のレシピデータベースから該当するレシピを検索して表示します。 TOPページには実際に作ってみた人たちの画像を表示するスペースもあります。

フロー

• 写真をアップロード (Frontend)
• ベクター検索と画像分析を行う (Backend)
• 画像分析結果を使ってDB（Supabase）にレシピを検索 (Backend)
• 検索結果をJSON形式で返す (Backend)
• 受け取ったJSONを使って画面を作成 (Frontend)

参考サイト

• 10000recipe.com - 韓国のレシピ投稿アプリ
• recipe.rakuten.co.jp - Rakutenレシピサイト
• cookpad.com/jp - Cookpadレシピサイト

デザインデータ

Figma Design

使用予定技術

• pyconjp/pyconjp-image-search - 画像のベクター検索機能
• Supabase - DB (PostgreSQL)
• Vercel - Hosting
• Next.js - Frontend Framework
• Auth.js - ログイン認証
• Zod - DB検証
• Hono - Backend Framework
• Tailwind CSS - CSS
• Drizzle ORM - ORM

ブランチ戦略

このプロジェクトでは、簡潔なGitHub Flowを採用しています。developブランチは使用せず、mainブランチのみを使用します。

• mainブランチ: 常にデプロイ可能な状態を維持します。
• featureブランチ: mainから切り、機能開発を行います。ブランチ名は feature/機能名 や fix/修正名 などのプレフィックスを使用してください。

開発フロー

1. mainブランチからfeatureブランチを作成します。
2. 変更をコミットします。
3. mainブランチにプルリクエストを作成し、レビューを経てマージします。

コミットメッセージ

• add, delete, fixなど、そのコミットで何をおこなったのか簡潔なメッセージを残してください。
• 例: add: 写真アップロード機能追加

機能

• 写真アップロードと画像分析
• レシピのベクター検索と表示
• ユーザーのレシピ投稿
• TOPページのユーザー投稿画像表示

インストール

必要環境

項目	バージョン
Node.js	>= 22
pnpm	>= 9.0.0

手順

1. Node.js (バージョン 22 以上) をインストールしてください。
   • nvm を使う場合:

     nvm install 22
     nvm use 22

2. パッケージマネージャーとして pnpm を使用します。
   • Corepack を使う場合:

     corepack enable

   • または npm でインストール:

     npm install -g pnpm

3. リポジトリをクローンします。

   git clone https://github.com/study-basic-hackathon/minna-no-recipe.git
   

4. 依存関係をインストールします。

   pnpm install
   

使用方法

開発サーバーを起動します。

pnpm dev

ブラウザで http://localhost:3000 を開いてください。

ビルド

本番用ビルドを作成します。

pnpm build