使用 React 和 Node 构建的简化版 Jira 克隆

访问实时应用 | 查看客户端 | 查看 API

这是什么，适合谁 🤷‍♀️

我从事 React 咨询工作，这是我利用业余时间构建的一个展示产品。它是一个现代、真实世界 React 代码库的绝佳范例。

市面上有许多展示/示例 React 项目，但其中大多数都过于简单。我认为这个代码库包含足够的复杂性，能够为所有技能水平的 React 开发者提供有价值的见解，同时仍然_相对_易于理解。

特性

• 经过验证、可扩展且易于理解的项目结构
• 使用现代 React 编写，仅使用带 hooks 的函数式组件
• 各种自定义轻量级 UI 组件，如日期选择器、模态框、各种表单元素等
• 简单的本地 React 状态管理，不使用 redux、mobx 或类似工具
• 自定义 webpack 配置，不使用 create-react-app 或类似工具
• 客户端使用 Babel 驱动的 JavaScript 编写
• API 使用 TypeScript 编写并采用 TypeORM

设置开发环境 🛠

• 如果你还没有安装 postgreSQL，请先安装它，并创建一个名为 jira_development 的数据库。
• git clone https://github.com/oldboyxx/jira_clone.git
• 在 /api 中创建一个空的 .env 文件，将 /api/.env.example 的内容复制进去，并填写你的数据库用户名和密码。
• npm run install-dependencies
• cd api && npm start
• 在另一个终端标签页中运行 cd client && npm start
• 应用程序现在应该运行在 http://localhost:8080/ 上

运行 cypress 端到端测试 🚥

• 设置开发环境
• 创建一个名为 jira_test 的数据库，并使用 cd api && npm run start:test 启动 api
• cd client && npm run test:cypress

缺少什么？

这个展示产品中缺少一些在实际产品中应该存在的功能：

迁移 🗄

我们目前使用 TypeORM 的 synchronize 功能，该功能会在每次应用程序启动时自动创建数据库模式。在展示产品或产品尚无人使用的早期开发阶段这样做是没问题的，但在真正上线产品之前，我们应该 引入迁移。

正确的身份验证系统 🔐

我们目前会为任何没有有效凭据访问 API 的用户自动创建身份验证令牌，并预置包含问题和用户的项目。在真实产品中，我们希望实现一个正确的 电子邮件和密码身份验证系统。

可访问性 ♿

并非所有组件都正确定义了 aria 属性、视觉焦点指示器等。大多数早期阶段的公司往往忽视产品的这一方面，但在许多情况下他们不应该这样做，尤其是当他们的用户群开始增长时。

单元测试/集成测试 🧪

客户端和 API 目前都通过 端到端 Cypress 测试 进行测试。对于像这样相对简单的应用程序来说，这已经足够了，即使它是一个真实产品。然而，随着应用程序复杂度的增加，开始编写额外的单元测试/集成测试可能是明智的。

贡献

我不会接受此仓库的 PR。请随意 fork 并维护你自己的版本。

许可证

MIT

访问实时应用 | 查看客户端 | 查看 API