Fullstack 面试复习笔记：项目梳理总结

之前的笔记：

• Fullstack 面试复习笔记：操作系统 / 网络 / HTTP / 设计模式梳理
• Fullstack 面试复习笔记：Java 基础语法 / 核心特性体系化总结

这篇笔记主自用，系统地梳理一下最近几年的项目都做了什么东西

B2B 数据管理平台（内部工具，五百强金融企业）

关键词：React, Redux Toolkit, TypeScript, Zustand, RTK Query, Electron, PostgreSQL, CSV 导出工具, 企业权限系统, 架构重构

RDM 管理系统，需要从上游不同的 pipeline 获取数据，通过清理、验证进行整合，提供给下游消耗

项目前期为 JavaScript，后期逐步迁移至 TypeScript，并结合业务场景构建出多个“类型驱动配置模块”（如 Enum Store），显著提升了工程可维护性与开发体验

• 主导重构前端架构，替换原有 useCase + repo + rxjs 实现，统一为 Redux Toolkit ，优化状态冗余和页面性能，减少大量 callback 的链式调用
• 前端表单验证体系：主导前端的验证实现，使用 Yup 完成了 UI 的验证功能
• 构建响应式状态模块，建立统一类型期约，用于跨组件配置共享
  • 基于 Yup 和它的 meta 属性，构建了统一的表格/表单配置结构，大量减缓冗余配置 → 原本不同的地区有独立的配置，管理非常的困难，现在重构为声明式实现，如： {isAvailable: [{region: "A"}, {region: "B"}]} 的方式，减少不同地区之间的属性重载，增强代码可读性
    除了 isAvailable ，同样的功能还支持 isEditable, isDisplayed 等多种配置，实现统一的配置期约
  • 利用 Zustand 动态生成 enum store，完成静态/动态 enum 的统一管理（静态 enum 已落地，动态部分 POC 阶段）
    • 设计并实现了通用 Enum Store 模型，用于构建可配置的下拉枚举与依赖映射。通过 satisfies + 泛型约束，定义枚举引用切片的类型边界（如 major → courses），实现“数据驱动 + 类型安全”双重保障。
    • 基于 as const、keyof、泛型递归推导等 TS 技巧，使 dropdown 枚举之间的映射具备完善的 IDE 提示与自动补全能力（如图所示），实现开发体验最大化。
    • 类型抽象能力增强：通过 SliceId<K> 与 SliceValue<K> 类型工具，抽象任意枚举切片的键值结构，使组件调用时自动感知类型，无需重复定义。
    • 该 Enum Store 同时为 Zustand store 设计提供了基础类型定义，支持静态与动态枚举管理，POC 阶段已成功完成静态枚举接入与联动。
    • 搭配 [React] 如何用 Zustand 构建一个响应式 Enum Store？附 RTKQ 实战与 TS 架构落地 重新复习一下实现
  • 研发 pub/sub 机制，通过 zustand 打通 Redux 与 Yup 数据流，实现下拉枚举与表单配置的自动联动（研发中）
  • 计划从 DD（Data Definition）文件自动生成 enum，借助 pipeline 自动同步，减少人工干预（early stage impl）
• 后端验证协作：维护 Spring Boot 校验模块，确保 UI 与后端验证规则一致
  基于 message factory + Kafka event pool 实现事件驱动的跨端校验与数据流转
• 工具链开发：基于 Electron 实现桌面端 CSV 导出工具，支持 PostgreSQL 多环境连接、schema 差异检测及本地配置管理
• 自动化协作：与 QA 团队配合，辅助编写 Cypress UI 自动化测试，保障关键流程的稳定与回归能力
• **GraphQL 架构探索（POC 阶段）：**配合团队评估使用 GraphQL 简化复杂配置结构的可行性，探索其在 Enum Store 与 reference data 聚合场景下的表达能力与查询灵活性
  • 使用轻量客户端 graphql-request,实现基本 query/fetch 流程
  • 当前仍处于早期验证阶段，尚未替换原有 REST 接口，但相关 POC 已有 remote 分支为后续演进做准备
• AI Chatbot 功能探索（POC 阶段）：配合 AI 团队进行 LangChain Chatbot 的原型验证，目标是借助 LLM 模型提升本地 CSV 数据的查询/处理能力。该功能目前运行于隔离的 Sandbox 环境，仅用于架构与 prompt 实验
  • 基于团队提供的 AI Chat 模板（Python）
  • 利用 AWS S3 提供的连接模板，从远端 bucket 拉取结构化 CSV，并读取为 Pandas DataFrame
  • 将 prompt + DataFrame 传入 LangChain 中，生成执行 Python 代码片段
  • 转译 + 执行模型生成的 Python 代码，用于数据清洗与统计提取
  • 当前支持简单自然语言提问（如 “在模型 A 与 B 中，属性 C 和 D 之间是否有关系”），结果由 LLM 翻译为 Pandas 操作代码并返回清洗结果

通过上述工作，项目实现了跨地区配置统一、前后端验证协同与工具化高效导出，有效降低了后续维护与协作成本

---

电商平台（MERN 项目，隶属五百强零售集团）

关键词：MERN Stack, Lazy Loading, JWT, 安全中间件

B 端电商系统，涵盖前后台一体化管理

• 使用 React 实现多商户前台 UI 与后台管理面板
• 应用 Redux + Lazy Loading 优化模块加载，提升初始加载速度
• 后端使用 Express + JWT 实现登录认证、token 刷新，主要负责用户登录验证及产品模块
• 集成 Helmet、XSS-Clean、HPP 等中间件，提升 Express 项目基础安全性

---

表单自动化平台（内部 SaaS 工具，五百强制造企业）

关键词：form.io, 表单数字化, APAC 多区域协作, 环境友好型系统

使用 form.io 实现纸质流程的电子化，显著减少纸张使用；避免补录/誊抄等造成的误差以提升数据精确值。同时，计划是通过 SaaS 平台和初/中期的设计实现，使 BA 可以自行设计/实现表单，摆脱对开发的依赖，并与客户原有系统（如 SharePoint）集成，打通数据流

职责：

• 参与多个核心业务表单的配置与开发，实现动态字段、表单联动与多级审批流
• 基于 form.io 的规则引擎，定制字段校验与审批流程，如动态必填、条件显示、流程分支
• 整理表单配置文档与操作指引，帮助团队和业务方提升上线效率
• 与业务分析团队（BA）合作，将纸质业务流抽象为可配置表单模板，提升表单复用率与可维护性
• 实现多种登录方式，AML，Auth0 - 测试/POC 阶段
• 参与商讨 express 的实现，作为中台更好的聚合当前的数据，以便传到已有的 pipeline（Sharepoint）- 测试/POC 阶段

---

物流重构平台（APAC 区头部托运公司）

关键词：老旧代码重构, 前端工程体系建立, UI/状态管理优化

与后端紧密合作，将原始 .NET MVC 项目迁徙为前后端分离功能，后端依旧维持在 .NET 中，前端则使用 React 实现，使得嵌入 drupal (CMS) 的过程更加的简易与模块化

职责：

• 使用 redux 和 redux-thunk 建立统一状态管理
• 使用 module.css 对 CSS 进行模块化管理，避免样式污染
• 抽象业务逻辑，开发了类似 react-form 的动态表单组件，支持通过表单定义一键生成 UI、onChange handler 与校验规则，显著提高表单开发效率
• 发现前端使用 POST+ DELETE 代替 PATCH，察觉 RESTful 实现的缺失，与后端合作完成完善了对应的业务逻辑，减少 payload 和 request 数量

---

早期项目与实习经历

某某科技（已凉凉）：使用 Java + Spring MVC + JSP 构建内部管理系统，初步了解后端框架结构与 MVC 模式。

实习：参与测试流程与小型模块开发，使用 Java + Spring MVC + HTML5，侧重于代码规范与项目协作流程。

---

个人电商项目（Multi-Vendor 电商平台，独立开发）

关键词：MERN Stack, TurboRepo, TypeScript, RBAC, Token Refresh, 多商户支持, LLM 规划, TS Decorator, 架构优化

完全独立开发，技术栈覆盖全栈主流方案，突出架构与自动化能力提升

• 构建 Multi-Vendor 电商平台，支持卖家入驻、商品上架、购物车管理、订单处理等完整业务流程。
• 前端使用 React + Redux Toolkit + RTK Query + Tailwind CSS，抽象出复用性组件与模块化页面布局。
• 后端使用 TypeScript + Express + MongoDB，重构为 routes + controller + service 三层架构，采用 ts-node 实现 HMR
• 引入 RBAC（基于角色的权限控制），配合 JWT 实现登录、Token 刷新、访问限制控制。
• 项目采用 TurboRepo 组织前后端 monorepo，提升代码管理与部署效率。