Trilingual Marketing Site & Lead Capture

The agency's own marketing shopfront, built as a trilingual static Next.js 14 application backed by a resilient Node/Express lead-capture microservice on Render. Engineered to turn a supplied, unbuildable homepage design into production code, author the undesigned legal and localized surfaces outright, and maintain dual-sheet lead redundancy that remains live and executable today.

Internal agency project at Spaceapps; the owner, payer, and client were the same entity, meaning this work is strictly excluded from third-party client project totals. The homepage visual direction was designed by Thiago, our tech lead. My role was full-spectrum design engineering: remediating the unbuildable homepage handoff in Figma, hand-coding all eleven marketing sections in Next.js, authoring three Portuguese legal pages and a custom 404 with zero design input, and building the backend lead pipeline.

Design remediation and authoring undesigned surfaces

Spaceapps represents the third documented instance of the design-file remediation pattern in this portfolio (following AllPrice and Gestrif). Once again, the initial homepage handoff contained structural layout flaws that could not survive responsive implementation. I ran a comprehensive remediation pass to enforce auto-layout, establish fluid breakpoint behavior, and align token hierarchies before writing code.

More significantly, Spaceapps is the only project in the portfolio where I authored critical production surfaces with zero design input. The client needed legal compliance and localized routing, but no Figma files existed beyond the homepage. I authored, structured, and styled three Portuguese legal pages totaling 731 lines (Terms of Use, Privacy Policy, Cookie Policy), engineered a custom 404 error experience, and mapped the entire localized route tree directly in code.

🧩11

authored marketing sections (1,961 lines)

⚖️731 lines

of authored legal copy across 3 pages

🌐3 locales

route-based i18n (PT, EN-US, ES-AR)

⚡HTTP 200

live /health response on Render today

Frontend architecture: Next.js 14 App Router and route-based i18n

Unlike AllPrice and Gestrif (which were Vite SPAs), Spaceapps is a genuine Next.js 14 App Router application deployed as a clean static export (output: 'export'). Built with React 18, TypeScript, Tailwind CSS, Radix UI, and react-hook-form + Zod, the frontend organizes 1,961 lines of code across eleven bespoke section components:

• Header with responsive drawer navigation and language switcher.
• Hero section highlighting agency positioning and primary call to action.
• Crawling banner and client logo showcase.
• Mission, About Us, and Team sections presenting agency capabilities and staff.
• Checklist and Testimonials sections structuring social proof.
• Contact form with real-time validation via react-hook-form and Zod schemas.
• Footer with legal links, social channels, and institutional credentials.

To satisfy the agency's requirement for English and Spanish internationalization without duplicating component trees, I built a route-based localization architecture. A typed useTranslations() hook reads usePathname() to resolve the active locale (pt default, /en-us, /es-ar), mapping dynamic strings across three structurally identical 162-line translation dictionaries.

Lead-capture pipeline: Self-healing dual Google Sheets & Mailgun

Rather than relying on third-party form webhooks, I engineered a dedicated 300-line Express microservice (server/server.js) hosted on Render. Designed for lead durability and zero data loss, the pipeline features:

• Dual-Spreadsheet Redundancy — Authenticates via a Google Service Account and writes each submission to both a primary and backup Google Sheet in isolated try/catch blocks, preventing a failure in one sheet from compromising the other.
• Self-Healing Targets — Automatically verifies sheet existence via ensureSheetExists(), creating the target tab ('Contatos Site Space') if missing, and initializing column headers with createHeadersIfNeeded() on empty sheets.
• Mailgun Alert System — Dispatches formatted notification emails to agency stakeholders upon submission, with dedicated /email-test diagnostics.
• Health Telemetry — Exposes a public GET /health endpoint that confirms the active configuration status of both Mailgun and Google Sheets.

Live executable evidence: An endpoint that outlived its domain

Production web surfaces are often fragile, but code deployed on modern cloud infrastructure can endure. When Spaceapps wound down operations, its domain spaceapps.com.br was surrendered and no longer resolves (NXDOMAIN). However, the Express service on Render remains operational. Anyone can query https://api-site-space.onrender.com/health and receive an immediate HTTP 200 confirming that both integrations are configured. It is the portfolio's sole independently executable piece of proof.

What this is not

• Not a third-party client project. Spaceapps was the agency itself; payer and client were identical, so this is excluded from client project counts.
• Not Juan's homepage design. The visual direction for the homepage was created by Thiago; Juan remediated the file and engineered the frontend.
• Not an application backend. It is a specialized lead-capture pipeline. The file app/api/contact/route.ts is 0 bytes and does not run under static export; the working service is Express.
• Not Supabase, Bubble, or n8n. Past repository drafts incorrectly listed these technologies; they are absent from the codebase.
• Not the localization strategy decision. The agency mandated three languages; only the route-based architecture was Juan's design.
• Not verifiable on spaceapps.com.br Wayback snapshots. Captures for that domain ended in March 2025 before this build shipped; those archives show an older, unrelated site.
• Not a CI-ready repository. The clean script relies on a Windows-specific PowerShell file and fails on Linux CI environments.
• Not proof of production lead volume. No marketing analytics or conversion volumes were retained before the agency closed.

The value of end-to-end design engineering

Spaceapps demonstrates the breadth of a design engineer's contribution to an organization. When an agency needed a comprehensive digital asset, the scope extended far beyond translating a single canvas into HTML. It required remediating unbuildable mockups, authoring missing legal and internationalized surfaces, structuring modular React components, and engineering a resilient lead-capture pipeline. The resulting asset outlasted the agency that commissioned it.

Evidence

The platform launched in September 2025 and served as Spaceapps' public presence until the agency wound down. While the original domain spaceapps.com.br expired and now returns NXDOMAIN, the static build is durably preserved on my self-hosted mirror (spaceapps.juanpablosilva.com.br) and archived on the Wayback Machine. The lead-capture service on Render (api-site-space.onrender.com/health) remains active and answers HTTP 200 today, outliving the frontend, the agency, and the domain registration itself.