Back
Zod + Zustand + RHF + Plop.js β€” Enterprise-Grade Frontend DX Blueprint (with vertical slices, code generators, and debugging tricks for 2025)

integration

Programming

Strapi Nextjs typescript

web development

Software Development

Zod + Zustand + RHF + Plop.js β€” Enterprise-Grade Frontend DX Blueprint (with vertical slices, code generators, and debugging tricks for 2025)

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):

πŸ”— Watch here on YouTube


πŸ’¬ 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

https://youtu.be/tXlh9TR-HD8?si=R4RN4zcTQaQRTonk


r/reactjs

Techscriptaid is a rapid content delivery platform that helps you deliver content to your users in a fast and efficient way.
Designed and Developed by Harsimrat Singh