AI Recipe Generator: Turn Food Photos into Instant Recipes with AI 🍳✨

Nithin Pradeep — Thu, 30 Oct 2025 08:38:42 +0000

Have you ever looked at a dish and wondered, "What's in it — and how can I make it myself?" Introducing the AI Recipe Generator: a project that uses computer vision and AI to analyze any food photo and instantly generate a step-by-step personalized recipe. Upload a picture of your ingredients or a finished dish—get a complete recipe (with cooking steps) in seconds!

Why I Built This

Food recognition and AI have always fascinated me. As a developer, I noticed a gap: plenty of sites offer recipe browsing, but almost none use AI to bridge the gap between your fridge and cooking. What if we could snap a photo and get actionable, tailored recipes—making home cooking easier, smarter, and more fun?

Core Features

Image-Based Recipe Generation: Simply upload a food photo; the AI will suggest what you can cook.
Smart Ingredient Detection: The backend identifies ingredients and even guesses cooking methods.
Personalized Output: Adjust recipes based on diet, cuisine, or available ingredients.
Step-by-Step Instructions: Recipes come with cooking steps, timings, and planned nutritional details.
Recipe Collection: Save and manage your favorite recipes in-app.

Tech Stack

This project is full-stack, leveraging cutting-edge tools for both frontend and backend:

Frontend: Next.js 15 (React), TypeScript, Tailwind CSS, React Query, React Hook Form
Backend: FastAPI (Python), SQLAlchemy, Pydantic, OpenAI/Anthropic AI, Uvicorn
Utilities: Docker, pytest, Alembic (for DB migrations), Vercel & Netlify (deploy)

How It Works

Upload: User uploads a photo (ingredients or finished dish).
Vision-to-Recipe AI: FastAPI backend uses advanced image recognition to detect ingredients and dish types.
Recipe Generation: The backend crafts personalized recipes using AI language models (OpenAI/Anthropic APIs), creating ingredient lists, steps, timing, and difficulty.
Web Interface: The frontend (Next.js) displays the result, lets you customize preferences, and save your recipe library.

Implementation Walkthrough

Project Structure

/frontend: Next.js React app (UI, API clients)
/backend: FastAPI service (AI endpoints, database models)

Getting Started

Clone the repo:

git clone https://github.com/nithiin7/ai-recipe-generator
cd ai-recipe-generator

Run both servers with a single command:

./run-dev.sh

Environment Setup
API and AI keys stored in .env files for backend and frontend.
Docker build scripts for seamless deployment.
Key Endpoints

POST /api/v1/recipes/generate — generate a recipe from an uploaded image.
GET /api/v1/recipes — browse all recipes.
Auth and user-specific features planned for future versions.

Try It Yourself! 🚀

Repo: nithiin7/ai-recipe-generator
Clone, configure your API keys, and run locally or deploy to Vercel/Netlify.
Tinker with the code to add more AI models or expand cuisine coverage!

Takeaways

Building this project taught me:

How to bridge computer vision and language models in real-world web apps
The value of clean API design using FastAPI and TypeScript
The power of Docker for rapid prototyping and deployment

Would love feedback, ideas for improvement, or contributions—let’s cook up some AI magic together!

🚀 How I Built My Developer Portfolio — and What I Learned Along the Way

Nithin Pradeep — Wed, 22 Oct 2025 17:24:05 +0000

When I started building my personal portfolio, I didn’t just want a digital resume — I wanted a reflection of my thought process as a developer. Every component, layout, and animation had a reason behind it.

In this post, I’ll walk you through how I built my portfolio, the tech stack behind it, and lessons learned that can help you create one that feels professional, personal, and performance-focused.

🎯 The Goal

As a software engineer at Paytm Payments Bank, I spend a lot of time thinking about design systems, user flow, and performance. I wanted my portfolio to represent those same values:

Fast and responsive across all devices
Clean and minimal, without unnecessary clutter
Built with reusable and readable code
Easy to update and deploy

It’s live here → Portfolio Website
Codebase → Code Repo

🧱 The Tech Stack

I kept the stack modern but simple:

Next.js → Server-side rendering, static generation, and routing made easy.
TailwindCSS → For clean, responsive, and utility-first styling.
Framer Motion and GSAP → Smooth animations that enhance the user experience.
Vercel → Seamless CI/CD and global hosting with almost no config.
Contentful → For saving and fetching all the data. Dynamically updates the UI with new contents.

Each choice made development faster and more maintainable — no over-engineering, just a clear focus on what mattered.

⚙️ The Building Process

Inspiration I explored numerous websites on Awwwards to gather ideas and inspiration for my own design. I was particularly inspired by Huy Nguyen’s work, his use of color, layout, and clean animations really stood out to me. Definitely check out his websites!
Structure First, Style Later I began by mapping out the page flow — Home, About, Projects, and Contact — using simple semantic HTML and minimal CSS. Once the layout worked perfectly across viewports, I started layering in Tailwind styles.
Component Reusability Every repeating pattern became a component. For example: A generic ProjectCard to display each project dynamically. A shared Layout component for SEO and structure consistency. This kept the code DRY and made future updates painless.
Animations with Purpose Animations are subtle but intentional. For instance: Fade-ins for project cards as they enter the viewport. Smooth transitions between routes using Framer Motion. Also added Lenis Scroll for the smooth scroll effect. They’re not flashy — just enough to make navigation feel fluid.
Performance Tweaks After deployment, I focused on Lighthouse metrics. Lazy loading images, prefetching links, and compressing assets boosted performance significantly. My load time dropped by almost 40%.

🧠 Lessons Learned (That Might Help You)

Start simple. You don’t need every fancy library. Build the structure first — polish later.
Think scalability. Even for a small site, proper folder structure and reusable components matter.
Add personality. Your portfolio shouldn’t feel like a template — write in your voice, include your hobbies, and make it uniquely yours.
Performance matters. Recruiters may not say it, but they notice smooth, fast interactions.
Version control early. Track every iteration; it helps when revisiting design or debugging.

🏁 Final Thoughts

If you’re building your own portfolio:

Treat it as both a learning project and a personal brand.
Don’t overthink perfection — it’ll evolve as you do.
Add something that gives back — like a blog, guide, or open-source snippets.

Here’s mine again if you’d like to explore it:
👉 portfolio-nithin.vercel.app

I’d love to see what you’ve built too — share your portfolio links in the comments, and let’s connect!

DEV Community: Nithin Pradeep