Plateful is a user-focused meal planning assistant that helps people organize meals based on what they already have in their pantry. It supports full weekly meal scheduling, smart inventory tracking, and recipe suggestions powered by both AI and public recipe data. Built on a modular, scalable architecture using Next.js 15 and a reusable component system with shadcn/ui, Plateful integrates Anthropic Claude, Hugging Face, and the Spoonacular API to generate and source meals.
I designed and developed Plateful as a solo portfolio project. The app helps users manage their pantry, plan weekly meals, and generate personalized recipes using AI. Throughout the project, I made architectural and technical decisions to support both scalability and a polished user experience.
Migrated to Next.js App Router to support server-side API calls and future extensibility
Integrated recipe generation using Claude and Hugging Face, and public recipe data via the Spoonacular API.
Handled third-party API constraints with caching, debounced requests, error handling for rate limits, and fallback logic for failed AI responses.
Designed and implemented reusable UI components with shadcn/ui.
Centralized state management using React Context.
Refactored the layout and structure for performance, modularity, and clean architecture.
Plateful is a smart meal planning assistant that helps users manage their pantry, organize weekly meals, and generate recipe suggestions using both AI and public recipe data. Built with a modular architecture and intuitive UI, it combines ingredient tracking, Spoonacular-powered recipe filtering, and calendar-based planning tools in a scalable, developer-friendly structure powered by Next.js 15 and shadcn/ui.
Stack:
The user journey begins by adding ingredients to the Inventory, where users can categorize, edit, or remove items to form the basis for recipe suggestions. After setting up their inventory, users can either generate personalized recipes using AI (Claude or Hugging Face) or browse/search a public recipe database through the Spoonacular API. Alternatively, they can skip inventory setup and input ingredients directly for instant results. Each recipe, whether AI-generated or database-sourced, is displayed with detailed instructions and ingredients. Users can review the recipe and decide whether to add it to their meal plan through modals. Recipes can be assigned to specific days and meal slots in a calendar-style planner, with the ability to edit or remove meals anytime, giving users full control over their weekly schedule. They can revisit their inventory, generate new recipes, or adjust their meal plan as needed, offering a flexible and scalable experience that adapts to their routine.
Plateful generates recipes using Claude and Hugging Face models based on the user's selected pantry ingredients. The AI responses are returned in Markdown format and rendered in a user-friendly interface with proper loading states and error fallback handling.
Users can assign AI-generated or manually selected (from the database) recipes to specific days and meal slots within a calendar-style planner. Meals can be edited or removed directly from the planner interface. The layout is responsive and built with modular components, making it easy to extend with future enhancements like user preferences or saved plans.
Users can manage their pantry by adding, editing, and categorizing ingredients, which are then used to generate personalized recipe suggestions based on what’s already available.
Plateful combines AI-generated recipes with public recipe data to give users flexible meal suggestions. Users can either generate personalized recipes using Claude and Hugging Face based on pantry ingredients, or browse and filter a large database of recipes via the Spoonacular API. This hybrid approach ensures users always have multiple paths to meal ideas, whether they prefer creative suggestions or reliable defaults.
Plateful uses a scoped Context architecture to manage global state across key domains like inventory, AI-based recipe generation, meal planning, and calendar scheduling. The React Context API ensures that state updates remain maintainable and isolated per feature. This modular approach improves performance, reduces prop drilling, and simplifies cross-component communication.
When users select a recipe—whether generated by AI or fetched from the Spoonacular API—they’re presented with a structured preview that includes key details like ingredients and instructions. From this view, recipes can be quickly added to the weekly planner with minimal interaction, creating a smooth bridge between exploration and planning.
Plateful uses shadcn/ui and Tailwind CSS to create reusable, accessible UI components. Layouts, buttons, inputs, and dialogs follow a consistent design system that supports future scalability and visual consistency across the app.
Challenge
Features like inventory, recipe generation, and the meal planner needed access to shared data (like selected ingredients or saved meals), but managing that with props quickly became messy and hard to scale.
Solution
I introduced a modular state system using React Context API, with scoped providers for inventory, recipe flow, and calendar planning. This kept state logic organized, reusable, and easy to maintain across the app.
Challenge
When the app was built with React and Vite, API keys for Claude, Hugging Face, and Spoonacular were exposed in the browser, creating a major security issue.
Solution
I migrated the project to Next.js using the App Router. This allowed me to move sensitive requests to server-side route handlers, keeping API keys hidden and making the app more secure and scalable.
Challenge
AI-generated recipe responses needed to include formatting like headings, lists, and ingredient sections—but plain text output was too unpredictable to display cleanly in the UI.
Solution
I structured the AI prompts to request Markdown-formatted responses, then rendered the results safely using react-markdown, remark-gfm, and rehype-sanitize. This approach allowed for clean, styled output while preserving flexibility and minimizing UI bugs.
Allow users to sign in and save their pantry, meal plans, and preferences across sessions. This would enable personalized planning and multi-device continuity.
Implement a database layer to store user data (pantry items, saved meals, meal plans, etc.), making the app stateful and secure beyond the current session.
Upgrade the current planner to support intuitive drag-and-drop interactions for reordering meals across days and slots. Could be built with a lightweight lib or native HTML5 drag.
Let users optionally tweak AI prompt settings or add constraints (e.g., “only vegetarian,” “15-min meals”), giving more control over AI outputs.
Allow users to scan ingredients or upload images to quickly add pantry items using AI-based recognition — speeding up inventory creation.
Let users export their weekly meal plan to Google Calendar or download a PDF version — helpful for planning around daily routines or sharing with family.
Automatically generate a shopping list from the planned meals for the week, cross-referenced against existing inventory to avoid duplicates.
Allow users to share their meal plans or weekly planner view with others via a public link or private invitation. This would make it easier for families, roommates, or nutrition coaches to collaborate, review, or copy each other’s plans.
Plateful is an ongoing portfolio project. If you’ve used the app, have feedback, found a bug, or want to contribute, feel free to reach out via GitHub, LinkedIn, or the contact section on my site. Your thoughts help shape future updates.