Built by Agents: The Making of Oneirico.com

Subtitle: A look under the hood at how one engineer + one AI agent built a complete digital presence in just 40 hours of total effort.

Introduction

When we decided to relaunch Oneirico, we didn't just want a new website. We wanted to test our own thesis: Can Agentic AI compress weeks of development?

The result you are looking at—built with React 19, Vite, and automated CI/CD—answers that question. Here is how we built it.

The Tech Stack 🛠️

We avoided the bloat of heavy meta-frameworks and stuck to a clean, performant core:

• Core: React 19 + Vite (Fast, lightweight)
• Styling: Pure CSS Variables (Future-proof, no massive utility classes)
• Hosting: Netlify on AWS Lambda (Serverless scale)
• Security: Client-side CAPTCHA + Netlify Honeypots (Privacy-first)
• Testing: Cucumber.js (Behavior Driven Development)

The Toolkit 🧰

The magic behind the speed was the specific combination of tools:

• The Agent: Antigravity (Google DeepMind's advanced coding agent).
• The Model: Gemini (Pro/Ultra models). This combination allowed for massive context retention (reading the entire documentation folder) and precise code generation.

The Agentic Workflow 🤖

This project wasn't "coded" in the traditional sense. It was orchestrated. Using next-gen Agentic tools, we operated as a pair:

1. Phase 1: The Sparring Partner: Before writing a single line of code, the AI acted as a requirements architect. We debated the spec, refined the "dream vs logic" concept, and established a detailed implementation plan.
2. Phase 2: The Builder: Once the requirements were locked, we switched modes:
   • I became the Director: Setting strategic goals ("Fix the hydration error").
   • The Agent became the Executor: Navigating the file system, writing code, and running builds page-by-page.

Key Wins

• 40 Hours Total Effort: From initial concept to a fully functional live production deployment.
• Automated QA: The agent wrote its own E2E tests using Puppeteer to verify every deployment.
• Self-Healing: When a library conflict (React 19 vs react-helmet-async) broke the build, the agent analyzed the logs and proposed an .npmrc fix within minutes.

Challenges & Solutions 🧩

1. The SEO Problem (SPA vs Search Engines)

Single Page Applications (SPAs) are notoriously bad for SEO because they render in the browser.

• The Fix: We built a custom Static Site Generation (SSG) pipeline. A post-build script uses Puppeteer to "snapshot" every route into static HTML, ensuring Google sees exactly what users see.

2. The Content Pipeline

We didn't want a CMS. We wanted code.

• The Fix: We implemented a Markdown-based content system. The agent built a loader that parses frontmatter metadata, allowing us to manage insights and case studies directly in Git.

3. Designed by AI 🎨

It wasn't just code. The entire visual identity was generated by AI:

• The Logo: We described the concept of "Oneirico" (dreams/logic), and the AI generated the geometric icon and typography.
• The Theme: The Teal/Slate color palette and the "glassmorphism" UI cards were defined by the AI based on a high-level request for a "Modern, Tech-Forward" aesthetic.
• Adaptive Theming: The system includes a robust Dark/Light mode toggle that respects user system preferences by default. The AI managed the complex CSS variable overrides to ensure contrast ratios remained accessible in both modes.
• Responsive UI: The agent autonomously implemented the mobile-first navigation and layout logic without needing specific pixel-perfect mockups.

4. Privacy & Analytics 🛡️

We needed data without compromising user trust.

• The Challenge: Integrating Google Analytics 4 while respecting GDPR.
• The Solution: The agent implemented a custom React hook that initializes GA4 only after the user explicitly accepts cookies. We intentionally avoided "dark patterns"—the banner is clear, and the default state is "Deny".

5. Visual Identity 🖼️

The site's look is defined by a balance of technical precision and human creativity.

Live Walkthrough:

6. The Human Role: An Extra Pair of Eyes 👀

While the AI wrote the tests, it lacked "visual common sense."

• The "White on White" Bug: The AI correctly implemented the styling logic, but in Dark Mode, a specific button ended up as white text on a white background. The automated tests passed (because the element existed), but a human review caught it instantly.
• The Lesson: The goal isn't replacement; it's collaboration. The human review is still the final gate for "feel" and usability.

Pro Tip: Use a layered testing approach:

1. Simulator: Use Chrome's "Device Mode" to rapidly cycle through viewports (catches 80% of layout bugs).
2. Local Network: Run npx vite --host to expose your local server to your Wi-Fi network, allowing you to test on real phones instantly.
3. Git Hooks: We configured husky to auto-run regression tests on every commit, preventing bad code from even entering the repo.
4. Deploy Previews: Use Netlify to share a protected URL with stakeholders.
5. CI Verification: Always check that the Netlify functionality build passed on your Branch Preview before merging to main.

Conclusion

Oneirico.com is more than a brochure; it's a proof of concept. It demonstrates that with the right Agentic AI workflows, small teams can deliver enterprise-grade quality at startup speed.

This is the future of software capability. And we are just getting started.

Tags: #AgenticAI #WebDev #React19 #Automation #Engineering