Open this on your computer
AI Flows are interactive, multi-panel experiences built for a larger screen.
Full-Stack Next.js 16 WebApp - Local Project Setup
Step-by-step workflow to scaffold a production-ready full-stack Next.js 16 web application locally using Claude Code and GitHub. Covers: React 19, TypeScript 5, Tailwind CSS 4, Shadcn/Radix UI, TanStack Query, Zustand, Mongoose 9 + MongoDB, NextAuth v5, Zod 4, MCP SDK, OpenAI SDK, Resend, PostHog, Sentry, Cloudflare Turnstile, Sharp. Includes folder structure scaffolding, environment config, CLAUDE.md with coding rules, .gitignore, and initial Git + GitHub push.
Choose your project name
create-next-app
Create Next.js 16 project
Shadcn, TanStack, Zustand, Icons
Install frontend packages
Mongoose, NextAuth, Zod, MCP, OpenAI
Install backend packages
Resend, PostHog, Sentry, Turnstile, Sharp
Install service packages
Folders + lib files
Scaffold directory structure & boilerplate
.env + CLAUDE.md + configs
Create env template & CLAUDE.md
init + .gitignore + first commit
Set up Git with proper .gitignore
Remote repository setup
Create repo & push
Recipe
9 nodes · 6 phasesFull-Stack Next.js 16 WebApp - Local Project Setup
Step-by-step workflow to scaffold a production-ready full-stack Next.js 16 web application locally using Claude Code and GitHub. Covers: React 19, TypeScript 5, Tailwind CSS 4, Shadcn/Radix UI, TanStack Query, Zustand, Mongoose 9 + MongoDB, NextAuth v5, Zod 4, MCP SDK, OpenAI SDK, Resend, PostHog, Sentry, Cloudflare Turnstile, Sharp. Includes folder structure scaffolding, environment config, CLAUDE.md with coding rules, .gitignore, and initial Git + GitHub push.