Create Next App

Makora AI - The Prompt-to-Web Site Builder

Building a personal website shouldn't feel like looking at an Excel spreadsheet. Makora is a delightful, high-personality AI builder that transforms simple, conversational prompts into fully responsive, beautiful web layouts instantly—wrapped in a frictionless, premium user experience.

Next.jsTypeScriptTailwind CSSClerkSupabaseArcjet

Live Demo GitHub

Problem

Most AI code tools feel cold, sterile, and difficult for creative users. Additionally, open generation endpoints are incredibly vulnerable to script attacks, rapid API token draining, and complicated multi-database user state synchronization.

Challenges

Shielding expensive LLM endpoints from malicious bot traffic, rapid form-spamming, and prompt-injection abuse
Synchronizing authenticated user data from a third-party auth provider into the core Postgres database seamlessly
Streaming unpredictable generative design tokens into a safe, sandboxed preview without crashing the DOM tree
Maintaining a fast, charming, and highly interactive user state while heavy asynchronous code-generation runs in the background

Constraints

Strict API token billing overhead demanding absolute protection against rapid, automated endpoint hammering
Operating within serverless execution limits which requires rapid database queries and optimized webhook architectures
Ensuring complete data security when letting external users render dynamically compiled code inside the browser

Key Engineering Decisions

Architected the full-stack engine using Next.js App Router for server-rendered speed coupled with dynamic stream processing
Deployed Arcjet at the edge to implement robust rate-limiting and bot detection, blocking malicious API abuse before it hits LLM tokens
Integrated Clerk for lightning-fast, delightful onboarding, matching it with Stripe Webhooks for seamless tier subscription tracking
Leveraged the Supabase Client SDK for instantaneous real-time reads, utilizing its robust Postgres backend for structured layout logging
Enforced strict JSON Structured Outputs from the LLM to guarantee incoming strings map perfectly to safe UI blocks

Trade-offs

Sacrificed deep, manual code-editor views to focus entirely on an approachable, magical, high-personality chat interface
Prioritized bulletproof endpoint protection through aggressive Arcjet filters over completely unrestricted anonymous guest generations
Restricted initial generations to a fine-tuned library of component blocks to guarantee the resulting sites always look beautiful

Impact

Engineered a production-ready, security-first SaaS framework protected against modern script-bot scraping vectors
Gained deep expertise in orchestrating edge middleware for proactive rate mitigation and user shielding
Mastered serverless identity architecture and webhook-driven transactional data mapping using Clerk and Supabase
Shifted from simply calling basic APIs to constructing a highly polished, protective, and commercially viable AI product

Next Improvements

Introduce inline chat revisions (e.g., clicking a generated hero section and saying 'make this font punchier')
Add an interactive analytics panel tracking real-time traffic statistics for live deployed user sites
Implement one-click custom domain mapping directly through a unified deployment dashboard
Design cooperative collaborative rooms allowing multiple users to edit an AI generation together in real-time

RVRANJANI VARSANI

Full Stack Engineer building scalable, performant, and user-friendly web systems.

Links

Home About Projects Blog

Connect

Github Instagram LinkedIn

Newsletter

Get the latest technical articles and updates delivered straight to your inbox.