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

发布于:2025-06-05 ⋅ 阅读:(20) ⋅ 点赞:(0)

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 constkeyof、泛型递归推导等 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,提升代码管理与部署效率。

网站公告

今日签到

点亮在社区的每一天
去签到