Grab the templates → RIGHT HERE What if you could combine no-code with just enough code to build tools people actually want to use? In this video, I’ll show you how to create a YouTube analytics analyzer and title + thumbnail generator using Airtable, n8n and Claude code. You'll learn how to: • Structure the database • Build the automation in n8n • Design a clean UI with code • Deploy the application

Create a complete Next.js 14+ SaaS framework foundation with the following specifications: ## Project Initialization Initialize a new Next.js project with: - npx create-next-app@latest saas-framework --typescript --tailwind --eslint --app --src-dir --import-alias - Use App Router (not Pages Router) - TypeScript for all files - Tailwind CSS with custom configuration ## shadcn/ui Integration 1. Initialize shadcn/ui with proper configuration 2. Install these essential components: button, card, input, label, form, dropdown-menu, navigation-menu, sheet, dialog, avatar 3. Configure the components.json file for consistent theming 4. Set up proper import aliases for components ## Project Structure Create this exact folder structure: src/ ├── app/ │ ├── globals.css │ ├── layout.tsx │ ├── page.tsx │ └── (auth)/ # Route groups for future auth pages ├── components/ │ ├── ui/ # shadcn components (auto-generated) │ ├── layout/ │ │ ├── header.tsx │ │ ├── footer.tsx │ │ └── navigation.tsx │ ├── features/ │ │ └── landing/ │ │ ├── hero-section.tsx │ │ ├── features-section.tsx │ │ └── pricing-preview.tsx │ └── common/ │ ├── loading-spinner.tsx │ └── theme-toggle.tsx ├── lib/ │ ├── utils.ts # cn() utility and helpers │ ├── constants.ts # App constants │ └── types.ts # Shared TypeScript types ├── styles/ │ └── globals.css # Additional custom styles └── types/ ├── auth.ts # Auth-related types (for future) └── subscription.ts # Subscription types (for future) ## Configuration Files 1. **tailwind.config.ts**: Extend with custom colors for SaaS branding (primary, secondary, accent colors) 2. **prettier.config.js**: Include tailwindcss plugin for class sorting 3. **next.config.js**: Optimize for production with proper headers and redirects setup 4. **.env.local.example**: Template for environment variables (include placeholders for SUPABASE_URL, etc.) ## Core Components to Build 1. **Layout Components:** - Header with logo, navigation, and auth button placeholders - Footer with company links and social media

Hey Kreators! What part of the content creation process do you hate the most? Let me know in the poll and expand on it in the comments 👇

Hey Kreators! Just built this hybrid vibe coding + no-code backend system that analyzes YouTube, and helps you generate titles and thumbnails. Watch the video! Soon to drop on YouTube (step-by-step build). But will also drop the finished templates inside the No-Code Architects community

Thanks for letting me in - I am ramping up of the next few weeks, months to upgrade my skills on all this automation stuff - love it keep the content coming