• Summary: This project consists of a backend management system for merchants and a mobile application for users.
• Role: Frontend Engineer
• Main Stack: 
  • Backend: C# / .NET / MySQL
  • Frontend: Vue Cli / JavaScript / Vue2 / Less / Vuex / Vue Router / Axios / Element UI / React Native / UniApp
• Highlight: In the early stages of mobile app development, we used the cross-platform framework UniApp. However, when we later needed to integrate a native ad SDK, we encountered significant limitations. Since rebuilding the app with a different tech stack would have been too costly in terms of time and manpower, we opted to package the existing UniApp application as a native HTML5 + CSS3 + JavaScript bundle. This bundle was then rendered within a WebView component in React Native. While certain features, such as product poster downloads, required additional bridge code, this approach significantly reduced the cost of migrating to a new tech stack.
• Difficulty: When integrating the native ad SDK on iOS, I faced a major challenge: I had never worked with native iOS development before, and the primary language for iOS development—Objective-C—was completely unfamiliar to me. Its syntax was drastically different from the C-like languages I was accustomed to. As a result, I had to dedicate a significant amount of time and effort to learning it from scratch before I could successfully implement the required functionality. This experience greatly strengthened my ability to learn under pressure and adapt to new technologies.

• Summary: This project includes a WeChat Mini Program for users, an Android tablet application for interview booths, and a backend management system for operators and merchants. (The Mini Program can be found by searching within WeChat Mini Programs.)
• Role: Frontend Engineer
• Main Stack: 
  • Backend: PHP / Laravel / MySQL
  • Frontend: Rsbuild / JavaScript / TypeScript / Vue2 / Scss / Vuex / Vue Router / Axios / Element UI / Echarts / VueDraggablePlus / Native WeChat Mini Program
• Highlight: The project's original tech stack was Vue CLI + Vue 2.6 + JavaScript. I refactored it to use Rsbuild + Vue 2.7 + JavaScript + TypeScript, replacing most CommonJS modules with ESM for consistency and introducing path aliases. Additionally, all new module development now follows the Composition API with the setup syntax (with complex components written in TSX). After the refactor, the project's development server startup time was reduced from 3–4 minutes to just 30–40 seconds (tested on an AMD Ryzen 5 4600U CPU). The modernized project is now significantly more efficient and maintainable.
• Difficulty: I implemented a 'componentized' architecture for the project, achieving a low-code-like effect. Currently, most major pages in the Mini Program are built using this componentized approach, allowing operators to configure pages via drag-and-drop and parameter settings in the backend management system. The project now includes approximately 15 component types and 20 navigation methods, with integrated event tracking for user interactions, which are displayed in the backend. Initially, I struggled with abstracting the 'components' since I had never developed similar logic before. Through careful planning and design, I assigned a unique type value to each component and leveraged Vue’s built-in component feature along with a lookup table approach to develop page components. Subsequent work involved building individual subcomponents, for which I designed a standardized props and events system to enable seamless two-way data binding between subcomponents and page components. Since its launch, the componentized system has had zero bug reports. Shortly after release, a new requirement emerged: the ability to toggle component visibility. Thanks to the well-structured design, I was able to implement this feature quickly and efficiently.

• Summary: This project is a pure web application built with React, primarily designed for internal use by the company's developers and select operations staff. It was initiated solely by me.
• Main Stack: 
  • Bun / Vite / TypeScript / React / Tailwind / Tanstack Router / Axios / Shadcn UI / Nuqs / Excel.js
• Highlight: Through this project, I gained hands-on experience with the highly popular Shadcn UI and TanStack Router. The project significantly improved the efficiency and user experience of internal developers and select operations staff within the company.
• Difficulty: Since the project included a feature for quickly generating WeChat Mini Program codes and links, it needed to display all Mini Program routes. However, exposing these routes posed a potential security risk if deployed publicly, as they contained sensitive information. To address this, I explored solutions on GitHub and ultimately found Staticrypt. By integrating it with vite-plugin-singlefile, I successfully implemented a client-side encryption mechanism, ensuring data security without relying on a backend.

• Summary: This project is an interpreted programming language that supports strings, booleans, integers, arithmetic operations, functions, higher-order functions, variable binding, and closures.
• Main Stack: 
  • Bun / TypeScript
• Highlight: Through this project, I fully implemented the development of a lexical analyzer, parser, and evaluator. The project was developed using Test-Driven Development (TDD) methodology, which helped ensure its stability and robustness. The tech stack and toolchain used in this project are quite innovative. I chose TypeScript as the development language and Bun as the runtime. Thanks to Bun, I was able to quickly package the project into an executable program for distribution.
• Difficulty: The implementation of closures was a challenging aspect. The final solution was to bind an environment object to each function-type object. The environment object not only stores a map of function parameters but also holds a reference to the outer environment. When a function encounters a variable, it first looks for it in its own environment; if not found, it searches in the outer environment, continuing this process until it either finds the variable or reaches a null outermost environment. This mechanism is somewhat similar to the prototype chain in JavaScript.

Frontend Development

• Proficient in HTML5, CSS3, JavaScript/TypeScript, and Tailwind, with solid knowledge of frontend fundamentals and tools.
• Skilled in Vue2/3 and React, capable of efficiently developing highly accurate, responsive SPA applications based on design specifications.
• Experienced in Next.js and Astro for SSR/SSG, enabling the development of SEO-friendly, highly accurate static pages and full-stack applications.
• Proficient in cross-platform technologies such as React Native and UniApp, capable of building high-performance mobile applications.
• Skilled in configuring and using ESLint, Prettier, and Biome to maintain code quality and readability.
• Familiar with cross-platform desktop application development using Electron and Tauri.
• Experienced in configuring and optimizing build tools such as Vite and Rsbuild.
• Familiar with performance testing tools such as React Scan and Unlighthouse.
• Experienced in writing unit and end-to-end tests using Jest and Puppeteer.
• Basic understanding and hands-on experience with 2D rendering engine Matter.js and 3D rendering engine Three.js.
• Basic understanding and hands-on experience with animation libraries GSAP and Motion.
• Familiar with monorepo architecture and capable of setting up monorepo projects using pnpm or Bun.
• Basic understanding of browser extension development.

Backend Development

• Proficient in JavaScript/TypeScript and experienced in building efficient backend services with Nest.js and Hono.
• Familiar with both NoSQL databases (MongoDB, Redis) and relational databases (MySQL).
• Familiar with Java and capable of developing efficient backend services using Spring Boot.
• Experienced in using ORM libraries such as MyBatis-Plus, TypeORM, and Drizzle.
• Basic understanding and hands-on experience with Spring Cloud Alibaba ecosystem.
• Basic understanding and hands-on experience with message queues like RabbitMQ.

Other

• Proficient in using AI tools such as ChatGPT, Cursor, and V0 to enhance development efficiency and experience.
• Familiar with Docker for application containerization and deployment. Basic understanding and hands-on experience with Kubernetes.
• Experienced with Git and follows best commit practices (primarily using commitizen). Contributed PRs to the Planka project and Astro documentation, which were successfully merged.
• Strong UI/UX awareness and ability to provide valuable suggestions for optimization in design review meetings.