【开源自荐】基于nextjs14，良好的体验、响应式、编码设计，开源了C-Shopping开源电商平台

[huanghanzhilian]

推荐项目

• 项目地址：https://github.com/huanghanzhilian/c-shopping

• 类别：JS

• 项目标题：基于nextjs14，良好的体验、响应式、编码设计，开源了C-Shopping开源电商平台

• 项目描述：

  背景：

  • 一直以来前端UI框架被固定形式占据（受限于传统的UI框架），导致视觉疲劳，在开发一些高度自定义的项目时，往往力不从心；
  • 多设备适配的web优秀项目很少，学习和维护成本较高；
  • 当项目复杂后，在组件需要调用多个 api 时会变得复杂起来，比如需要管理多个 loading 和 error 状态，这会导致产生非常多的 state 声明，还有请求取消、请求竞态等可能存在的问题也容易被忽略；
  • 随着项目复杂，样式的开发与维护变得庞大且臃肿；

  意图：

  改进背景中提到的问题。

  目的：

  打造一个完整的，适合web端的良好生态。

• 亮点：C-Shopping的亮点之一是我们采用了一系列先进的技术，包括Next.js、Tailwind CSS、Headless UI、Redux-Toolkit-RTK Query等，为用户提供了极致的性能和体验。不仅注重美观，更追求技术上的卓越。

• 示例代码：（可选）

📂 c-shopping
  ├── 📁 app
  │   ├── 📁 main
  │   │   ├── 📁 client-layout
  │   │   ├── 📁 empty-layout
  │   │   ├── 📁 admin
  │   │   ├── 📄 layout.js
  │   │   └── 📁 profile
  │   ├── 📄 StoreProvider.js
  │   ├── 📁 api
  │   │   ├── 📁 auth
  │   │   ├── 📁 banner
  │   │   ├── 📁 category
  │   │   ├── 📁 details
  │   │   ├── 📁 order
  │   │   ├── 📁 products
  │   │   ├── 📁 reviews
  │   │   ├── 📁 slider
  │   │   ├── 📁 upload
  │   │   └── 📁 user
  │   ├── 📄 layout.js
  │   └── 📄 not-found.js
  ├── 📄 commitlint.config.js
  ├── 📁 components
  ├── 📄 docker-compose.yml
  ├── 📁 helpers
  │   ├── 📁 api
  │   ├── 📄 auth.js
  │   ├── 📁 db-repo
  │   ├── 📄 db.js
  │   ├── 📄 getQuery.js
  │   └── 📄 index.js
  ├── 📁 hooks
  ├── 📄 jsconfig.json
  ├── 📁 models
  ├── 📄 next.config.js
  ├── 📄 package-lock.json
  ├── 📄 package.json
  ├── 📄 postcss.config.js
  ├── 📂 public
  ├── 📁 store
  ├── 📁 styles
  ├── 📄 tailwind.config.js
  └── 📁 utils

主要结构解释：

• 📁 app: 应用程序的主要代码

  • 📁 main: 主要应用程序组件
    • 📁 client-layout: 用户端通用布局页面
    • 📁 empty-layout: 通用空白布局页面
    • 📁 admin: 管理端页面
    • 📄 layout.js: 主要布局配置
    • 📁 profile: 用户个人资料页面
  • 📄 StoreProvider.js: 全局状态管理提供者
  • 📁 api: API 请求相关路由
    • 📁 auth: 用户认证 API
    • 📁 banner: 广告横幅 API
    • 📁 category: 商品分类 API
    • ...

• 📁 components: 可复用的 React 组件

• 📁 helpers: 辅助函数和工具

  • 📁 api: API 请求相关的辅助函数
  • 📄 auth.js: 用户认证相关的辅助函数
  • ...

• 📁 hooks: 自定义 React hooks

• 📁 models: 数据模型定义

• 📁 public: 静态资源，如图片、字体等

• 📁 store: Redux 状态管理相关配置

  • 📁 services: RTK Query
  • 📁 slices: Redux Toolkit

• 📁 styles: 样式文件

• 📁 utils: 通用工具

• ...

这个结构旨在使项目组织有序，易于维护和扩展。每个部分都按照功能和职责进行划分，使团队成员更容易理解和协作。

• 截图：（可选）

用户端

模块	Desktop devices	Mobile devices
首页
二级分类
三级分类
商品详情
登录
注册
搜索
购物车
支付页
个人中心
我的订单
我的评论
地址管理
近期访问

管理端

模块	Desktop devices	Mobile devices
登录
管理中心
用户管理
分类管理
分类管理树状
规格管理
商品管理
订单管理
评论管理
滑块管理
banner管理

• 后续更新计划：完善更多更能，长期维护