200,000 lines of code: How we build and maintain large-scale AI prototypes
Sharing experience in building and maintaining large-scale AI prototype systems, and gaining in-depth understanding of monorepo project management methods and reusable toolkit design.
Core content:
1. Introduction to the project of building an AI prototype system with 200,000 lines of code from scratch
2. Introduction and advantages of monorepo project management methods
3. Detailed interpretation of project organizational structure and shared toolkits
Project Introduction
In three months, we built an AI prototype system with 200,000 lines of code from scratch. This is a very large project, just like building a building, which requires scientific planning and management. In order to make this system easy to maintain and expand, we adopted a project management method called monorepo (single code repository), and paid special attention to the design of reusable toolkits. This document will introduce how this project is organized and managed in plain language.
What is a monorepo?
Monorepo is like a huge storage box, where we put all the code in the project neatly. Imagine you have a lot of toys. If you put them randomly in various corners of the room, it will be troublesome to find them. But if you have a big storage box and arrange a fixed place for each toy, it will be easy to find and put away the toys.
The benefits of a monorepo are:
Code sharing is more convenient: just like the whole family shares a toolbox, when you need a tool, you can just go to the toolbox and get it. More unified version management: just like unified purchase of stationery, to avoid confusion caused by different people buying different things Teamwork is smoother: Just like working in the same studio, everyone can communicate and help each other at any time
How is the project organized?
Our project is like a well-designed building, where each floor has its specific function:
one-prototype/
├── apps/ # Code for each independent application
│ ├── base/ # Independent products, including service deployment, cloud instances, etc.
│ ├── course/ # Independent products related to college scenarios
│ ├── docs/ # Documentation for UI components
│ ├── idcloud/ # IDC related independent products
│ └── web/ # Independent test web application
├── packages/ # Shared code packages
│ ├── eslint-config/ # Code standard configuration
│ ├── hooks/ # React hook function
│ ├── request/ # Network request tool
│ ├── track/ # User behavior tracking tool
│ ├── typescript-config/ # TypeScript configuration
│ ├── ui/ # General interface components
│ └── zod/ # Data validation tool
Sharing Toolkit Detailed Explanation
Under the packages directory, we have carefully created a series of reusable toolkits, which are like professional toolboxes, each with its own specific purpose. Let's take a deeper look at the features and functions of these toolkits.
UI component library: standardized decoration toolkit
Just like the standardized components on a construction site, our UI component library provides a complete set of interface solutions. It is based on Tailwind CSS for flexible style customization, uses TypeScript to ensure type safety, and follows Radix UI's barrier-free design principles. The high configurability of the components enables them to be reused in a variety of scenarios.
In terms of development efficiency, the UI component library provides developers with complete component documentation and usage examples through a unified design language and interaction mode. Rapid development debugging and theme preview functions, coupled with cross-product reuse capabilities, greatly reduce the workload of repeated development. The standardized component interface design also makes integration extremely simple.
Our documentation system is built on Storybook, providing an interactive component display and debugging environment. Developers can preview the appearance and behavior of components in real time, dynamically modify component properties, and preview them on multiple devices and themes. The standardized documentation process ensures complete documentation of component usage, API descriptions, and best practices. This efficient development workflow makes independent development and testing of components easy and comfortable.
Zod Data Validation Toolkit: Data Verifier
As a data quality inspector in the project, Zod Data Validation Toolkit strictly controls the format and type of data. It not only ensures the correctness and security of data, but also provides powerful type inference functions. Especially when used with React Hook Form, it can provide type-safe form validation, automatically deduce form field types, ensure data security at runtime, and provide friendly error prompts.
User Behavior Tracking Toolkit: Data Logger
The track toolkit is like a careful recorder. It unifies and encapsulates multiple mainstream data statistics services, including Umami, Baidu Statistics, and Microsoft Clarity, etc. Through standardized event tracking methods and automatic page visit statistics, it provides comprehensive data analysis capabilities for products.
A major feature of this toolkit is its multi-platform data statistics integration capability. It not only supports the open source Umami statistics, but also seamlessly connects to Baidu statistics services and Microsoft Clarity. Developers can flexibly switch between different statistics services according to specific scenarios. In terms of user experience, the complete TypeScript type support, automatic error handling mechanism and rich debugging information make data tracking easy and reliable.
Code quality assurance toolkit: the perfect combination of ESLint and TypeScript
Just like a construction site needs a comprehensive quality assurance system, our code quality assurance toolkit provides comprehensive code quality and type safety assurance for the project through the perfect combination of ESLint and TypeScript. ESLint is responsible for unifying the team's code style, automatically discovering and fixing potential problems in the code, and implementing best practices to ensure that the code quality is always high. Its tight integration with the editor allows developers to get code improvement suggestions in real time.
TypeScript can catch potential errors at compile time through its powerful type system. Intelligent code hints and excellent refactoring support greatly improve development efficiency, and automatically generated type declarations ensure the accuracy of API usage. The collaboration of these two tools creates a complete development tool chain, making team collaboration smoother and code quality more guaranteed.
Web Request Toolkit: Communications Experts
The request toolkit is like a professional courier company:
Handles all data interaction with the server Centralized management of API requests Provide error handling and retry mechanism
Toolkit Collaboration
These toolkits do not operate independently, but work together to form a complete development ecosystem. The UI component library uses TypeScript configuration to ensure type safety, the network request tool works closely with the data validation tool to ensure data correctness, and user behavior tracking is combined with React Hooks to provide a better user experience. This collaborative working method makes the entire system more stable and reliable.
Project Management Tools
To better manage this large project, we used two main tools:
pnpm : An efficient package management tool that helps us manage various tools and libraries used in the project Turborepo : A tool specifically designed to manage large projects, making the entire project run more smoothly
Through such scientific project organization and management, we successfully built this AI prototype system with 200,000 lines of code in three months. This management method not only makes the development process more efficient, but also makes subsequent maintenance and upgrades easier. In particular, through the carefully designed toolkit system, we have greatly improved the code reuse rate and reduced the workload of repeated development. For friends who want to understand large-scale project management, the organization of this project provides a good reference.
