Frontend Architecture⚙️
- Next.js 14
- React Server & Client Components
- Tailwind CSS
- TypeScript
- Components Driven Architecture
- API Layer
Popcorn AI is built using Next.js 14 with the App Router, combining React Server Components for fast initial loads and Client Components for interactive features. Tailwind CSS powers the UI, and all API communication flows through a clean API layer. TypeScript ensures type safety across the codebase, and a component-driven approach ensures maintainability and scalability.
Backend Architecture🔧
- Python
- FastAPI
- Vector DB
- LLM for explanation generation
- Structured JSON responses
- Frontend fetches full movie details for rendering
- Modular routers
- Vector DB + similarity search + LLM
- RAG (Retrieval-Augmented Generation) pipeline
The backend is powered by Python and FastAPI, exposing modular REST endpoints for movies, search, and AI reasoning. Similarity search is performed using Pinecone Vector DB, embeddings, and LLM reasoning explains why movies were recommended. Popcorn AI uses a RAG pipeline enabling the system to ground LLM outputs in real movie metadata and retrieved contextual information.
Infrastructure🏗️
- Local Development Environment — Next.js frontend and FastAPI backend running locally for rapid iteration.
- Modular File Structure — Clear separation of frontend, backend, and AI pipeline components.
- Pinecone Vector Database — Stores movie embeddings and powers similarity search.
- Pinecone Serverless Deployment (AWS) — Vector DB hosted on AWS regions for low‑latency retrieval.
- Gemini AI — LLM used for generating grounded reasoning and explanations.
- Environment based Configuration — API keys, Pinecone credentials, and other configuration keys stored in environment variables.
- RAG Pipeline — Retrieval Augmented Generation ensures AI outputs are grounded in real movie metadata.
AI Summary Explanation🤖
The AI Summary uses a lightweight prompt that feeds the movie’s title and overview into an LLM, which then generates a clean, 3–4 sentence synopsis written in natural, human‑friendly language. When the movie page loads, the system calls this LLM-powered summary generator to instantly produce a polished explanation of what the film is about.
AI Fun Facts Explanation🤖
AI Fun Facts uses a highly structured prompt that instructs the LLM to produce exactly three short trivia items about the movie, formatted as a single paragraph with semicolons separating each fact. This controlled LLM prompt ensures predictable, clean output while giving users fun, engaging insights the moment they open the movie page.
AI Similar Movies Explanation🤖
AI Movie Similarities blends the private Popcorn AI movie dataset with vector database retrieval and an LLM to explain why a film feels similar to a set of related titles. The vector DB uses semantic embeddings to find the closest matches from your internal movie catalog, and the LLM then produces a short, 3–5 sentence explanation in plain, concrete language. It focuses on real, observable traits such as genre, tone, pacing, character dynamics, and audience appeal and is designed to be honest when similarities are weak. This gives users a natural, human‑sounding explanation grounded in actual relationships found in the private Popcorn AI database.
Built by David Doan👨💻
David Doan is a senior software engineer with 15+ years of experience building scalable, high‑performance web applications used across enterprise environments. His background spans modern frontend engineering, component‑driven architecture, design systems, accessibility, and seamless API integration. He specializes in React, TypeScript, Next.js, and modern UI engineering, and is transitioning into an AI Application Engineer role focused on agentic workflows, LLM‑powered interfaces, and real‑time inference systems.
David’s engineering approach blends strong architectural discipline with AI‑assisted development techniques. He leverages tools like GitHub Copilot, Claude and Gemini to accelerate delivery, improve code quality, and enhance component design workflows. His work emphasizes maintainability, performance optimization, ADA/WCAG compliance, and clean, reusable UI patterns.
Across his career, David has modernized legacy systems, led enterprise UI redesigns, built design‑system‑driven component libraries, and collaborated closely with product, UX, and backend teams to deliver polished interfaces used by thousands of users. His experience includes frontend engineering, API development and integration, backend support, database development, secure coding practices, and large‑scale enterprise application maintenance.
Popcorn AI represents David’s evolution into AI‑powered application engineering, combining his frontend expertise with modern AI pipelines, vector search, RAG workflows, and real‑time LLM inference. He designed the system’s agentic workflow, structured prompt templates, similarity‑search pipeline, and LLM‑driven explanation modules, ensuring predictable, grounded, and user‑friendly AI output.
David’s engineering philosophy centers on clarity, reliability, and user experience. He believes AI applications should feel fast, intuitive, and trustworthy, and he designs systems that balance modern LLM capabilities with real‑world constraints such as latency, determinism, and error handling.
Connect with David on LinkedIn : https://www.linkedin.com/in/david-d-72393065/