TONG-H

AI practice-use `cursor` to migrate features from an old project to a new one.

3692Frontendai2025-07-202025-08-24

background

I’ve got to migrate pages from an old project to a new one. i’m totally new to the code, whether the old or the new project. so my principle is to keep it safe and stay stable, and to minimize my verification work as much as i can.

the two projects are based on different tech stacks.

  • Old: React 15, Webpack, jQuery, internal ui framework
  • New: React 16.8+ and TypeScript and Redux, Vite, Axios, Ant Design

implementation

a few points i noted are as below:

  • technical stack gaps
    • obviously, js vs ts
    • class components with lifecycle methods vs functional components with hooks, etc.
    • direct DOM manipulation or jQuery usage should be refactored or removed.
  • ui and style differences.
    • both projects are using scss.
    • the old one using bootstrap and is imported by CDN, while the new one is using modern framework ant design.
  • api calls
    • jQuery vs axios with API service functions.
  • building differences, mainly on the proxy configs.
  • project structure in the new project should be followed.

i should not paste code here, but i can share tips for future references:

  • for safety, i move pages and verify them one by one. i’m unfamiliar with the code, so changes means to spend extra time in the verification process. as for the migration, i hope it to be safe and stable, basically, moving the code from one place to another without any changes in the business logic and features
  • once one page’s migration is complete, we can instruct ai module to learn from this migration process and use that knowledge for the next one.
  • the part of technical stack gaps is kind of easy for ai. module can spot technical stack gaps and generate a transformation plan after analyzing the codebase of two projects, and then execute the plan quickly.
  • **features (like url jumps or relatively file paths) that depend on the env info (like location) should be double-checked—and might need to tweak them manually!
  • module may remove or change code for reasons of optimization during the migration without notifying the user. it’s not bad idea if you are familiar with the code and want to optimize it from long term perspective.