Novi Frontend Architecture Diagram

This architecture diagram illustrates the complete technical chain of Novi's frontend, from user requests to page rendering. It utilizes the Next.js server-side rendering framework, handling requests through multi-level routing (page routing and API routing). Frontend state management uses Redux Toolkit in conjunction with React Context for layered management. The UI component library is custom-developed based on Ant Design and encapsulates common business components. The architecture includes a request interception layer (Axios encapsulation, unified error handling), a data caching layer (React Query combined with localStorage), static resource CDN acceleration, and build optimization strategies (code splitting, lazy loading of images, and on-demand import). It also integrates frontend monitoring (Sentry) and an event tracking system, supporting a complete frontend engineering system from development and debugging to online operations.