Heizi

·Frontend
Top-tier University · Communication Engineering|Frontend 10yrs 230days
>Engineer> 
@undef1ned404undef1ned4nil@gmail.comgithub.com/sarufarr

Summary

About Me

11 years of frontend engineering experience with a communication engineering background. Deeply focused on the React ecosystem with full-stack frontend capability across Web, React Native, and Flutter. Hands-on in Web3, AI Agent, big data, and cloud projects, serving as lead engineer and architect in multiple companies.

Skills

Tech Stack

Web3 · Chains

EVMSolanaBaseBSCTONBTC

Web3 · Product Verticals

Prediction marketDEXUniswapSocialFiTelegram Mini AppBrowser Extension / Wallet

Web3 · Tech Stack

WagmiEthers.jsPrivyPermissionless (AA Wallet)MetaMaskWalletConnectTonConnectRelay ProtocolJito (Solana MEV)Ethereum MEV (Flashbots)Solidity (Contract Review / Development)DApp Development

Frontend

ReactNext.jsTypeScriptJavaScriptVueTailwind CSSZustandReduxshadcn/uiRadix UIViteWebpackSSRFrontend Performance Optimization (Core Web Vitals)Rendering Performance OptimizationMotion / Framer MotionLottieSVG AnimationCanvasEChartsRechartsHighchartsd3.jsAnt Design & ProWebSocketService WorkerAngularLessjQuery

Architecture & Tools

Tech selectionPM / Project DeliveryEngineering ArchitectureProduction Incident TroubleshootingLog Retrieval / Root Cause AnalysisObservability (Logging / Tracing / Metrics)High-Concurrency OptimizationStability & Disaster RecoveryCaching StrategyESLintVitestJestCursorClaude CodeCodexGitHub Copilot

Backend & Data

Node.jsRustConvexAWSTerraformGitHub Actions CI/CD

Mobile

React NativeFlutterExpo

Experience

Work Experience

Buzzing

Remote

Frontend - Lead

2024.12 — 2026.2
ReactTypeScriptAI AgentWeb3
»Core coding»Architecture build & maintenance»Critical technical challenges»Complex issue resolution

Microcosm Labs

Remote

Frontend - Lead

2023.12 — 2024.12
ReactNext.jsTypeScriptCross-platformWeb3
»Core coding»Architecture build & maintenance»Critical technical challenges»Complex issue resolution

小西

On-site

Frontend & Specialist

2022.12 — 2023.12
ReactTypeScriptFlutter2C
»Core coding»Architecture build & maintenance»Complex issue resolution

上海数讯

On-site

Frontend & Architect

2021.3 — 2022.11
ReactTypeScriptCloud Computing2B
»Core coding»Architecture build & maintenance»System design»Complex issue resolution

第三极

On-site

Frontend Platform - Lead, PM & Architect

2017.10 — 2021.2
ReactReact NativeTypeScriptCross-platformServer-side RenderingWeb3
»Architecture build & maintenance»Core coding»End-to-end delivery management»Complex issue resolution

华为

On-site

Frontend - Lead & PM

2015.10 — 2017.10
ReactjQueryVueJavaScriptBig DataStreaming Media2C
»Core coding»Architecture build & maintenance»Complex issue resolution»Tech exploration and advocacy

Projects

Project Experience

Selected representative projects with full-cycle ownership are listed here.

Maybee (Web3)

Web3

Prediction market

Role

Tech selectionArchitecture designCore frontend codingCode review

Description

The web app is built on React + TypeScript, with migration to Next.js completed and production deployment still pending. To deliver a low-friction consumer experience, it integrates mature EVM solutions with Privy + Permissionless (AA wallet) for seamless account abstraction. The project uses Motion, Recharts, and SVG optimizations to meet high UX standards, benchmarks product experience against Polymarket and Kalshi, and leverages Claude Code and other LLM tools to improve development and code review efficiency.

Tech stack

ReactNext.jsTypeScriptVite 7WagmiPrivyPermissionlessMotion+3

BuzzingClub (Web3)

Web3

AI-agent-driven prediction market

Role

Tech selectionArchitecture designCore frontend codingCode review

Description

The web app is built with React + TypeScript, integrating mature EVM solutions to support multi-chain, multi-wallet, multi-platform, and multi-resolution scenarios (Base, Solana, Monad, etc.). To deliver excellent C-end interaction and visible agent workflow UX, the project adopts extensive animations (Motion, Lottie), plus WebSocket and SVG optimizations. The product experience benchmarks Polymarket and Grok, while Copilot and other LLM tools are used to improve development and code review efficiency.

Tech stack

ReactTypeScriptVite 7WagmiPrivy / ParaMotionLottieWebSocket+1

PixelSwap (Web3)

Web3

TON DEX + Telegram Mini App

Role

Architecture designFrontend codingCode review

Description

This React project is built on TonConnect + Vite + TypeScript, with CI/CD automated through GitHub Actions workflow and Terraform. It supports multiple resolutions with a unified codebase across platforms (Tailwind was removed and replaced with atomic Less). UX is improved with multiple strategies, and the product is delivered through both Telegram Mini App (@layerpixel_bot) and layerpixel.io. Copilot and other LLM tools are used to improve efficiency.

Tech stack

ReactTypeScriptVite 5TonConnectLess (Atomic CSS style)VitestGitHub ActionsTerraform+1

HaiNiu VPN

High-quality network acceleration for gamers and media users.

Role

Architecture designFrontend codingCode review

Description

Built with Flutter as the core stack. Reusable UI components were pre-encapsulated during high-fidelity review to ensure visual consistency. For network acceleration scenarios, third-party libraries (UI, HTTP, etc.) were deeply optimized for interaction response, I/O efficiency, and rendering performance. The architecture supports skin-package requirements for fast white-label delivery.

Tech stack

FlutterDart

CMP Cloud Management Platform (2B)

2B

Unified platform integrating multi-cloud resources (Alibaba Cloud, Huawei Cloud, etc.).

Role

Requirement reviewDevelopment planningTech selectionArchitecture designFrontend codingCode review

Description

Built with React + MobX/Redux + Next.js + TypeScript. UI components were initially standardized based on Ant Design Pro, then customized after v1 stabilization (e.g., topology visualization components for cloud services). User experience and usability were improved through SSR, business-code splitting, and Service Worker strategies.

Tech stack

ReactNext.jsTypeScriptMobXReduxAnt Design ProVite 2Vitest+1

Cross-chain Bridge & Extension (Web3)

Web3

Cross-chain trading platform and tools for FIBOS and major chains via MetaMask / WalletConnect.

Role

Requirement reviewDevelopment planningTech selectionFrontend codingCode review

Description

Built with React + TypeScript + pre-rendering. Based on blockchain usage patterns, it provides cross-chain tools for wallet users to satisfy diverse contract interaction needs, across targeted scenarios (both H5 and browser extension forms). It supports major chains including BTC, ETH, EOS, and FIBOS.

Tech stack

ReactTypeScriptVite 2MetaMaskWalletConnectPre-renderJestTSLint

IMAP Big Data Analysis Platform (2B/2G)

2B/2G

Big data analytics platform serving major enterprise clients.

Role

System designTech selectionCore frontend coding

Description

Built a big data analytics platform with Angular v1.x. A Node.js web service collected low-level consumption data, communicated with Elasticsearch clusters, and ingested metadata via Logstash. After aggregation, visualization technologies (d3.js, SVG, Canvas, ECharts v2.x, Highcharts, etc.) delivered rich analytical charts (Sankey, radar, heatmap, map, scatter, treemap, etc.). Combined with real-time cluster monitoring for large-screen display, intelligent analysis, and intelligent O&M. Served scenarios such as mirrored-port packet analysis, persistent monitoring, log mining, and real-time DDoS warning.

Tech stack

Angular 1.xNode.jsElasticsearchLogstashd3.jsECharts 2.xHighchartsSVG+4

DEX Trading Platform (Web3)

Web3

Decentralized exchange with on-chain trading, order book depth, and multi-timeframe charts.

Role

Requirement reviewDevelopment planningTech selectionArchitecture designCore frontend codingCode review

Description

Built with React + MobX-State-Tree + Ant Design + Ant Motion. First-screen load and page performance were deeply optimized via bundle splitting, cloud deployment + CDN, metadata computation optimization, and business model-tree optimization. View components were highly decoupled from business logic. Under AWS (Hong Kong) + CDN deployment: first paint visible <1s without cache, DOM load <2.5s; with cache, first paint <100ms and DOM load <1.5s.

Tech stack

ReactMobX-State-TreeAnt DesignAnt MotionTypeScriptWebpack 4/5ESLintJest+1

FO Wallet (Web3)

Web3

Full-featured wallet on FIBOS, published on App Store and Android markets.

Role

Requirement reviewDevelopment planningTech selectionArchitecture designCore frontend codingCode review

Description

Built with React Native + Redux + React Navigation + Ant Design Mobile (RN). Delivered a full-featured financial wallet including on-chain contract calls, real-time notifications, asset swap and management, DApp container, QR scan, and more.

Tech stack

React NativeReduxReact NavigationAnt Design Mobile (RN)ESLintJest

TOK Exchange (Web3)

Web3

Decentralized asset trading platform with stable and convenient service.

Role

Requirement reviewDevelopment planningTech selectionArchitecture designFrontend codingCode review

Description

Built with React + Redux + TypeScript. UI components were standardized via Ant Design-based encapsulation. User experience and usability were enhanced through SSR, business-code splitting, and Service Worker strategies.

Tech stack

ReactReduxTypeScriptAnt DesignSSRVite 2Service WorkerJest+1
© 2026Heizi·Built with & Next.js