Layers Developer Center

VitePress
Decap CMS
Vue.js
TypeScript
Node.js
CI/CD
OpenAPI

A complete architectural migration of the company's documentation ecosystem, moving from a siloed Stencil build to a modern VitePress environment with automated CI/CD.

About The Project

During my summer internship, I was tasked with revitalizing the Layers Developer Center, our primary gateway for clients integrating with Layers services. The goal was to transform a fragmented, legacy site into a modern, high-performance "vitrine" (showcase) for our services.

The Challenge: Legacy Friction

The previous version (V1) suffered from three critical bottlenecks:

  • Technological Isolation: It was built using Stencil, which didn't align with the Vue.js stack used across the rest of the company.
  • Maintenance Overhead: Even minor text changes required direct repository modifications, making updates slow and error-prone.
  • UX Fragmentation: A lack of search functionality and a disjointed structure made it difficult for developers to find essential integration info.

The Transformation Strategy

1. Architectural Migration to VitePress

I led the migration to VitePress, a Vue-powered static site generator. This move was strategic: it unified our tech stack and allowed us to leverage the speed of Vite while keeping the simplicity of Markdown.

2. Decoupling Content Management with Decap CMS

To solve the "repo-dependency" issue, I integrated Decap CMS. This empowered non-technical stakeholders to manage documentation content through a user-friendly interface. By decoupling the content from the code, we enabled instant updates without requiring a developer's intervention.

3. UX & Technical Content Development

Beyond the infrastructure, I redesigned the navigation and implemented:

  • Efficient Search: Integrated a robust search function to reduce "time-to-information."
  • Visual Cohesion: Added features like Dark Mode and a reorganized layout to ensure the documentation matched the modern Layers brand.
  • Practical Guides: I authored a comprehensive Notifications API Tutorial, providing real-world implementation examples that now serve as a blueprint for all new documentation.

Key Results

  • Reduced Update Latency: Changes that previously took hours of dev-time are now handled in minutes via the CMS.
  • Unified Ecosystem: The documentation is no longer a "tech island"; it is a first-class citizen in our Vue-based platform.
  • Enhanced Credibility: A professional, clear, and searchable developer center that reinforces client trust during the onboarding process.
Layers Developer Center homepage

External Resources

The following resources provide a live look and a deep dive into the project's execution. Note: Both the live site and the technical article are written in Portuguese (PT-BR).