Multi-ERP Control Panel — Landing Page Remediation & Build

An unbuildable design file remediated, then implemented as the landing page.

Landing page for a control panel that unifies multiple ERPs and marketplacesLanding page for a control panel that unifies multiple ERPs and marketplaces

Received a landing-page design built from groups with no frames and no auto-layout — a file that cannot survive contact with responsive code. Rebuilt it into something buildable before writing a line, then implemented it: hero, four feature variants, pricing, testimonials, FAQ and CTA on a sixty-one-component React and shadcn base, plus the legal pages, maintained for about seven months. A build and remediation credit — the product design was finished before I arrived.

Role
Redesigned and coded the landing page — design-file remediation, then front-end build
Timeframe
Jul 2025 – Feb 2026
Stack
TypeScriptTailwind
Evidence
  • Design + code
  • Source
  • Product stack

View the build (self-hosted copy)Source code

The marketing landing page for a management panel connecting multiple ERPs and marketplaces, engineered to turn a supplied, structurally unbuildable design file into an inspectable, responsive React application. Built across roughly seven months of active maintenance with sixty-one components on a React + Vite + shadcn base, totaling 219 KB of TypeScript — the largest landing-page codebase in the Spaceapps set.

Agency subcontract at Spaceapps; the commercial client relationship belonged to the agency and I delivered as staff. The product — a multi-ERP system integrating Tiny, Bling, Mercado Livre, and Shopee — was designed and developed across thirteen backend sprints by a Bubble developer before and alongside my arrival. The landing page design was originated by Thiago, our tech lead. My role was design engineering: fixing a file made of arbitrary groups and zero auto-layout into an inspectable "LP otimizada" frame in Figma, then hand-coding the full responsive React interface.

The boundary: Attribution and design-file remediation

Most portfolio claims rely on personal recollection. Here the boundary is simple: my work in the codebase began only after the product design had been handed off to development. The app and admin interfaces were completely finished before my arrival.

When the landing page design was assigned to me, it arrived in an unbuildable state: nested Photoshop-style groups, zero auto-layout frames, missing responsive constraints, and absolute coordinates that would disintegrate on mobile viewports. Instead of blocking the sprint or sending tickets back, I executed a full remediation pass in Figma, rebuilding the landing page into a dedicated section named "LP otimizada". Unlike Gestrif, where Figma access later lapsed, AllPrice's remediated frame remains fully preserved and inspectable alongside the original raw frames.

AllPrice is the primary proof of my Design Engineer positioning: handed a design file that could not survive contact with code, I fixed the design in Figma first, then engineered the front end. Gestrif is the second project confirming this habit; AllPrice is the inspectable receipt.
219 KB
TypeScript codebase (largest in the set)
61
React & shadcn components

Frontend architecture: 61 components and 219 KB of TypeScript

AllPrice represents a distinct architectural stack within the Spaceapps client corpus. While projects like Celus and SYD utilized the Next.js App Router, AllPrice was engineered as a high-performance single-page application using React 18, Vite, React Router, and Tailwind CSS. At 219 KB of authored TypeScript, it represents roughly double the codebase size of Celus and more than twice upOS, structuring complex marketing narratives across modular components:

  • Hero section featuring value propositions, multi-ERP credibility badges, and conversion CTAs.
  • Four dedicated feature deep-dives detailing unified login, inventory sync, and multi-channel order orchestration.
  • Interactive pricing matrix with billing toggles and tier breakdowns.
  • Customer testimonial carousel and social proof grid.
  • Structured accordion FAQ addressing security, onboarding, and ERP integration mechanics.
  • Dedicated client-side routed pages for Terms of Use and Privacy Policy.

The two-version build: From WordPress to React

AllPrice was built twice. The landing page was originally constructed in WordPress (preserved as a historical reference at allprice.juanpablosilva.com.br). However, the visual precision, responsive fluidity, and component reusability mandated by the remediated design were heavily constrained by CMS overhead and rigid template structures. To achieve the exact responsive fidelity and performance the brand required, I rebuilt the entire landing page from scratch as a modern React and Vite application. Both versions remain live on my self-hosted subdomains as proof of this technical evolution.

Durable evidence and mirror preservation

Production web infrastructure is impermanent. Following the conclusion of Spaceapps' client engagement, allprice.app.br stopped serving the application and now resolves to a generic HostGator parking page. Because no Wayback Machine snapshot was captured while the site was live, the original production window closed. To maintain verifiable proof of the build, I host independent mirrors: allprice-lp.juanpablosilva.com.br hosts the client-rendered React SPA (where all text content lives within the 378 KB JavaScript bundle), while allprice.juanpablosilva.com.br hosts the server-rendered WordPress v1.

What this is not

  • Not product design. The multi-ERP app and admin interfaces were complete before I arrived at Spaceapps.
  • Not backend engineering or ERP APIs. The landing page advertises integrations with Tiny, Bling, Mercado Livre, and Shopee; these were delivered across 13 Bubble sprints by another developer. The repository contains no server directory.
  • Not Spaceapps' proprietary methodology. The delivery framework belonged to the agency; I delivered as staff within its development phases.
  • Not a Next.js application. The stack is a client-side React 18 + Vite SPA; next-themes was merely a theme management utility.
  • Not domain expertise in e-commerce operations. My exposure was strictly front-end and design engineering for the marketing surface.
  • Not a design portfolio piece. This is a front-end build and design-remediation credit, demonstrating technical implementation and handoff correction.
  • Not verified commercial metrics. The platform launched with real active users, but no analytics were retained before the hosting transition.
  • Not a single combined artifact. The WordPress build and the React refactor are distinct implementations hosted on separate mirrors.

The real value of design engineering

AllPrice captures the operational reality of high-volume digital delivery. When unbuildable design files reach development, projects stall, budgets escalate, and friction develops between disciplines. A design engineer resolves that friction at the boundary — fixing layout structures directly in Figma before a single line of code is written, then translating that structure into clean, maintainable, and type-safe TypeScript. AllPrice proves that capability with inspectable artifacts and durable code.

Evidence

The page shipped and operated in production before the client hosting relationship concluded; allprice.app.br now resolves to a parked HostGator page with no surviving Wayback snapshot. The codebase and build are preserved through the public repository and self-hosted mirrors on my domain. The React refactor is inspectable at allprice-lp.juanpablosilva.com.br, while the original WordPress v1 is preserved at allprice.juanpablosilva.com.br. No quantitative conversion metrics were retained — a confirmed absence across this corpus.