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