黑子

·前端
双一流 · 通信工程|前端 10年 292天
>工程师> 
@undef1ned404undef1ned4nil@gmail.comgithub.com/sarufarr

个人简介

Summary

11年前端工程师经验, 双一流通信工程背景. 深耕 React 生态, 具备完整的大前端技术栈 (Web / RN / Flutter). 参与过 Web3, AI Agent, 大数据, 云计算等多个技术方向, 曾在华为, 第三极, 小西等公司担任主程及架构角色. 持续关注前沿技术, 以 LLM 工具链 (Copilot / Claude Code) 加速日常研发.

技术栈

Skills

Web3 · 链

EVMSolanaBaseBSCTONBTC

Web3 · 产品垂类

预测市场DEXUniswapSocialFiTelegram Mini App浏览器插件 / 钱包

Web3 · 技术栈

WagmiEthers.jsPrivyPermissionless (AA 钱包)MetaMaskWalletConnectTonConnectRelay ProtocolJito (Solana MEV)Ethereum MEV (Flashbots)Solidity (合约阅读 / 开发)DApp 开发

Frontend

ReactNext.jsTypeScriptJavaScriptVueTailwind CSSZustandReduxshadcn/uiRadix UIViteWebpackSSR前端性能优化 (Core Web Vitals)渲染性能优化Motion / Framer MotionLottieSVG 动效CanvasEChartsRechartsHighchartsd3.jsAnt Design & ProWebSocketService WorkerAngularLessjQuery

Architecture & Tools

技术选型PM / 项目交付工程化架构线上问题排查日志回捞 / 根因定位可观测性建设 (Logging / Tracing / Metrics)高并发场景治理稳定性与容灾缓存策略ESLintVitestJestCursorClaude CodeCodexGitHub Copilot

Backend & Data

Node.jsRustConvexAWSTerraformGitHub Actions CI/CD

Mobile

React NativeFlutterExpo

工作经历

Work Experience

Buzzing

远程

前端 – 主程

2024.12 — 2026.2
ReactTypeScriptAI AgentWeb3
»核心代码编写»架构构建及维护»关键技术攻关»疑难解决方案

Microcosm Labs

远程

前端 – 主程

2023.12 — 2024.12
ReactNext.jsTypeScript跨平台Web3
»核心代码编写»架构构建及维护»关键技术攻关»疑难解决方案

小西

实地

前端 & 专家

2022.12 — 2023.12
ReactTypeScriptFlutter2C
»核心代码编写»架构构建及维护»疑难解决方案

上海数讯

实地

前端 & 架构

2021.3 — 2022.11
ReactTypeScript云计算2B
»核心代码编写»架构构建及维护»系统设计»疑难解决方案

第三极

实地

大前端 – 主程 & PM & 架构

2017.10 — 2021.2
ReactReact NativeTypeScript跨平台服务端渲染Web3
»架构构建及维护»核心代码编写»项目交付全流程管理»疑难解决方案

华为

实地

前端 – 主程 & PM

2015.10 — 2017.10
ReactjQueryVueJavaScript大数据流媒体2C
»核心代码编写»架构构建及维护»疑难解决方案»技术探索及布道

项目经历

Project Experience

以下记录较为典型且完整参与的项目，历份工作期间较为重复性的项目不做赘述。

Maybee

Web3

预测市场

角色职责

技术选型架构设计前端核心代码代码审核

项目说明

Web 端基于 React + TS 为核心构建, 已完成 Next.js 迁移, 生产环境尚未部署. 为满足 C 端低门槛无感知的要求, 基于 EVM 生态集成目前成熟解决方案, 配合 Privy + Permissionless (AA 钱包), 实现账户抽象的无缝体验. 项目使用 Motion, Recharts 以及 SVG 优化, 满足高标准的用户体验要求. 产品呈现对标 Polymarket 和 Kalshi. 编码过程中使用 Claude Code 等 LLM 辅助开发和代码审核以增效.

技术栈

ReactNext.jsTypeScriptVite 7WagmiPrivyPermissionlessMotion+3

BuzzingClub

Web3

基于 AI Agent 的预测市场

角色职责

技术选型架构设计前端核心代码代码审核

项目说明

Web 端基于 React + TS 为核心构建. 基于 EVM 生态集成目前成熟解决方案, 满足多链多钱包多端多分辨率的使用场景 (Base, Solana, Monad 等). 为满足 C 端交互和 Agent 思考过程 workflow 的良好体验, 项目使用大量动画 (Motion, Lottie 等), 集成 WebSocket 以及 SVG 优化. 产品呈现对标 Polymarket 和 Grok. 解决业务实施过程中的各种疑难杂症. 编码过程中使用 Copilot 等 LLM 辅助开发和代码审核以增效.

技术栈

ReactTypeScriptVite 7WagmiPrivy / ParaMotionLottieWebSocket+1

PixelSwap

Web3

TON 链 DEX + Telegram Mini App

角色职责

架构设计前端代码编写代码审核

项目说明

React 项目基于 TonConnect + Vite + TS 为核心构建, CI/CD 使用 GitHub Actions workflow + Terraform 自动化部署. 多分辨率适配满足多端使用同一套代码 (拆除 Tailwind 后重写原子 Less). 使用多种手段改善用户体验. 同时提供 Telegram Mini App (@layerpixel_bot) 和 layerpixel.io 两个入口. 编码过程中使用 Copilot 等 LLM 辅助以增效.

技术栈

ReactTypeScriptVite 5TonConnectLess (原子化)VitestGitHub ActionsTerraform+1

海牛加速器 & 回国加速器

为国内游戏玩家 / 海外影视用户提供高质量网络加速服务

角色职责

架构设计前端代码编写代码审核

项目说明

基于 Flutter 为核心构建. 项目 UI 通用组件由高保真审核过程中预先封装, 保证视觉还原度. 应对网络加速工具的特殊场景, 对三方库 (UI, http 等) 进行使用场景下的深度优化 (交互响应, I/O 效率和渲染性能等). 架构设计满足换皮包需求, 支持快速白标交付.

技术栈

FlutterDart

CMP 运管平台

2B

整合阿里云, 华为云等多云资源的一体化统一管理系统

角色职责

需求评审开发计划制定技术选型架构设计前端代码编写代码审核

项目说明

基于 React + MobX/Redux + Next.js + TS 为核心构建. 项目 UI 组件构建时基于 Ant Design Pro 统一封装. v1 稳定之后, 基于业务需求定制 UI 组件 (网络拓扑结构一图构建云服务等). 通过服务端渲染, 业务代码分包及 Service Worker 等方案, 强化用户体验和提高系统易用性.

技术栈

ReactNext.jsTypeScriptMobXReduxAnt Design ProVite 2Vitest+1

跨链网站 / 浏览器插件

Web3

基于 MetaMask / WalletConnect, 为 FIBOS 链及主流链提供跨链交易平台与工具

角色职责

需求评审开发计划制定技术选型前端代码编写代码审核

项目说明

基于 React + TS + Pre-render 为核心构建. 基于区块链使用特性, 为钱包用户们提供跨链工具以满足各种合约使用需求, 并匹配特定场景 (H5 + 浏览器插件双形态). 支持 BTC, ETH, EOS, FIBOS 等主流链.

技术栈

ReactTypeScriptVite 2MetaMaskWalletConnectPre-renderJestTSLint

IMAP 大数据分析平台

2B/2G

汇集多数据源的大数据分析平台, 服务携程, 途牛, 拉卡拉, 江苏省电信网络中心等

角色职责

系统设计技术选型前端核心代码

项目说明

基于 Angular v1.x 构建大数据分析平台. 通过 Web 服务端 (Node.js) 收集消费底层数据, 与 Elasticsearch 集群通信, 将元数据通过 Logstash 收集, 经聚合后使用数据可视化技术 (d3.js, SVG, Canvas, ECharts v2.x, Highcharts 等) 提供大量直观分析图表 (桑基图, 雷达图, 热力图, 地图, 散点图, 矩形树图等). 结合集群实时监测信息实现大屏展示, 智能分析和智能运维. 服务对象包括路由器镜像口抓包分析, 持久监控, 日志挖掘, DDOS 实时预警等场景.

技术栈

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

DEX 数字资产交易管理平台

Web3

去中心化交易所, 含链上交易, 挂单, 盘口深度, 多时间维度 K 线等功能

角色职责

需求评审开发计划制定技术选型架构设计前端核心代码代码审核

项目说明

基于 React + MobX-State-Tree + Ant Design + Ant Motion 为核心构建. 深度优化首屏加载和页面性能: 前端打包文件分割, 云部署 + CDN, 元数据计算优化, 业务模型树结构优化. 视图组件与业务代码高度分离. AWS (香港) + CDN 部署: 无缓存首屏可见 < 1s, DOM 加载 < 2.5s; 有缓存首屏 < 100ms, DOM 加载 < 1.5s.

技术栈

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

FO Wallet

Web3

完整金融钱包, 配合自研 FIBOS 去中心化链, 上架 App Store (美区) 及各大安卓市场

角色职责

需求评审开发计划制定技术选型架构设计前端核心代码代码审核

项目说明

基于 React Native + Redux + React Navigation + Ant Design Mobile (RN) 为核心构建. 实现链上合约调用, 实时信息推送, 资产兑换和管理, DApp 容器, 扫一扫等完整金融钱包功能.

技术栈

React NativeReduxReact NavigationAnt Design Mobile (RN)ESLintJest

TOK 交易所

Web3

去中心化资产交易平台, 提供稳定便捷的交易服务

角色职责

需求评审开发计划制定技术选型架构设计前端代码编写代码审核

项目说明

基于 React + Redux + TypeScript 为核心构建. 项目 UI 组件构建时基于 Ant Design 统一封装. 通过服务端渲染 (SSR), 业务代码分包及 Service Worker 等方案, 强化用户体验和提高系统易用性.

技术栈

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