Salih438/Teknoshop
GitHub: Salih438/Teknoshop
一个基于 Next.js 全栈技术构建的安全导向型电商实践平台，集成了完整的前台购物与后台管理功能。
Stars: 0 | Forks: 0
# 🛒 Teknoshop — 现代电商平台
**Teknoshop** 是一个使用现代 Web 技术开发的 full-stack 电商平台，包含前端用户界面和后台管理面板。
在项目开发过程中，不仅关注用户界面；还重点关注了**数据完整性、身份验证、基于角色的访问控制、IDOR 防护、API 安全、Rate limiting、数据验证、响应式设计和 production deployment** 等软件工程和 Web 安全问题。
## 🌐 演示与代码仓库
| 资源 | 链接 |
| ------------ | ---------------------------------------------------------------- |
| 🚀 在线演示 | [访问 Teknoshop](https://teknoshop-salih14.vercel.app/) |
| 💻 GitHub | [查看代码仓库](https://github.com/Salih438/Teknoshop) |
# 🎯 项目目的
本项目的主要目的是使用现代 Web 技术，端到端实现真实电商系统中可能遇到的**用户、管理、数据管理、安全和部署需求。**
在项目开发时，特别关注了以下方面：
* 可扩展的应用架构
* Type-safe 数据访问
* Authentication 和 Authorization
* Role-Based Access Control (RBAC)
* IDOR 防护
* API 输入验证
* Rate limiting
* 响应式用户体验
* Production deployment
# 📸 项目预览
## 🏠 主页
## 📦 产品详情页
## 🛒 购物车 & 结算
## ⚙️ 管理面板
# ✨ 特性
## 🛍️ 前端用户侧
* 产品列表和详情查看
* 基于分类和品牌的筛选
* 产品搜索
* 价格和排序选项
* 产品变体
* 库存检查
* 收藏夹
* 产品评论
* 购物车管理
* 地址管理
* 订单创建
* 订单历史
* 订单详情
* 优惠券使用
* 响应式用户界面
# ⚙️ 管理面板
管理面板用于集中管理系统中的核心电商操作。
## 📦 产品管理
* 创建产品
* 编辑产品
* 删除产品
* 品牌和分类管理
* 产品图片管理
* SKU 和库存跟踪
* 产品变体
* 启用/停用产品管理
## 📋 订单管理
* 订单列表
* 查看订单详情
* 订单状态管理
* 订单取消
* 已取消订单的库存检查
## 🧩 其他管理模块
* 分类管理
* 品牌管理
* 优惠券管理
* 用户管理
* 系统统计数据
* 管理员访问控制
# 🔐 安全
在项目开发过程中，应用安全被视为基本要求之一。
## 🔑 身份验证
用户身份验证通过 **Clerk** 进行处理。
## 👥 基于角色的访问控制 (RBAC)
在管理面板和管理操作中实施了 **Role-Based Access Control (RBAC)**。
根据用户的角色，限制其可以访问的资源和执行的操作。
## 🛡️ IDOR 防护
为了不完全信任客户端直接发送的资源 ID，实施了服务端归属和授权检查。
专门用于防止用户越权访问其他用户的以下资源：
* 订单
* 地址
* 收藏夹
* 个人资料数据
## ✅ API 验证
在 API 输入端使用 **Zod** 检查：
* 缺失的字段
* 无效的数据类型
* 意外的值
* 无效的 request body
## 🚦 Rate Limiting
在关键的 API endpoint 上实施了 **Rate Limiting** 机制，以限制过度请求。
## 🧱 安全标头
在 production 环境中配置了以下 HTTP 安全标头：
* Content-Security-Policy (CSP)
* X-Frame-Options
* 其他已配置的 HTTP security headers
## 🔒 环境变量
数据库连接信息和 API 密钥不保存在 source code 中，而是通过环境变量进行管理。
# 🏗️ 技术架构
项目构建在 **Next.js App Router** 架构之上。
总体架构：
```
┌─────────────────────┐
│ Client │
│ Desktop / Mobile │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ Next.js │
│ App Router │
└──────────┬──────────┘
│
┌────────────────┼────────────────┐
▼ ▼ ▼
UI / Server Server Actions API Routes
Components │
│
┌────────────┴────────────┐
│ Authentication │
│ Authorization / RBAC │
│ Zod Validation │
│ Rate Limiting │
└────────────┬────────────┘
│
▼
┌────────────────┐
│ Prisma ORM │
└───────┬────────┘
│
▼
┌────────────────┐
│ PostgreSQL │
└────────────────┘
```
Frontend 和 backend 操作在同一个 Next.js 应用中以模块化的方式进行配置。
# 🛠️ 技术 Stack
## 前端
* Next.js
* React
* TypeScript
* Tailwind CSS
## 后端
* Next.js Server Actions
* Next.js API Routes
* Node.js
## 数据库
* PostgreSQL
* Prisma ORM
## 身份验证
* Clerk
## State Management
* Zustand
## 验证
* Zod
## 部署
* Vercel
## 开发工具
* Git
* GitHub
* Prisma Studio
* VS Code
# 🗄️ 数据库
通过 **Prisma ORM** 进行数据访问。
在 PostgreSQL 上创建了一个关系型数据模型，用于管理用户、产品、分类、品牌、订单、购物车、收藏夹、地址、优惠券及其相关关系。
借助 Prisma，可实现：
* Type-safe database queries
* Migration 管理
* 关系型数据访问
* Prisma Client
* Database schema 管理
# 🚀 本地开发
## 1. 克隆代码仓库
```
git clone https://github.com/Salih438/Teknoshop.git
cd Teknoshop
```
## 2. 安装依赖包
```
npm install
```
## 3. 环境变量
在项目根目录下创建 `.env.local` 文件。
示例：
```
DATABASE_URL="postgresql://USER:PASSWORD@HOST/DATABASE?sslmode=require"
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="..."
CLERK_SECRET_KEY="..."
UPLOADTHING_SECRET="..."
UPLOADTHING_APP_ID="..."
NEXT_PUBLIC_APP_URL="http://localhost:3000"
# 项目中使用的其他 service variables
# 应使用您自己账户中的值进行填充。
```
## 4. 生成 Prisma Client
```
npx prisma generate
```
## 5. 准备数据库
应用项目的 migration：
```
npx prisma migrate dev
```
## 6. 启动 Development server
```
npm run dev
```
应用程序默认运行在以下地址：
```
http://localhost:3000
```
# 🧪 质量与 Production 检查
在 production deployment 之前，对应用程序的不同层级进行了各种检查。
## TypeScript
```
npx tsc --noEmit
```
已执行 TypeScript 类型检查。
## Production Build
```
npm run build
```
Production build 过程已成功完成。
## 数据库
检查了以下内容：
* Prisma schema 检查
* Database 连接
* 关系型数据访问
* Migration 结构
## 安全性
审查了以下安全机制：
* Authentication
* RBAC
* IDOR 防护
* API 验证
* Rate limiting
* Security headers
## 端到端用户流程
基本的用户流程已进行端到端的手动检查：
```
Login
↓
Product
↓
Favorite
↓
Cart
↓
Address
↓
Checkout
↓
Order
↓
Order Detail
```
# 📱 响应式设计
本程序是在兼顾桌面和移动屏幕的情况下开发的。
检查的主要区域包括：
* Navbar
* Search
* Product Cards
* Product Detail
* Cart
* Checkout
* Account
* Admin interfaces
同时还审查了移动设备上触摸交互的可用性。
# ☁️ 部署
Production deployment 通过 **Vercel** 进行。
在部署过程中检查了：
* Production 环境变量
* PostgreSQL 连接
* Prisma
* Authentication
* API endpoint
* Production build
部署后，再次检查了 production 环境中的核心页面和用户流程。
# ⚠️ 项目范围与限制
本项目不打算作为真实的商业商店使用，而是为了**通过实践深入学习 full-stack Web 开发、电商架构、Web 安全和部署流程**而设计的。
支付流程仅用于演示/模拟目的，并非为处理真实金融交易而设计。
在 production 环境中，不应使用真实的用户数据或真实的支付操作。
# 🎯 技术收获
在项目开发过程中，在以下领域获得了实践经验：
* Full-stack Web 开发
* Next.js App Router
* React
* TypeScript
* REST API
* Server Actions
* PostgreSQL
* Prisma ORM
* Authentication
* Authorization
* RBAC
* IDOR 防护
* API 验证
* Rate Limiting
* Web 安全
* 响应式 UI 开发
* Production Deployment
* Git / GitHub
* Database Design
# 👨💻 开发者
**Salih Balta**
软件工程学生
吉雷松大学 (Gümüşhane Üniversitesi)
* GitHub: [Salih438](https://github.com/Salih438)
* LinkedIn: [Salih Balta](https://www.linkedin.com/in/salih-balta-68337b340/)
## ⭐ 如果您喜欢这个项目
如果您觉得这个项目有用，可以在代码仓库留下一个 ⭐。
## 📦 产品详情页
## 🛒 购物车 & 结算
## ⚙️ 管理面板
# ✨ 特性
## 🛍️ 前端用户侧
* 产品列表和详情查看
* 基于分类和品牌的筛选
* 产品搜索
* 价格和排序选项
* 产品变体
* 库存检查
* 收藏夹
* 产品评论
* 购物车管理
* 地址管理
* 订单创建
* 订单历史
* 订单详情
* 优惠券使用
* 响应式用户界面
# ⚙️ 管理面板
管理面板用于集中管理系统中的核心电商操作。
## 📦 产品管理
* 创建产品
* 编辑产品
* 删除产品
* 品牌和分类管理
* 产品图片管理
* SKU 和库存跟踪
* 产品变体
* 启用/停用产品管理
## 📋 订单管理
* 订单列表
* 查看订单详情
* 订单状态管理
* 订单取消
* 已取消订单的库存检查
## 🧩 其他管理模块
* 分类管理
* 品牌管理
* 优惠券管理
* 用户管理
* 系统统计数据
* 管理员访问控制
# 🔐 安全
在项目开发过程中，应用安全被视为基本要求之一。
## 🔑 身份验证
用户身份验证通过 **Clerk** 进行处理。
## 👥 基于角色的访问控制 (RBAC)
在管理面板和管理操作中实施了 **Role-Based Access Control (RBAC)**。
根据用户的角色，限制其可以访问的资源和执行的操作。
## 🛡️ IDOR 防护
为了不完全信任客户端直接发送的资源 ID，实施了服务端归属和授权检查。
专门用于防止用户越权访问其他用户的以下资源：
* 订单
* 地址
* 收藏夹
* 个人资料数据
## ✅ API 验证
在 API 输入端使用 **Zod** 检查：
* 缺失的字段
* 无效的数据类型
* 意外的值
* 无效的 request body
## 🚦 Rate Limiting
在关键的 API endpoint 上实施了 **Rate Limiting** 机制，以限制过度请求。
## 🧱 安全标头
在 production 环境中配置了以下 HTTP 安全标头：
* Content-Security-Policy (CSP)
* X-Frame-Options
* 其他已配置的 HTTP security headers
## 🔒 环境变量
数据库连接信息和 API 密钥不保存在 source code 中，而是通过环境变量进行管理。
# 🏗️ 技术架构
项目构建在 **Next.js App Router** 架构之上。
总体架构：
```
┌─────────────────────┐
│ Client │
│ Desktop / Mobile │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ Next.js │
│ App Router │
└──────────┬──────────┘
│
┌────────────────┼────────────────┐
▼ ▼ ▼
UI / Server Server Actions API Routes
Components │
│
┌────────────┴────────────┐
│ Authentication │
│ Authorization / RBAC │
│ Zod Validation │
│ Rate Limiting │
└────────────┬────────────┘
│
▼
┌────────────────┐
│ Prisma ORM │
└───────┬────────┘
│
▼
┌────────────────┐
│ PostgreSQL │
└────────────────┘
```
Frontend 和 backend 操作在同一个 Next.js 应用中以模块化的方式进行配置。
# 🛠️ 技术 Stack
## 前端
* Next.js
* React
* TypeScript
* Tailwind CSS
## 后端
* Next.js Server Actions
* Next.js API Routes
* Node.js
## 数据库
* PostgreSQL
* Prisma ORM
## 身份验证
* Clerk
## State Management
* Zustand
## 验证
* Zod
## 部署
* Vercel
## 开发工具
* Git
* GitHub
* Prisma Studio
* VS Code
# 🗄️ 数据库
通过 **Prisma ORM** 进行数据访问。
在 PostgreSQL 上创建了一个关系型数据模型，用于管理用户、产品、分类、品牌、订单、购物车、收藏夹、地址、优惠券及其相关关系。
借助 Prisma，可实现：
* Type-safe database queries
* Migration 管理
* 关系型数据访问
* Prisma Client
* Database schema 管理
# 🚀 本地开发
## 1. 克隆代码仓库
```
git clone https://github.com/Salih438/Teknoshop.git
cd Teknoshop
```
## 2. 安装依赖包
```
npm install
```
## 3. 环境变量
在项目根目录下创建 `.env.local` 文件。
示例：
```
DATABASE_URL="postgresql://USER:PASSWORD@HOST/DATABASE?sslmode=require"
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="..."
CLERK_SECRET_KEY="..."
UPLOADTHING_SECRET="..."
UPLOADTHING_APP_ID="..."
NEXT_PUBLIC_APP_URL="http://localhost:3000"
# 项目中使用的其他 service variables
# 应使用您自己账户中的值进行填充。
```
## 4. 生成 Prisma Client
```
npx prisma generate
```
## 5. 准备数据库
应用项目的 migration：
```
npx prisma migrate dev
```
## 6. 启动 Development server
```
npm run dev
```
应用程序默认运行在以下地址：
```
http://localhost:3000
```
# 🧪 质量与 Production 检查
在 production deployment 之前，对应用程序的不同层级进行了各种检查。
## TypeScript
```
npx tsc --noEmit
```
已执行 TypeScript 类型检查。
## Production Build
```
npm run build
```
Production build 过程已成功完成。
## 数据库
检查了以下内容：
* Prisma schema 检查
* Database 连接
* 关系型数据访问
* Migration 结构
## 安全性
审查了以下安全机制：
* Authentication
* RBAC
* IDOR 防护
* API 验证
* Rate limiting
* Security headers
## 端到端用户流程
基本的用户流程已进行端到端的手动检查：
```
Login
↓
Product
↓
Favorite
↓
Cart
↓
Address
↓
Checkout
↓
Order
↓
Order Detail
```
# 📱 响应式设计
本程序是在兼顾桌面和移动屏幕的情况下开发的。
检查的主要区域包括：
* Navbar
* Search
* Product Cards
* Product Detail
* Cart
* Checkout
* Account
* Admin interfaces
同时还审查了移动设备上触摸交互的可用性。
# ☁️ 部署
Production deployment 通过 **Vercel** 进行。
在部署过程中检查了：
* Production 环境变量
* PostgreSQL 连接
* Prisma
* Authentication
* API endpoint
* Production build
部署后，再次检查了 production 环境中的核心页面和用户流程。
# ⚠️ 项目范围与限制
本项目不打算作为真实的商业商店使用，而是为了**通过实践深入学习 full-stack Web 开发、电商架构、Web 安全和部署流程**而设计的。
支付流程仅用于演示/模拟目的，并非为处理真实金融交易而设计。
在 production 环境中，不应使用真实的用户数据或真实的支付操作。
# 🎯 技术收获
在项目开发过程中，在以下领域获得了实践经验：
* Full-stack Web 开发
* Next.js App Router
* React
* TypeScript
* REST API
* Server Actions
* PostgreSQL
* Prisma ORM
* Authentication
* Authorization
* RBAC
* IDOR 防护
* API 验证
* Rate Limiting
* Web 安全
* 响应式 UI 开发
* Production Deployment
* Git / GitHub
* Database Design
# 👨💻 开发者
**Salih Balta**
软件工程学生
吉雷松大学 (Gümüşhane Üniversitesi)
* GitHub: [Salih438](https://github.com/Salih438)
* LinkedIn: [Salih Balta](https://www.linkedin.com/in/salih-balta-68337b340/)
## ⭐ 如果您喜欢这个项目
如果您觉得这个项目有用，可以在代码仓库留下一个 ⭐。标签：PostgreSQL, Syscall, TypeScript, Web开发, 全栈, 安全插件, 测试用例, 电商平台, 自动化攻击