Popular Topics
PopularView All

Lenscipe | AI Recipe Generator

LensCipe.com
Lenscipe

Lenscipe is a modern web application that transforms your available ingredients into delicious recipe suggestions. By leveraging generative AI, I created an intuitive experience where users can either upload a photo of their ingredients or enter them manually to receive curated, AI-generated recipes.

Core Features

  • Image-to-Ingredient Detection: Users can upload a photo of their ingredients. I used a multimodal AI model (Gemini) via a Genkit flow to analyze the image and return a list of identified food items.
  • Dynamic Ingredient Management: The app provides a fully interactive interface for managing the ingredient list. Users can remove AI-detected items or manually add more ingredients with autocomplete suggestions powered by another dedicated AI flow.
  • AI-Powered Recipe Generation: Based on the final ingredient list and a selected meal type (e.g., breakfast, dinner), the application calls a core Genkit flow. This flow prompts the Gemini model to generate multiple, complete recipes, including descriptions, ingredient lists with quantities, and detailed, step-by-step instructions.
  • AI-Generated Recipe Images: To make the recipes more visually appealing, I implemented a system that asynchronously generates a unique image for each recipe card using the recipe’s title and keywords. This happens in the background after the recipes are displayed, ensuring a fast initial user experience.
  • Interactive Recipe Viewing: Recipes are displayed in a clean, card-based layout. Users can click on any recipe to open a detailed modal view with cooking time, difficulty, and clearly formatted instructions.
  • Client-Side Favorites: I implemented a “favorites” system using browser localStorage, allowing users to save and revisit their preferred recipes across sessions without requiring a backend database.

Technical Architecture & Stack

I built this application using a modern, server-centric approach with Next.js, prioritizing performance, scalability, and an excellent developer experience.

Frontend

  • Framework: Next.js (App Router). I chose the App Router to leverage React Server Components (RSCs) by default. This minimizes the client-side JavaScript bundle size, leading to faster initial page loads and better SEO.
  • Language: TypeScript. I used TypeScript throughout the project to ensure type safety, improve code quality, and make the application more robust and maintainable.
  • UI Components: The user interface is built with React and styled using ShadCN UI. This provided a set of beautifully designed, accessible, and customizable components that I could easily integrate. I also created custom components where needed.
  • Styling: Tailwind CSS. I used Tailwind for all styling, which allowed me to build a consistent and responsive design system directly within my components. The app’s theme (colors, fonts, etc.) is configured in globals.css using CSS variables.
  • State Management & Data Fetching:
    • For client-side state, I used React Hooks (useState, useEffect, useRef). I utilized useTransition for non-blocking UI updates during intensive operations like AI calls.
    • For server communication, I relied exclusively on Next.js Server Actions. This eliminated the need for traditional API endpoints, simplifying the codebase by allowing me to call server-side functions directly from my client components.

Backend (AI Orchestration)

  • AI Framework: Genkit. All generative AI logic is managed through Genkit flows. This framework provides a structured way to define, run, and manage interactions with large language models.
  • AI Model: Google Gemini Pro. I used Gemini for all generative tasks due to its powerful multimodal and text generation capabilities.
  • Key Genkit Flows:
    • extractIngredientsFromImage: Takes a Base64-encoded image and returns a JSON object of ingredients.
    • generateRecipes: Takes a list of ingredients and a meal type, and returns a structured JSON array of complete recipes. I engineered the prompt to ensure the output format was consistent and reliable.
    • suggestIngredients: Powers the autocomplete feature by providing ingredient suggestions based on user input.
    • generateImage: Creates recipe images from keywords, leveraging Gemini’s text-to-image capabilities.

SEO & Performance

I implemented several SEO best practices:

  • Static Metadata: Each page uses the metadata export to define unique titles, descriptions, keywords, and canonical URLs.
  • Open Graph & Twitter Cards: Metadata includes configurations for social media sharing, ensuring rich previews on platforms like Twitter and Facebook.
  • Server Components: The primary use of RSCs improves the Largest Contentful Paint (LCP) score and makes content easily indexable by search engine crawlers.

This project demonstrates my ability to integrate cutting-edge generative AI with a modern, full-stack web framework to create a practical and engaging user-facing product.