NovaForge AI is an AI-powered web design studio that helps users generate websites, redesign existing websites from URLs or screenshots, analyze UI/UX, SEO, accessibility, and performance, and build portfolios, landing pages, and event websites—all from one modern platform.
NovaForge Goes Live! 🚀Today was by far my biggest sprint during the Hack Club Stardance hackathon. NovaForge went from a frontend with authentication to a fully deployed AI-powered SaaS application.Today I built:🧠 A secure Node.js + Express backend that acts as a proxy for AI requests, keeping API keys hidden from the frontend.🤖 Integrated OpenRouter with automatic model fallback so generations continue even if one model becomes unavailable.💰 A daily credits system using Supabase that gives every new user 10 credits, deducts one credit per generation, and resets daily.🔑 A Bring Your Own Key (BYOK) feature that lets users save their own OpenRouter API key and generate without consuming daily credits.🖥️ A live website preview that instantly renders the AI-generated HTML, CSS, and JavaScript inside a secure sandboxed iframe.🔒 Production-ready security, including rate limiting, strict CORS policies, Helmet middleware, protected routes, and backend JWT verification. Finally, I deployed NovaForge to production!🚀 Frontend deployed on Vercel⚙️ Backend deployed on Render📦 Project pushed to GitHub✅ SPA routing configured for production NovaForge is officially live on the internet, and seeing an idea grow into a working product has been incredibly rewarding. Next Goals: Improve AI generation quality and speed, Add project history and cloud saving, Expand the Studio interface, Continue polishing the overall user experience. This has easily been my most productive day so far. Excited to keep building! 🚀
🚀 NovaForge Devlog #1Authentication System ProgressToday’s focus was building the authentication system for NovaForge.I started by polishing the authentication UI and experimented with two different user flows:A modern sign-in page featuring a 3D glowing orb.A custom 6-digit OTP verification screen with a WebGL particle effect that reacts as the user types.On the backend, I integrated Supabase Auth and successfully configured OAuth authentication with Google and GitHub. Setting up the OAuth providers required configuring credentials across Google Cloud Console, GitHub Developer Settings, and Supabase, but everything is now connected and working for local development.I also explored implementing a custom 6-digit OTP login using supabase.auth.signInWithOtp(). During testing, I discovered that Supabase’s default email flow sends a magic link instead of the verification token. To support the experience I want, I’ll be integrating Resend as a custom SMTP provider so I can customize the email template to deliver the OTP directly.Tech UsedReact + ViteTailwind CSSFramer MotionThree.js (@react-three/fiber)Supabase AuthNext StepsTest the authentication flow end-to-end.Configure Row Level Security (RLS) for secure project storage.Begin building the core Studio interface and design canvas.Deploy the first public version to Vercel.Authentication is now largely in place, providing the foundation for user accounts, cloud project storage, and the upcoming AI-powered design studio features.
