自营电商平台,销售3C数码、智能家居等商品,用户通过web端完成浏览、加购、下单、售后全流程。整体采用 React + TypeScript + Next.js开发,主要功能包括商品列表、商品详情、购物车、订单管理和个人中心。
点击空白处退出提示
语言技术
React、TypeScript、Node.js系统类型
Web行业分类
电商
自营电商平台,销售3C数码、智能家居等商品,用户通过web端完成浏览、加购、下单、售后全流程。整体采用 React + TypeScript + Next.js开发,主要功能包括商品列表、商品详情、购物车、订单管理和个人中心。
商品列表:支持关键词搜索、品类筛选、销量/价格排序、分页与无限滚动。Next.js 对分类页采用 SSG/ISR 预渲染,搜索页使用 SSR,提升 SEO 与首屏速度;React Query 缓存列表数据,lodash 防抖处理搜索输入,Ant Design 实现商品卡片与筛选面板。
商品详情:展示轮播图、价格、规格、库存、评价与推荐。通过 Next.js 动态路由 /product/[id] 配合 SSG + ISR 生成静态页,Server Components 获取商品数据,Client Components 处理规格选择与加购。TypeScript 定义商品、SKU、评价等类型,ECharts 展示评价统计或价格走势,dayjs 处理促销倒计时。
购物车:支持多选、数量修改、删除、失效商品提示与优惠计算。使用 Zustand 或 Redux Toolkit 管理购物车状态并持久化到 localStorage,React Query 同步库存,lodash 进行金额汇总与去重,结算时校验地址与库存。
订单管理:覆盖待付款、待发货、待收货、已完成、售后等状态。Next.js App Router 管理订单列表与详情,SSR 保证权限与数据安全;React Query 轮询物流信息,dayjs 格式化时间,Ant Design Steps 展示订单进度
负责项目整体实现,根据页面需求划分客户端组件和服务端组件,根据接口使用场景划分server action和server handler,项目整体使用tailwind完成样式开发





评论