Amarnath

Project Description: Recipe Genie
Recipe Genie is an innovative web application designed to revolutionize the way users interact with recipes. It provides intelligent recipe adaptation based on dietary restrictions and serving size, coupled with comprehensive meal planning and management tools. The application is publicly deployed, showcasing a blend of creativity, robust technology, and a user-friendly design.

Publicly Deployed Application
Recipe Genie is deployed and accessible online via Netlify, demonstrating a fully functional and publicly available application. This ensures that the project is not just a concept but a tangible product ready for user interaction.

Innovation and Creativity
Recipe Genie stands out through its core intelligent adaptation engine. Users can input any recipe, and the system will:

Parse Recipes: Accurately extract ingredients, quantities, and instructions from unstructured text.
Adapt to Dietary Needs: Apply user-selected dietary restrictions (e.g., vegan, gluten-free, keto) by intelligently substituting ingredients.
Adjust Serving Sizes: Scale ingredient quantities and provide notes on potential cooking time adjustments for different serving sizes.
Generate Detailed Notes: Provide clear adaptation notes, substitution summaries, and timing considerations, making the adapted recipe easy to follow.
Beyond adaptation, the application integrates a suite of personalized features:

Pantry Manager: Helps users track ingredients they have on hand, including expiration dates, to reduce food waste.
Shopping List Manager: Automatically generates shopping lists based on missing ingredients or allows manual creation, with sharing capabilities.
Recipe History & Collections: Users can save, organize, and revisit their original and adapted recipes, fostering a personalized culinary journey.
Recipe Gallery: A curated selection of common recipes provides a quick starting point for new users, enhancing discoverability and ease of use.
Tools Used and Challenges Overcome
Technologies Utilized:

Frontend: React with TypeScript for a robust and scalable user interface.
Styling: Tailwind CSS for rapid and consistent UI development, ensuring a modern and responsive design.
Icons: Lucide React for a clean and consistent icon set across the application.
Development Environment: Vite for a fast development server and efficient bundling.
Backend & Database: Supabase provides the PostgreSQL database, user authentication, and Row Level Security (RLS) for secure data management.
Deployment: Netlify for continuous integration and seamless public deployment.
Core Logic: Custom JavaScript/TypeScript functions for complex recipe parsing and adaptation algorithms.
Challenges Overcome:

Complex Recipe Parsing: Developing a flexible parser (src/utils/recipeParser.ts) capable of understanding varied recipe formats, including amounts, units, and ingredient names, was a significant challenge.
Intelligent Adaptation Logic: Implementing the adaptRecipe function (src/utils/recipeAdapter.ts) required careful consideration of substitution rules, scaling logic, and generating contextually relevant adaptation notes. This involved managing a database of substitution rules and applying them dynamically.
Robust Database Schema & RLS: Designing a comprehensive Supabase schema to support recipes, transformations, pantry items, shopping lists, collections, and user profiles, along with intricate RLS policies, was crucial for data integrity and security. A specific challenge involved resolving an “ambiguous column reference” error in RLS policies by explicitly aliasing table names in the SQL migration.
Seamless Supabase Integration: Ensuring smooth integration of Supabase for user authentication and data persistence across various features (pantry, shopping lists, recipe history) required careful state management and API interactions.
User Experience for Complex Features: Presenting a multitude of features (adaptation, pantry, shopping lists, history) in an intuitive and non-overwhelming manner required thoughtful UI/UX design, including the use of modals and clear navigation.
Vibe Coded
The application embodies a clean, modern, and inviting aesthetic. The design utilizes a vibrant color palette with gradients (orange and green) to create an energetic yet calming user experience. Typography is clear and readable, and the overall layout is spacious and uncluttered. The use of subtle hover effects and loading animations contributes to a polished and responsive feel, making the interaction with complex features feel effortless and enjoyable. The “Chef Hat” logo and “Genie” name evoke a sense of magic and culinary assistance.

Use of Bolt
Bolt significantly accelerated the development process. The integrated WebContainer provided an immediate, in-browser development environment, eliminating setup overhead. The seamless integration with Supabase allowed for rapid prototyping and implementation of database-driven features like user authentication, recipe storage, and pantry management. Furthermore, Bolt’s direct deployment capabilities to Netlify streamlined the process of making the application publicly available, allowing for quick iterations and demonstrations. Bolt’s comprehensive environment enabled a focus on core application logic and user experience rather than infrastructure concerns.

jsonutil.com

I used vibe coding platforms to build the whole thing.