Recipo

Next.js TypeScript Tailwind

Overview

Developed an AI-powered web application that transforms YouTube cooking videos into structured recipes using modern web technologies and API integration. The application addresses the challenge of extracting useful information from unstructured video content by automatically generating a recipe title, ingredients, and step-by-step instructions. This project demonstrates full-stack development capabilities and the integration of AI services into a real-world product.

Features

* Converts YouTube cooking videos into structured recipes (title, ingredients, and instructions)
* Uses AI to analyze and transform unstructured transcript data into readable output
* Provides a clean and intuitive user interface with embedded video playback
* Handles asynchronous client–server communication using API routes
* Includes validation to detect non-cooking content and prevent invalid results

How It Works

* User inputs a YouTube video URL
* The application extracts the video transcript
* The transcript is sent to an AI model for processing
* The AI returns structured recipe data
* The frontend parses and displays the result alongside the video

Technical Highlights

* Built with Next.js using App Router architecture
* Implemented server-side API routes for secure AI communication
* Designed structured output formatting for reliable AI responses
* Managed asynchronous data flow using fetch and async/await
* Handled client/server component separation in React