The problem WebLy solves

🔴 The Problem: Web Development is Slow & Complex

Building a website today still faces massive barriers:

1. High Technical Barrier: Requires mastering HTML, CSS, Next.js, or complex "no-code" editor interfaces.
2. "Blank Page" Paralysis: Starting from scratch takes hours of setup before you see any visual result.
3. Expensive & Rigid: Hiring developers costs thousands, and standard page builders lock you into their platform indefinitely.
4. Slow Iteration: Making simple visual changes often involves digging through code or wrestling with dragged elements.

🟢 The Solution: WebLy 🚀

WebLy democratizes development by turning natural language into production-ready code:

• Instant Generation: Describe your idea in plain English ("A portfolio for a photographer"), and AI builds it in seconds.
• Conversational Editing: Don't like a color? Just tell the AI to change it — no manual coding required.
• Professional Designs: Automatically applies modern aesthetics like Glassmorphism and responsive layouts.
• Zero Lock-in: Unlike Wix or Squarespace, you can export clean, standard code (Next.js & Tailwind) to host anywhere.

WebLy bridges the gap between imagination and reality, letting anyone build professional web apps without writing a single line of code.

Challenges I ran into

🧱 1. Taming the AI's Output

One of the biggest hurdles was ensuring the AI (DeepSeek) didn't just generate valid code, but beautiful code.

• The Issue: Early versions would output functional but ugly HTML, or hallucinate Tailwind classes that didn’t exist — breaking the layout.
• The Fix: We implemented a rigorous System Prompt Engineering strategy, feeding the model a strict Style Guide context window. We also built a sanitizer layer that validates the generated JSX before rendering, preventing app crashes.

⏱️ 2. Real-Time Rendering Latency

We wanted users to see their changes instantly, but re-rendering an entire React component tree based on streaming text is resource-heavy.

• The Issue: The real-time preview was flickering or lagging as the AI typed long responses.
• The Fix: We optimized the state management system by implementing debouncing and batched updates instead of re-rendering on every token. This creates a smooth streaming effect where the website builds visually without freezing the browser.

🔌 3. Next.js 15 & Third-Party Integration

Using the cutting-edge Next.js 15 App Router introduced compatibility challenges with some libraries.

• The Issue: Integrating Clerk (Auth) and Three.js (Backgrounds) alongside aggressive server-side caching caused hydration mismatches.
• The Fix: We separated the architecture into Client and Server components — moving all interactive builder logic to client boundaries while keeping database calls with Drizzle ORM strictly server-side for security and performance.

🎨 4. Dynamic Design Consistency

• The Issue: When users requested "Dark Mode," the AI often inverted only part of the color system, leaving some text unreadable.
• The Fix: We enforced a predefined Tailwind Design Token system. Instead of hardcoded hex values, the AI uses semantic classes (e.g., bg-primary, text-muted), ensuring theme changes propagate consistently across the entire generated site.