Built with AI: Zero to Production with Agentic Coding
How I designed, built, tested and deployed this portfolio — with live ML demos, a secure backend and GCP infrastructure — without a fullstack background, using Claude Code as my main engineering collaborator.
The starting point
The challenge: build something nobody expected
I wanted a portfolio that wasn't a static CV. I wanted visitors to interact with real ML models, see pipelines in action, and understand how I think as an engineer.
No fullstack background
My background is AI/ML: models, data pipelines, experimentation. Next.js, TypeScript and the whole frontend layer were completely new territory.
Cloud infrastructure: the biggest challenge yet
I had some experience with Docker and GCP, but setting up a full CI/CD pipeline and orchestrating a production deployment was the most ambitious infrastructure challenge I had tackled.
An ambitious goal
Not just a nice-looking site: interactive RAG demos, a real conversational agent and image classification — all running in production.
The solution: agentic coding
Using Claude Code not as autocomplete, but as a programming partner: planning, reviewing, debugging and making architecture decisions together.
Tech stack
12 technologies, one container
From frontend rendering to language models, everything runs in a single multi-stage Docker container deployed on Cloud Run.
System architecture
One monorepo, two services, one image
The frontend (Next.js) and backend (FastAPI) run in the same container. Next.js serves the UI and proxies API calls to FastAPI.
The container exposes port 3000 (Next.js standalone). Routes starting with /api/* are internally redirected to FastAPI on port 8000 via the proxy configured in next.config.js. Cloud Run manages auto-scaling and TLS.
Backend engineering
FastAPI: 5 routers, layered security
The backend exposes specialized endpoints for each ML demo plus the contact form. Each layer adds a different kind of protection.
Per-IP rate limiting
Each endpoint has its own request limit to prevent abuse without blocking legitimate users.
reCAPTCHA v3 + honeypot
The contact form combines automatic bot validation with an invisible trap field for real users.
Input sanitization
All received text passes through sanitization before processing, eliminating injection attempts.
14 integration tests
API health, contact flow, and security middleware are covered by automated tests.
Infrastructure & CI/CD
Push to main → in production in minutes
I configured a continuous integration and deployment pipeline that automates the full cycle from commit to public URL.
push to main → production in ~4 minutes
Cloud Build detects every push to the main branch and runs the cloudbuild.yaml automatically: builds the multi-stage Docker image, publishes it to Artifact Registry, and deploys the new version to Cloud Run with zero downtime.
AI Demos
Three interactive AI projects in production
The portfolio doesn't show project screenshots — visitors can interact with the actual models directly in the browser.
Deep dive: RAG Playground
4 RAG architectures implemented from scratch
The most technical demo in the portfolio lets you compare four Retrieval-Augmented Generation strategies with the same document and the same question.
Naive RAG
Fixed-size chunking, retrieval by cosine similarity.
Overlap RAG
Configurable overlap between chunks to preserve context.
Semantic Chunking
Splits by automatically detected semantic breakpoints.
HyDE + Re-ranking
LLM generates a hypothetical document and results are reordered with a cross-encoder.
The process
Learning to collaborate with AI
This project was both a technical showcase and a personal experiment: how far can someone who knows ML but not fullstack go, if they use code agents correctly?
"I didn't ask Claude Code to write code. I asked it to build with me — to question my decisions, propose alternatives and explain the why behind each choice."
Plan before writing
Every feature started with a design session: what problem does it solve, what trade-offs does it have, what can go wrong. Claude Code helped identify problems before they existed.
Iterate with full context
Long sessions made it possible to build on previous work without losing the thread. The agent remembered decisions made hours earlier and factored them into new proposals.
Debug without frustration
From Docker errors on Windows to CORS inconsistencies in production, every bug became a lesson. The debugging process became systematic rather than trial and error.
Learn the why
I didn't just accept generated code. I asked why each decision, what alternatives existed, what security implications it had. That's what turns agentic coding into real learning.
Results
From idea to production, fully functional
This project demonstrated that agentic coding is not a shortcut — it's a different way of working that amplifies existing skills. Knowing how to design ML solutions, understanding system architectures and asking the right questions was what made this possible. Claude Code was the collaborator that turned those ideas into working code.
Want to see the demos in action?
All demos are live in production and ready to explore.