Project: DIGITALBREAK - Full-Stack Web Development | Pool Deza
Details, tech stack, key features, and impact of DIGITALBREAK
Lead Management Landing & CRM — Performance marketing platform with 500+ monthly leads and Core Web Vitals A+.
DigitalBreak is a performance marketing platform that integrates a modern landing page with centralized contact management. I designed and developed a high-converting (multilingual EN/ES) site featuring a dynamic carousel, real-time validation form, and complete admin panel.
As the Full-Stack Developer (Tech Lead), I was responsible for the entire architecture, designing reusable components, integrating authentication, optimizing SEO/Core Web Vitals, and deploying on Vercel.
The system processes 500+ monthly leads with enterprise-grade security (reCAPTCHA v3, NextAuth, CSP headers) and maintains a 15%+ conversion rate.
- RoleTech Lead
- Year2025
- StackNext.js 15, TS, Prisma
- StatusIn Production
- Leads/mo500+
- Uptime99.99%
Tailwind CSS 3, Custom Fonts (Satoshi, THE_GLITCH)
reCAPTCHA v3, CSP headers, CORS
Zod, react-hook-form
Vercel Analytics, SpeedInsights
Hero with autoplay carousel (10s), 3 sections (Gray, Black, Pixel) with smooth Framer Motion animations.
Global context + typed constants (TEXT_CONTENT) + regional-friendly URLs with getBaseUrl().
Client/server validation with Zod, invisible reCAPTCHA v3, and async submission with visual feedback.
Contact management (listing/deletion), 'assisted' state, and table with filters and search.
Google login, roles (admin/user), JWT in secure cookies with NextAuth.js.
Dynamic metadata, OG images, Sitemap, robots.txt, canonicals, and Core Web Vitals A+.
Implemented Context API + typed constants (TEXT_CONTENT) to support EN/ES without replicating components. Dynamic routing with getBaseUrl() handles prod vs dev.
Integrated Zod schemas with client-side validation, server actions for submission, and reCAPTCHA v3 without disrupting UX. Error handling with visual feedback + Prisma persistence.
Lazy loading with next/image, automatic Code Splitting, restrictive CSP headers, and optimized carousel with useEffect + setInterval without memory leaks.
TypeScript 98.9% coverage. Middleware with NextAuth for route protection. Seed script for development. Multi-stage Docker. Vercel SpeedInsights + Analytics integrated. Reusable components: Grid, Title, Container, CardSvg, Button variants. Escalable structure to support more languages.