• Last month, we experimented with cursor, but due to the limitations of the free quota, we didn’t develop overly complex features; we just did some basic testing. We discovered then that Byte also released similar products, both using the same large models – Claude-3.5 – at their core. Byte’s product is called Trae, initially launched in the Mac version and finally released its Windows version in February of this year. Big companies are good because you can freely “white嫖” (literally translates to “free-eat”), without having to pay, with unlimited use of Claude-3.5 – this model performs quite well.

Ultimately, we got stuck on the development of candlestick charts. As I don’t understand React at all, I had to give up. To continue developing, I would need to supplement my knowledge of front-end basics, breaking down the task into smaller, more manageable pieces instead of directly giving me a large task: developing candlestick charts.

Issues Found

• Due to the lack of training data caused by using foreign AI models and Vue3 + Element-Plus, React was chosen as the frontend framework.
• Occasional syntax errors may exist and require manual fixes.
• Solutions for some complex problems require manual guidance.
• Code structure optimization requires manual instruction.
• The most time-consuming part was packaging the frontend code into a container, due to my zero foundation in .env.production and tsconfig.json, I had no concept of these either; I only straightened out the corresponding logic by asking for help from bean sprouts halfway through. There are significant differences between the dev mode and build mode of frontend development, and the checks performed on the code. Backend database and service container scripts were completed in a total of five minutes. Currently, AI mainly improves the efficiency of development; having a foundation is best, not that AI will solve all problems for you.

Repository Address

As the title indicates, this time we’re going to try a chat-based approach with AI instead of writing code, aiming to design and develop a self-trading module. Let’s see what results we can achieve.

Repository address: https://github.com/ttf248/trae-demo

For detailed usage instructions, please refer to the README.md file in the repository.

The repository contains numerous submission records, most of which are dialogues between me and Trae, along with my testing of Trae’s functionalities, and notes on whether manual intervention was required to implement each feature.

Prompt

The project is to develop functionality from scratch, based on the following project prototype diagram:

Based on the project prototype diagram, develop features: stock selection (watchlist), which needs to support adding, deleting, modifying, and querying contracts. The watchlist interface should display basic market data. Support multiple different market switches.

Frontend: react
Backend: golang gin gorm
Database: PostgreSQL

The backend needs to support cross-origin requests, while also considering data validation and error handling. If the backend service is unavailable, the frontend should display an alert message.

The backend needs to display request and response logs; the frontend also prints communication logs for troubleshooting purposes.

UI and Interaction Optimization

The design of the front-end interface relies entirely on Grok. We initially created a prototype within Trae, but it lacked aesthetics. Because the model used has strong coding capabilities but weaker other abilities, we need to use Grok to optimize the front-end UI.

By taking screenshots of the current interface and uploading them to Grok, we can receive numerous optimization suggestions at once. We then manually evaluate these suggestions and copy them into Trae to execute and observe the results of the optimizations.

Technology Stack

• Frontend: React + TypeScript
• Backend: Golang + Gin + GORM
• Database: PostgreSQL 17

System Architecture

Backend Architecture

The backend utilizes the Gin framework (Go) to implement RESTful APIs, with the following key modules:

1. Database Module
   • Utilizes GORM as an ORM framework
   • Supports database connection configuration via environment variables
   • Automatically performs database schema migrations
2. Routing Module
   • RESTful API design
   • A unified error handling mechanism
   • Built-in request logging
3. Cross-Origin Handling
   • Supports cross-origin requests from local development environments
   • Configurable CORS policies
   • Supports cookie-based cross-origin access

Frontend Architecture

The frontend was built using React + TypeScript, implementing the following features:

• Stock list display
• Watchlist management
• Real-time quote data display
• Error handling mechanism