How Zhenkun Built a Unified Frontend Tech Stack for Rapid Scaling

Background

As Zhenkun's business expanded rapidly across Beijing, Shanghai, Wuhan, and Shenzhen, the frontend development team grew to over ten engineers, leading to divergent technology choices, high resource costs, and difficulty sharing tools.

2019 Technical Planning

In late 2019 the team surveyed industry trends and gathered internal feedback to reach a consensus on a unified frontend technology stack.

npm Private Registry

A private npm registry built with Verdaccio replaces public npm for internal packages, improving speed, security, and encouraging open‑source sharing within the company.

Frontend Scaffolding Tool

The team created a CLI tool (z‑cli) based on commander and inquirer to generate projects from templates, manage dependencies, and support plugins, enabling developers to start a new project in minutes.

Node.js Backend Architecture

Using TypeScript and Koa2, the backend provides a pluggable middleware system, unified routing, controller separation, template rendering, global error handling, and security headers, supporting SSR, API services, and scheduled tasks.

Mock Data Service

Based on the open‑source Yapi platform, the team provides mock APIs, interface documentation, and automated testing to decouple frontend and backend development.

Build and Deployment

Projects are containerized with Docker; CI/CD pipelines pull the node image, run build scripts, and start services. The process currently lacks full Docker cache utilization, which will be optimized later.

Unified Webpack

A shared webpack‑basic npm package standardizes loaders, plugins, and configuration for Vue, React, and other frameworks, reducing configuration overhead.

DevOps Platform

The DevOps platform containerizes frontend deployments, abstracts build, resource scheduling, and service management, improving stability and developer efficiency.

Static Resource Service

Static assets are served via a CDN integrated into the scaffolding tool, with fallback mechanisms to local resources and automatic health checks.

Quality Monitoring

Using the Elastic Stack (Filebeat → Kafka → Logstash → Elasticsearch → Kibana), the team collects server and client logs, visualizes metrics, and sets alerts to proactively address issues.

2020 Planning and Visual Editor

The roadmap includes a visual page editor (web‑IDE) that lets non‑developers create pages, a reusable UI component library built on mainstream frameworks, and expanded automated testing (unit, integration, E2E) to ensure code quality.

Future Outlook

Since mid‑2019 the team has built a zero‑to‑one frontend system that supports rapid business growth, and they continue to enhance code integration checks, visual editing, automated testing, and monitoring, inviting more frontend engineers to join the effort.