As Frontend Tech Lead, I led the architecture and development of the new petition platform for IPCO, a high-impact organization. My responsibility was to translate business objectives—maximum engagement, visibility, and reliability—into a cutting-edge technical solution. The result is a high-performance, SEO-optimized web platform built on a robust and scalable component architecture, setting a new standard for the donor and administrator experience.
My Role: Frontend Tech Lead, UI/UX Architect.
Technologies: Next.js, React, Chakra UI, CSS Modules, Sentry, Vercel.
Key Results:
High-performance platform with SEO optimized for maximum organic visibility.
Smooth and responsive user experience (UX) to maximize subscription conversion.
Reusable component architecture that reduced development time for new features.
Well-defined API contracts that ensured decoupling and agility between frontend and backend.
The Challenge: Engagement, Performance, and Visibility
An NGO's campaign platform thrives on its ability to attract, engage, and convert visitors. The challenge was not only to create a functional website, but to build a digital experience that excelled in three critical areas:
Absolute Performance: Slow pages increase bounce rates and hinder conversion. The platform needed to load almost instantly on any device.
Maximum Visibility (SEO): For campaigns to reach their full potential, they must be easily discoverable on search engines like Google.
Impeccable User Experience: The subscription process should be intuitive, fast, and accessible, eliminating any friction that could discourage a potential supporter.
My responsibilities as technical lead
Conducting and preparing all weekly meetings.
Translate customer requests into clear features and technical documentation.
Develop the initial outline of the database and API contracts.
Map and prioritize tasks, identifying performance bottlenecks and scaling or postponing non-critical processes (e.g., integration queues with other apps).
Study external API documentation and propose an integrated action plan.
Liaise with the external design team to define the UI/UX.
The Solution: Strategic Frontend Architecture with Next.js
I took on the technical leadership of the frontend, defining an architecture that would solve business challenges directly and effectively.
Performance and SEO as Pillars (Static-First): I adopted Next.js and its Static Site Generation (`getStaticProps`) capability with Incremental Revalidation (`revalidate`). This strategic choice ensures that petition pages are served as ultra-fast static files, resulting in minimal Time to First Byte (TTFB) and perfect SEO, as the content is fully rendered and available to crawlers.
API Contracts and Backend Integration: I acted as the bridge between teams, designing and validating API contracts. This clear definition of client-server communication was key to enabling parallel development, ensuring system decoupling, and facilitating long-term maintenance.
Robust and Accessible UI/UX with Chakra UI: I used Chakra UI to build a cohesive, responsive, and accessible component library. This not only accelerated development but also ensured a consistent, high-quality user experience across the application.
Image Optimization and Performance Perception: I implemented an advanced image optimization strategy using the next/image component in conjunction with the plaiceholder library. This generates low-resolution placeholders with a "blur-up" effect, dramatically improving the perception of speed during page loading.
Observability and Code Quality: I integrated Sentry for real-time error monitoring, enabling proactive identification and correction of issues in production. ESLint configuration ensured adherence to code standards, keeping the code base clean and maintainable.
Architectural Challenges Overcome
Ensuring Top Performance and Indexing (SEO): The main architectural decision was to use SSG (Static Site Generation). This solved the performance and SEO challenge, but required careful planning to handle dynamic content (such as subscription counts) and updates, solved with incremental revalidation and client-side calls.
Defining a Clear Boundary Between Frontend and Backend: The biggest leadership challenge was establishing a stable and efficient API "contract." By leading this definition, I enabled the backend team to work autonomously, while the frontend could be developed based on mocked data, optimizing the workflow for the entire project.
Impact and Results for the Business
The new platform is not just a website, but a strategic asset for IPCO, generating measurable results in engagement and efficiency.
✅ Maximum Engagement: The fluid user experience and exceptional performance have resulted in a platform that captures the visitor's attention and guides them smoothly to the subscription.
✅ Expanded Organic Visibility: Thanks to SEO-focused architecture, campaigns reach a larger audience through organic searches, reducing dependence on paid media.
✅ Maintainability and Scalability: Component-based architecture and clear API contracts make adding new features and maintaining the system a quick and low-risk process.
✅ Agile Development: The decoupling of frontend and backend, a direct result of my leadership in defining the APIs, proved to be an accelerator for the entire development team.
Conclusion
This project demonstrates my ability to translate business objectives into high-quality software architecture. As Tech Lead, my contribution went beyond writing code, focusing on making strategic technology decisions (Next.js, SSG), leading cross-team integration (API contracts), and delivering a final product that not only works but also generates a real and measurable impact for the organization.