Lessons Learned from a Failed Outsourcing Project: Frontend Development with Vue, Mock Server, and API Design

Background

The author took on an outsourcing project for a school teacher with limited funds, aiming to build a web app bound to a public account using a front‑end/back‑end split and a REST‑like API.

Uncertain Requirements

The project lacked proper documentation; requirements were communicated verbally and changed frequently, leading to repeated prototype reviews, misaligned expectations, and extensive UI design effort that slowed development.

Technology Selection

Although eager to try new technologies, the author chose Vue 2 in late 2016 when the ecosystem was immature, resulting in missing UI libraries, plugin incompatibilities, and additional time spent adapting code.

Technical Issues

Mock Server Setup

The team used json-server with a db.js file to define routes and integrate faker for random data. They added custom middleware to transform POST requests (e.g., /userDetail ) into GET requests, enabling mock responses for endpoints that otherwise returned only the posted data.

Vue Pitfalls

Examples include overusing v-model for component communication, directly manipulating the DOM, and mutating props, which caused state inconsistencies such as likes disappearing after navigation. Solutions discussed are event emission, server re‑fetching, and using an event hub or Vuex.

Error Handling

The author emphasizes handling both page‑load errors and network request failures, suggesting automatic retries, user notifications, logging error details to the server, and preserving form data in localStorage . A custom interceptor for vue-resource normalizes error responses.

API Design

Due to missing documentation, the front‑end and back‑end co‑designed the API, using a setting.js file to map mock and production endpoints. The team settled on using only GET and POST methods with noun‑based paths ending with verbs for clarity, and recommended using empty strings for null values to avoid type mismatches.

CSS and Miscellaneous Tips

Define global styles (font sizes, colors, backgrounds) early.

Avoid overflow-y: scroll on mobile; use rem units instead of px .

Leverage Vue‑CLI documentation, yarn, and study other frameworks (React, Angular) for design patterns.

Other Observations

The author notes the value of reading mint‑ui source code, handling numeric IDs correctly, distinguishing $route from $router , and treating null/undefined from the back‑end aggressively.