{"id":26621597,"url":"https://github.com/zhitrend/windsurf-shop-front","last_synced_at":"2025-03-24T09:17:29.758Z","repository":{"id":267372590,"uuid":"899089366","full_name":"zhitrend/windsurf-shop-front","owner":"zhitrend","description":"独立站-前端服务","archived":false,"fork":false,"pushed_at":"2024-12-21T09:57:05.000Z","size":1910,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-27T08:15:40.502Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhitrend.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-05T15:48:32.000Z","updated_at":"2024-12-21T09:57:09.000Z","dependencies_parsed_at":"2024-12-27T08:16:10.633Z","dependency_job_id":"4e33b51b-86a8-483f-8d83-4d4a6fa3ada1","html_url":"https://github.com/zhitrend/windsurf-shop-front","commit_stats":null,"previous_names":["zhangrongwu/windsurf-shop-front","zhitrend/windsurf-shop-front"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhitrend%2Fwindsurf-shop-front","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhitrend%2Fwindsurf-shop-front/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhitrend%2Fwindsurf-shop-front/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhitrend%2Fwindsurf-shop-front/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhitrend","download_url":"https://codeload.github.com/zhitrend/windsurf-shop-front/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245240835,"owners_count":20583102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-24T09:17:29.125Z","updated_at":"2025-03-24T09:17:29.749Z","avatar_url":"https://github.com/zhitrend.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zhitrend Windsurf Shop\n\n一个现代化的冲浪运动装备电商平台，使用 React、TypeScript 和 Tailwind CSS 构建。\n\n## 项目架构\n\n### 前端架构\n\n```\nsrc/\n├── components/          # 可重用组件\n│   ├── Form/           # 表单相关组件\n│   │   ├── FormField.tsx\n│   │   ├── FormSelect.tsx\n│   │   └── FormTextArea.tsx\n│   ├── Cart.tsx        # 购物车组件\n│   ├── Checkout.tsx    # 结账组件\n│   ├── ErrorAlert.tsx  # 错误提示组件\n│   ├── LoadingSpinner.tsx  # 加载动画组件\n│   ├── Navbar.tsx      # 导航栏组件\n│   └── Toast.tsx       # 通知提示组件\n│\n├── contexts/           # React Context\n│   ├── AuthContext.tsx    # 认证上下文\n│   ├── CartContext.tsx    # 购物车上下文\n│   ├── ErrorContext.tsx   # 错误处理上下文\n│   └── NotificationContext.tsx  # 通知上下文\n│\n├── hooks/              # 自定义 Hooks\n│   ├── useAuth.ts      # 认证相关 hook\n│   ├── useCart.ts      # 购物车相关 hook\n│   ├── useError.ts     # 错误处理 hook\n│   ├── useForm.ts      # 表单处理 hook\n│   └── useLoading.ts   # 加载状态 hook\n│\n├── pages/              # 页面组件\n│   ├── admin/          # 管理后台页面\n│   │   ├── Dashboard.tsx\n│   │   ├── Orders.tsx\n│   │   └── Products.tsx\n│   ├── Home.tsx       # 首页\n│   ├── Products.tsx   # 商品列表页\n│   ├── ProductDetail.tsx  # 商品详情页\n│   ├── Cart.tsx       # 购物车页面\n│   └── Orders.tsx     # 订单页面\n│\n├── utils/             # 工具函数\n│   ├── api.ts        # API 请求工具\n│   ├── errorHandling.ts  # 错误处理工具\n│   └── validation.ts  # 数据验证工具\n│\n└── types/            # TypeScript 类型定义\n    ├── api.ts       # API 相关类型\n    ├── auth.ts      # 认证相关类型\n    └── product.ts   # 商品相关类型\n```\n\n### 后端架构 (API)\n\n```\nsrc/\n├── controllers/      # 控制器\n│   ├── auth.ts      # 认证控制器\n│   ├── order.ts     # 订单控制器\n│   └── product.ts   # 商品控制器\n│\n├── middleware/       # 中间件\n│   ├── auth.ts      # 认证中间件\n│   ├── error.ts     # 错误处理中间件\n│   └── validation.ts # 数据验证中间件\n│\n├── models/          # 数据模型\n│   ├── order.ts    # 订单模型\n│   ├── product.ts  # 商品模型\n│   └── user.ts     # 用户模型\n│\n├── routes/         # 路由\n│   ├── auth.ts    # 认证路由\n│   ├── order.ts   # 订单路由\n│   └── product.ts # 商品路由\n│\n└── utils/         # 工具函数\n    ├── jwt.ts    # JWT 工具\n    └── payment.ts # 支付工具\n```\n\n## 技术栈\n\n### 前端\n- React 18\n- TypeScript\n- Tailwind CSS\n- React Router v6\n- @heroicons/react\n- PayPal SDK\n- Zod（数据验证）\n\n### 后端\n- Node.js\n- TypeScript\n- Prisma（ORM）\n- JWT（认证）\n- PayPal API\n- Cloudflare Workers\n\n## 主要功能\n\n### 用户功能\n- 用户注册和登录\n- 商品浏览和搜索\n- 购物车管理\n- 订单管理\n- PayPal 支付\n\n### 管理员功能\n- 商品管理\n- 订单管理\n- 用户管理\n- 数据统计\n\n## 开发指南\n\n### 环境要求\n- Node.js \u003e= 16\n- npm \u003e= 7\n\n### 安装依赖\n```bash\n# 安装前端依赖\nnpm install\n\n# 安装后端依赖\ncd windsurf-shop-api\nnpm install\n```\n\n### 开发环境\n```bash\n# 启动前端开发服务器\nnpm start\n\n# 启动后端开发服务器\ncd windsurf-shop-api\nnpm run dev\n```\n\n### 生产环境\n```bash\n# 构建前端\nnpm run build\n\n# 构建后端\ncd windsurf-shop-api\nnpm run build\n```\n\n## 项目规范\n\n### 代码风格\n- 使用 ESLint 和 Prettier\n- 遵循 TypeScript 严格模式\n- 使用函数组件和 Hooks\n- 使用 CSS Modules 或 Tailwind CSS\n\n### Git 提交规范\n- feat: 新功能\n- fix: 修复问题\n- docs: 文档变更\n- style: 代码格式\n- refactor: 代码重构\n- test: 测试相关\n- chore: 构建过程或辅助工具的变动\n\n## 错误处理\n\n项目实现了统一的错误处理机制：\n1. API 错误处理\n2. 表单验证错误\n3. 认证错误\n4. 网络错误\n5. 支付错误\n\n## 状态管理\n\n使用 React Context 和自定义 Hooks 管理状态：\n1. 认证状态\n2. 购物车状态\n3. 错误状态\n4. 加载状态\n5. 表单状态\n\n## 安全性\n\n1. JWT 认证\n2. CORS 配置\n3. 输入验证\n4. XSS 防护\n5. CSRF 防护\n\n## 性能优化\n\n1. 代码分割\n2. 懒加载\n3. 图片优化\n4. 缓存策略\n5. API 性能优化\n\n## 部署\n\n项目使用 Cloudflare Workers 进行部署：\n1. 前端部署到 Cloudflare Pages\n2. 后端部署到 Cloudflare Workers\n3. 数据库使用 Prisma + PlanetScale\n\n## Features\n\n- Responsive modern design\n- Product catalog with categories\n- Shopping cart functionality\n- Secure checkout process\n- User authentication\n- Order tracking\n- Product search and filtering\n- Wishlist functionality\n- Password reset functionality\n  - Forgot password\n  - Email reset link\n  - Password modification\n\n## Tech Stack\n\n- React 18\n- Tailwind CSS\n- Headless UI\n- Stripe Payment Integration\n- Cloudflare for hosting and CDN\n\n## Getting Started\n\n1. Clone the repository\n2. Install dependencies:\n   ```bash\n   npm install\n   ```\n3. Start the development server:\n   ```bash\n   npm start\n   ```\n\n## Building for Production\n\n```bash\nnpm run build\n```\n\n## Environment Variables\n\nCreate a `.env` file in the root directory with the following variables:\n\n```\nREACT_APP_STRIPE_PUBLIC_KEY=your_stripe_public_key\nREACT_APP_API_URL=your_api_url\nDATABASE_URL=\"postgresql://username:password@localhost:5432/windsurf_shop\"\nJWT_SECRET=\"your-jwt-secret\"\nFRONTEND_URL=\"http://localhost:3000\"\nSTRIPE_SECRET_KEY=\"your-stripe-secret-key\"\nSTRIPE_WEBHOOK_SECRET=\"your-stripe-webhook-secret\"\nRESEND_API_KEY=\"your-resend-api-key\"\n```\n\n## Password Reset Functionality\n\n1. Forgot password process:\n   - User clicks \"Forgot password\" on the login page\n   - Enter email address\n   - System sends reset link to email\n   - User sets new password through the link\n\n2. Modify password:\n   - Logged-in user can modify password on the profile page\n   - Need to enter current password for verification\n   - New password needs to be confirmed by entering twice\n\n## Features\n\n### User Features\n\n1. **Authentication**\n   - Email/Password registration and login\n   - Social login (Google, Facebook)\n   - Password reset functionality\n   - Session management\n\n2. **Product Management**\n   - Browse products by categories\n   - Advanced search and filtering\n   - Product reviews and ratings\n   - Product recommendations\n   - Wishlist management\n\n3. **Shopping Cart**\n   - Real-time cart updates\n   - Save for later functionality\n   - Quantity management\n   - Price calculations\n   - Coupon application\n\n4. **Checkout Process**\n   - Multiple payment methods\n   - Address management\n   - Order summary\n   - Shipping options\n   - Order confirmation\n\n5. **Order Management**\n   - Order history\n   - Order tracking\n   - Order cancellation\n   - Returns management\n   - Invoice generation\n\n### Admin Features\n\n1. **Dashboard**\n   - Sales analytics\n   - User statistics\n   - Inventory overview\n   - Recent orders\n   - Revenue reports\n\n2. **Product Management**\n   - Add/Edit products\n   - Manage categories\n   - Inventory tracking\n   - Price management\n   - Product images\n\n3. **Order Management**\n   - Order processing\n   - Status updates\n   - Refund handling\n   - Shipping management\n   - Order analytics\n\n4. **User Management**\n   - User roles and permissions\n   - Customer support\n   - User activity logs\n   - Account management\n   - Communication tools\n\n## API Documentation\n\n### Authentication Endpoints\n\n```typescript\nPOST /api/auth/register\nPOST /api/auth/login\nPOST /api/auth/logout\nPOST /api/auth/refresh-token\nPOST /api/auth/forgot-password\nPOST /api/auth/reset-password\n```\n\n### Product Endpoints\n\n```typescript\nGET    /api/products\nGET    /api/products/:id\nPOST   /api/products\nPUT    /api/products/:id\nDELETE /api/products/:id\nGET    /api/products/categories\nGET    /api/products/search\n```\n\n### Order Endpoints\n\n```typescript\nGET    /api/orders\nGET    /api/orders/:id\nPOST   /api/orders\nPUT    /api/orders/:id\nDELETE /api/orders/:id\nGET    /api/orders/user/:userId\nPOST   /api/orders/:id/status\n```\n\n### User Endpoints\n\n```typescript\nGET    /api/users\nGET    /api/users/:id\nPUT    /api/users/:id\nDELETE /api/users/:id\nGET    /api/users/:id/orders\nGET    /api/users/:id/wishlist\n```\n\n## Development Workflow\n\n### 1. Setting Up Development Environment\n\n```bash\n# Clone the repository\ngit clone https://github.com/yourusername/windsurf-shop.git\ncd windsurf-shop\n\n# Install dependencies\nnpm install\n\n# Set up environment variables\ncp .env.example .env\n```\n\n### 2. Database Setup\n\n```bash\n# Initialize Prisma\nnpx prisma init\n\n# Apply migrations\nnpx prisma migrate dev\n\n# Seed the database\nnpx prisma db seed\n```\n\n### 3. Running Tests\n\n```bash\n# Run unit tests\nnpm run test\n\n# Run integration tests\nnpm run test:integration\n\n# Run e2e tests\nnpm run test:e2e\n```\n\n### 4. Code Quality Checks\n\n```bash\n# Run linter\nnpm run lint\n\n# Run type checking\nnpm run type-check\n\n# Run all checks\nnpm run check-all\n```\n\n## Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'feat: add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## Testing Strategy\n\n### Unit Testing\n- Components testing with React Testing Library\n- Hook testing with @testing-library/react-hooks\n- API function testing with Jest\n- Utility function testing\n\n### Integration Testing\n- API endpoint testing\n- Database operations testing\n- Authentication flow testing\n- Form submission testing\n\n### E2E Testing\n- User flows testing with Cypress\n- Payment process testing\n- Admin dashboard testing\n- Critical path testing\n\n## Monitoring and Analytics\n\n### Application Monitoring\n- Error tracking with Sentry\n- Performance monitoring with New Relic\n- User behavior analytics with Mixpanel\n- Server monitoring with Datadog\n\n### Business Analytics\n- Sales analytics\n- User engagement metrics\n- Conversion tracking\n- Inventory analytics\n- Marketing performance\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Contact\n\nProject Link: [https://github.com/yourusername/windsurf-shop](https://github.com/yourusername/windsurf-shop)\n\n## Acknowledgments\n\n- [React](https://reactjs.org/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Prisma](https://www.prisma.io/)\n- [Cloudflare Workers](https://workers.cloudflare.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhitrend%2Fwindsurf-shop-front","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhitrend%2Fwindsurf-shop-front","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhitrend%2Fwindsurf-shop-front/lists"}