【個人開發】使用 React、TypeScript、Gemini 發布了調味品替換應用！

前言

我在 JISOU 學習中，Heyho-。
作為學習 React 的一環，我從個人應用的構思到 MVP 建立，再到應用開發進行了全過程。
在約一個月的有限時間內，透過「從 0 到 1 的創造」這次首次經驗，我獲得了許多學習和啟發。
本文將總結應用的概述、開發過程、所遇到的困難以及所採取的創新措施。

創建的應用概述

這次創建的是「可以根據家裡調味料提出替代品的應用」。

例如當「沒有豆瓣醬」時，AI 會提議「味噌＋七味辣椒＋芝麻油」等，
通過組合家中現有的調味料來提供替代的點子。

開發的起因

我平時喜歡烹飪，但有以下幾個煩惱：
「即使購買調味料，最終也無法用完而被丟掉」
「在查詢替代調味料時，卻出現家中並不擁有的調味料」

每個家庭擁有的調味料各不相同。
因此我想，如果有「只根據自己家裡現有調味料提出替代方案的應用會很方便」，
便開發了這款應用。

應用希望解決的問題

這款應用解決了以下幾個問題：

減少無法用完而產生的調味料浪費
使能夠用家中已有的食材完成烹飪
省去購買食材的需求，節省開支與時間

此外，通過註冊飲食限制（如：素食、無麩質等）和過敏資訊，
也能提供適合自己的替代方案。

功能概述

登入畫面

使用 Supabase Auth 實現以 Google 帳戶登入。
登入後，將能處理用戶專屬的數據。

新規註冊畫面

每位用戶可以選擇「家中擁有的調味料」和「飲食限制（過敏、素食等）」。
調味料採用勾選框形式，最小化用戶的輸入負擔。

搜索畫面

帶入註冊時的信息，輸入想要替代的食材後點擊搜索按鈕，將利用 Gemini API 生成替代建議。
搜索結果會即時反映為歷史記錄。

使用技術

類別	使用技術
前端	React / TypeScript / Vite
認證與資料庫	Supabase (Auth, Postgres)
測試	Vitest/React Testing Library
部署	Firebase Hosting
樣式設計	TailwindCSS / shadcn/ui
CICD	Github Actions
AI 工具	Gemini API

使用 Gemini 的原因及與 ChatGPT 的不同

在此次的 AI 提案部分，我使用了 Gemini API。
原因是我在之前參加的黑客松中曾經使用過 Gemini，
因此想要將這些知識應用到自己的應用中去實現 AI。

雖然 ChatGPT 也能實現相同的功能，但
這次我重視的是「如何將 AI整合到自己的應用中」。

選擇 Gemini 使我能具體體驗到 API 鍵的設置、請求的發送和響應的處理等，
對於 AI 在應用中的實現流程有了更深入的了解。

我的目的是學習「如何整合 AI」，而不是僅僅關注結果的精確度，
這是與直接使用 ChatGPT 的一個重要區別。

實現中的創新點

讓用戶只需在輸入框中輸入一個「想替代的食材名」，便可進行搜索，
消除了「用文字輸入」的麻煩。
家中現有的調味料可通過勾選框形式註冊，並且調整使其便於瀏覽和滾動。
每位用戶的家中調味料各有不同，因此可以針對每位用戶搜索替代建議。
聚合所有用戶數據，顯示「常用調味料排名」，可視化一般使用的調味料，以便未來開發使用。

苦戰中的難點和學習

設計的困難和 MVP 思維的重要性

這是我首次自己設計 MVP（最小可行產品），
實施時遇到許多問題，例如「我想添加這個功能，但現在的資料表設計無法支持」。

最終需要進行重新設計和大幅度的資料表結構變更，
我深刻感受到預先建立良好的數據結構的重要性。

但另一方面，當我試圖在設計上做到完美時，卻發現自己很難展開行動。
因此我覺得首先應該製作出可運行的產品，然後再慢慢改進
這種 MVP 思維至關重要。

通過小步驟逐漸成長，開發進程能更加積極向前推進，這是我發現的一個亮點。

透過 Supabase Auth 進行會話管理

我實現了以 Google 登入的功能，但在刷新時會話資訊卻無法保持，
畫面從登入狀態還原回登出狀態的現象令我困擾不已。
在查找原因的過程中，我意識到自己並未理解會話的機制。
因此我從頭學習這一機制，最終通過 onAuthStateChange 監控狀態，
並將其存入 sessionStorage，成功解決了這個問題。

這次經驗讓我深刻感受到，前端開發中認證和會話管理的理解不可或缺。