Fullstack 面试复习笔记:项目梳理总结
之前的笔记:
这篇笔记主自用,系统地梳理一下最近几年的项目都做了什么东西
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 架构落地 重新复习一下实现
- 设计并实现了通用 Enum Store 模型,用于构建可配置的下拉枚举与依赖映射。通过
- 研发 pub/sub 机制,通过 zustand 打通 Redux 与 Yup 数据流,实现下拉枚举与表单配置的自动联动(研发中)
- 计划从 DD(Data Definition)文件自动生成 enum,借助 pipeline 自动同步,减少人工干预(early stage impl)
- 基于 Yup 和它的 meta 属性,构建了统一的表格/表单配置结构,大量减缓冗余配置 → 原本不同的地区有独立的配置,管理非常的困难,现在重构为声明式实现,如:
- 后端验证协作:维护 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,提升代码管理与部署效率。