Hey devs, I just published a new video that goes way beyond your usual “form tutorial.”

🔧 In this project, I built a developer-first, enterprise-style frontend DX setup using:

✅ Zod for safe, schema-based validation

✅ React Hook Form for UI + control

✅ Zustand for global state (without Redux overhead)

✅ Plop.js for scaffolding modules — and even scaffolders that scaffold

🧱 I used vertical slice architecture to structure everything:

Fully modular features/contact, features/user, etc.

A working ContactForm that hits /api/contact

A live User CRUD setup in-memory

And a DevDebugPanel to observe state, errors, and values live

🧠 I also demonstrate:

Real-time validation with Zod

Zustand toggling on submit

Chrome DevTools + React DevTools debugging

And even meta-programming with Plop templates

➕ Bonus: Part 2 will go fullstack with Prisma ORM + database persistence.

▶️ Here’s the full walkthrough video (with code architecture explained):

💬 Would love feedback from other devs.

Curious — do you use code generation (like Plop) in your stack?

👇 Happy to answer any questions or share thoughts if anyone’s curious about:

Plop customization

RHF + Zod integration

Zustand over Redux in real apps

Cheers!

– Harsimrat / TechScriptAid

r/reactjs