Last month we tested Cursor, but due to limitations on the free tier, we didn’t do any complex feature development, just some simple testing. At that time, we also discovered that ByteDance released a similar product, and both used the same underlying large language model – Claude-3.5.
Byte’s product is called Trae, first launched for Mac, and finally released a Windows version this February. Products from big companies are just good – you can use them for free, without paying, with unlimited access to Claude-3.5. This model has a very nice effect.
Ultimately, I got stuck on the development of the K-line chart. Due to my basic lack of knowledge in React, I had to give up. To continue developing it, I need to supplement some fundamental front-end knowledge and break down the tasks more finely, rather than giving a large task: develop the K-line chart.
Issues found
- Due to insufficient training data for Vue3 + Element-Plus due to the use of foreign AI models, we chose React as the front-end framework
- There may be occasional grammatical errors that need manual correction
- Solutions to some complex problems require human guidance
- Code structure optimization requires human guidance
The most time-consuming part was packaging the frontend code into a container. As the author has no foundation, I had no concept of .env.production or tsconfig.json. I only managed to understand the corresponding logic with help from Bean. There’s a big difference in how the frontend development (dev) mode and build mode check the code. The container scripts for the backend database and services took about five minutes altogether.
Currently, AI primarily improves development efficiency; having a foundation is best, as AI won’t solve all your problems
Warehouse address
As the title says, this time we’re avoiding writing code and directly engaging with AI to design and develop a customizable stock selection module. Let’s see what kind of results we can achieve in the end.
Repository address: [https://github.com/ttf248/trae-demo]
Detailed usage instructions can be found in the README.md file in the repository
The warehouse contains many submission records, mostly conversations between me and Trae, as well as my tests of some of Trae’s functions, with notes indicating whether manual intervention was required to achieve the corresponding functionality
Prompt
The project was created from scratch, here’s the prompt for the project:
基于项目原型图，开发功能：自选股，需要支持合约的新增、删除、修改、查询。自选股界面需要展示基础的行情数据。支持多个不同的市场切换。
前端：react
后端：golang gin gorm
数据库：PostgreSQL
服务端需要支持跨域请求，同时需要考虑数据的校验和错误处理，如果后端服务不可用，前端需要告警提示。
后端需要展示请求和应答的日志；前端也打印通讯的日志，方便排查问题。
UI and interaction optimization
The design of the front-end interface is completely dependent on Grok. We first created a prototype in Trae, but it lacked aesthetic appeal. Due to the model’s strong coding capabilities but relatively weak other abilities, we need to use Grok to optimize the front-end UI.
By taking a screenshot of the current interface, uploading it to Grok, and having it help us optimize the UI, we can potentially receive many optimization suggestions at once. We will manually evaluate them and then copy them into Trae for execution, observing the effects of the optimization.
Technology stack
- Frontend: React + TypeScript
- Backend: Golang + Gin + GORM
- Database: PostgreSQL 17
System architecture
Backend architecture
The backend is implemented using the Go Gin framework for a RESTful API, with main modules including:
-
Database module
- Use GORM as an ORM framework
- Support configuring database connections through environment variables
- Automatically migrate database tables
-
Routing module
- RESTful API Design
- Unified error handling mechanism
- Built-in request logging
-
Cross-domain handling
- Support cross-domain in local development environments
- Configurable CORS policy
- Support cross-domain cookies
Frontend Architecture
Built with React + TypeScript, it achieves:
- Stock list display
- Self-selected stock management
- Market Data Display
- Error prompt mechanism