Loading...
I built hilogiclabs.com entirely with AI — 30+ pages, 40+ APIs, 14 database tables. This article opens up the full architecture with Interactive Diagrams.
เราเล่าจากการทดลองจริงในแล็บ ไม่ใช่ทฤษฎี — และให้หลักฐานพูดแทน
จุดเจ็บ: ระบบมักพังตอนที่ไม่มีใครดู กว่าจะรู้ตัวก็เสียหายไปแล้ว
เดิมพัน: ระบบล่มเงียบ ๆ คือฝันร้ายของทุกทีม เพราะความเสียหายโตขึ้นทุกนาทีที่ไม่รู้
สิ่งที่เราทำในแล็บ: I built hilogiclabs.com entirely with AI — 30+ pages, 40+ APIs, 14 database tables. This article opens up the full architecture with Interactive Diagrams.
We built a full web application with AI — 30+ pages, 40+ API endpoints, 14 database tables. It's live, it's real, and people use it.
This article opens up the system from the inside. What architecture I started with, what it's evolving into, why — and why We built this as a showcase for our team.
I wanted to prove something to our team — one person plus AI can build a production-grade system. Not a prototype. Not a demo.
A system with CMS, Blog, Courses, Payment, Multi-language, Admin Panel, and Email Automation — all running live at hilogiclabs.com.
And I needed the team to understand that architecture — how you structure the system — determines whether it can scale, whether it's easy to maintain, and what the cost looks like long-term.
When I started building hilogiclabs.com, I picked a Monolith architecture — frontend and backend in the same process, deployed on a single server.
The reasoning was simple. I was building solo. Cost had to be low. And I needed results fast.
The diagram below shows the actual system running right now — hover over each component to see what it does:
วาง mouse บน component เพื่อดูรายละเอียด | เส้นแสดงทิศทางข้อมูล
But there are limits. And you need to know them before you scale.
Tight coupling — frontend and backend are bound together. If the backend has a problem, the entire frontend goes down with it.
No API contract — Server Components query Supabase directly. No API layer in between. If you need a mobile app or want partners to integrate, you'd have to build the API from scratch.
Scattered business logic — logic lives in API route handlers, query functions, and middleware. Not in one place. Hard to fix, hard to test.
Inflexible scaling — you scale the entire application as one unit. Can't add backend capacity independently.
"These aren't today's problems — they're the problems you hit when the business grows. Know them in advance, and you can prepare."
The entire architecture — from Cloudflare to Stripe — built by one person with AI
30+ pages and 40+ APIs through a single architecture
When the business needs to scale — mobile app, partner APIs, or a team growing past 4 people — the plan is to move to API-First.
Frontend and backend become separate processes. They talk through REST APIs with an API Gateway in between.
Here's the diagram — hover and compare with the one above to see what changes:
วาง mouse บน component เพื่อดูรายละเอียด | Frontend กับ Backend แยกกัน
| Criteria | Monolith (Current) | API-First (Future) |
|---|---|---|
| Structure | FE + BE in one process | FE (port 4001) separate from BE (port 5001) |
| Database access | Server Components hit DB directly | Through Repository Layer only |
| Mobile App | Need to build API from scratch | Same API, ready to go |
| Partner Integration | No public API | Open API + OpenAPI docs |
| Testing | Must spin up full server | Unit test per layer + contract tests |
| Security | No central gateway | Every request through Gateway (logging, rate limit) |
| Server cost | 1 instance — low | 2+ instances — higher |
| Best for | Solo dev, small teams, MVP | Teams of 4+, Mobile App, Enterprise |
Architecture that grows with the business — change when you must, not when you want
I didn't jump to API-First immediately. What I'm doing now is Hybrid — keep the Monolith, but start refactoring internally to add a Service Layer.
The reasoning:
The rule: change when you have to, not when you want to.
Every architectural decision documented — not for review, but for the next version
Over 30 pages and 40 APIs, all orchestrated through a single Next.js codebase
We built this to show our team three things:
1. AI delivers real production systems — not demos, not prototypes. This system is live with real users, real payments, real content. AI handled the majority of the coding — components, API routes, database queries, architecture analysis.
2. The cost equation has changed — work that used to need 3–5 people over 2–3 months? One person plus AI, in weeks. Server cost: under $25/month. Lower cost means higher margins.
3. The team gets to do better work — AI takes the repetitive tasks. People focus on creative work, design decisions, and solving problems that actually matter. That kind of work is more valuable, more interesting, and makes people grow.
AI cuts development costs by 70%+ — but it doesn't replace decision-making. It accelerates the person who knows what to build.
Q: What's the total server cost?
A: VPS at $8–$15/month + Supabase Free Plan + Stripe (fees only on transactions) + Resend (free 100 emails/day). Under $25/month total.
Q: When should you switch from
A: When you need a mobile app, want to open APIs for partners, or your team grows past 4 people and starts stepping on each other. Until then — stay with Monolith.
Q: Can AI really build a full web app?
A: AI writes production-ready code. But someone sets the direction, designs the architecture, checks quality, and makes trade-off decisions. I'd estimate AI handles 70% of the coding. The other 30% is design, decisions, and testing.
Every architectural decision documented — for the next version
Yes. Hi Logic Labs is a production web app built with AI (Claude + Cursor). From architecture design to coding, testing, and deployment. Stack: Next.js 14 + Supabase + Tailwind CSS. AI wrote roughly 95% of the code. Design decisions and business logic came from humans.
Next.js 14 (App Router) + Supabase + Tailwind CSS. AI models work best with well-documented, popular frameworks. Large community = more training data = fewer hallucinations. Choosing obscure stacks increases AI errors significantly.
Pure CSS + HTML only. CSS @keyframes for animations, :hover/:focus for tooltips, CSS Grid for layout. Embedded directly in blog content_html. No JavaScript needed — works with dangerouslySetInnerHTML rendering.
Currently Hi Logic Labs is a Monolith (everything in one Next.js app). Upgrade plan: separate API layer, Auth service, and CMS backend into individual services for independent scaling. Timeline: 6-12 months, migrating one service at a time.
Yes. Hi Logic Labs is a production web app built with AI (Claude + Cursor). From architecture design to coding, testing, and deployment. Stack: Next.js 14 + Supabase + Tailwind CSS. AI wrote roughly 95% of the code. Design decisions and business logic came from humans.
Next.js 14 (App Router) + Supabase + Tailwind CSS. AI models work best with well-documented, popular frameworks. Large community = more training data = fewer hallucinations. Choosing obscure stacks increases AI errors significantly.
Pure CSS + HTML only. CSS @keyframes for animations, :hover/:focus for tooltips, CSS Grid for layout. Embedded directly in blog content_html. No JavaScript needed — works with dangerouslySetInnerHTML rendering.
Currently Hi Logic Labs is a Monolith (everything in one Next.js app). Upgrade plan: separate API layer, Auth service, and CMS backend into individual services for independent scaling. Timeline: 6-12 months, migrating one service at a time.
สิ่งที่ได้ และหลักคิด
ของจริงที่เอาไปใช้ต่อได้ ไม่ใช่แค่ไอเดีย หลักคิดของเราคือทำให้เป็นระบบที่ทำซ้ำได้และไม่พึ่งความจำคน
อยากเห็นระบบแบบนี้ทำงานกับงานของคุณ — ดู ViberQC และลงชื่อรอรอบทดลองที่ hilogiclabs.com
Join Hi Logic Labs for premium Content, Templates and a quality Community
Sign Up
Three months running OpenClaw AI Trading — found 4 hidden bottlenecks. AI helped analyze, optimize multi-model routing, and cut costs while improving quality.
Woke up to alerts flooding 3 channels — server overload, 5 broken workflows, 20 containers fighting for resources. AI diagnosed, analyzed, and fixed everything in 8 minutes without writing a single line of code.
Built an AI Trading Agent pulling real-time stock data from 4 markets. At 80% completion, discovered Node.js couldn't handle 1,000+ concurrent users — because the AI prompt didn't mention scale requirements. AI proposed Hybrid Architecture (Node.js + Python) completed in 30 minutes.