Nataliia Diatlova

このプロジェクトでは、AIを活用して、ユーザーが選んだ食材からユニークなレシピを自動生成するWebアプリを開発しました。全体の設計から実装、デプロイまで一人で担当しました。

具体的には、Next.js 14のApp Router機能とTypeScriptを使ってフロントエンドとバックエンドの構成を行いました。レシピの生成にはOpenAIのAPIを使い、選択された食材をプロンプトとして送り、自然でオリジナルなレシピを返すよう工夫しました。

また、レシピに関連する画像を表示するためにSerp APIを利用し、視覚的にも魅力的なUIを実現しました。生成されたレシピはMongoDB Atlasに保存し、過去のレシピをページネーション付きで閲覧できるようにしました。

スタイリングにはTailwind CSSを使用し、モバイル・タブレット・PCに対応したレスポンシブデザインを実装しました。最終的にはVercelでホスティング・デプロイを行い、実際に動作するライブサイトとして公開しています。

レシピ自動生成プラットフォーム

タスクの追加、編集、削除機能
Redux Toolkit（slice, selector）による状態管理
LocalStorageを使用してデータを保持
モバイル・デスクトップ対応のレスポンシブデザイン
最初はVanilla JavaScriptで実装、後にReact + TypeScriptにリファクタリング
