NCB-X

🌟 Inspiration

We were inspired by platforms like Webflow and Wix but wanted to make something even more intuitive and powerful for non-developers. Our goal was to simplify the website-building process while integrating AI capabilities and a fully extendable admin system.

⚙️ What It Does

Enables users to visually build responsive websites using drag-and-drop components.
Provides AI-generated content (text, headings, images) using Google Gemini via Genkit.
Allows users to save and reuse custom templates.
Supports publishing to subdomains or custom domains.
Handles user subscriptions and payments via Stripe.
Gives admins full control over users, templates, and moderation.

🏗️ How We Built It

Frontend: Built with Next.js (App Router), TypeScript, Tailwind CSS, and ShadCN UI.
Drag & Drop: Implemented using the @dnd-kit library for smooth canvas editing.
Backend: MongoDB with Mongoose, Stripe for payments, and Cloudinary for media storage.
Authentication: NextAuth.js with a custom credentials provider.
AI Integration: Google Gemini via Genkit to power real-time content generation.
Dynamic Site Rendering: Custom routing logic based on user subdomain or custom domain.

🧗 Challenges We Ran Into

Building a performant drag-and-drop editor that syncs in real-time with database updates.
Integrating AI content generation while handling token quotas and performance.
Managing subdomain-based rendering securely and efficiently.
Stripe webhook verification and testing in development environments.
Designing a flexible, role-based admin system without compromising UX.

🏆 Accomplishments That We're Proud Of

Launched a full-featured MVP within a tight timeline.
Successfully integrated Google Gemini AI for real-time content help.
Developed a scalable architecture with support for subdomains and future custom domains.
Created a seamless admin dashboard for user and content management.
Built an intuitive editor that feels like a real design tool, not just a web form.

📚 What We Learned

Deep understanding of drag-and-drop architecture using @dnd-kit.
Stripe subscription handling with custom pricing tiers and coupon support.
Genkit integration for scalable AI use cases.
Dynamic Next.js routing and deployment strategies for multi-tenant platforms.
Importance of detailed environment setup and onboarding for open-source developers.