react-ts-coding_web
所属分类:Leetcode/题库
开发工具:TypeScript
文件大小:665KB
下载次数:0
上传日期:2022-03-04 09:33:00
上 传 者:
sh-1993
说明: react-ts-coding_web,基于 React 和 Ts 实现的前后端分离项目:在线编程笔试平台之前端,模仿力扣(LeetCode)的部分功能点。
(react-ts-coding_ Web, a front-end separation project based on React and Ts implementation: the front-end of the online programming written test platform, and some functional points of the imitation LeetCode.)
文件列表:
.babelrc (63, 2022-03-04)
.npmrc (44, 2022-03-04)
deploy (0, 2022-03-04)
deploy\config.js (186, 2022-03-04)
deploy\index.js (437, 2022-03-04)
images.d.ts (163, 2022-03-04)
img (0, 2022-03-04)
img\1.png (121459, 2022-03-04)
img\2.png (56591, 2022-03-04)
img\3.png (72511, 2022-03-04)
img\4.jpg (21772, 2022-03-04)
img\5.png (39526, 2022-03-04)
img\6.png (13974, 2022-03-04)
img\7.png (41853, 2022-03-04)
img\bg.jpg (202186, 2022-03-04)
img\logo.png (64359, 2022-03-04)
img\my-favicon.ico (4286, 2022-03-04)
package.json (2730, 2022-03-04)
problem.md (5391, 2022-03-04)
src (0, 2022-03-04)
src\App.tsx (3216, 2022-03-04)
src\api (0, 2022-03-04)
src\api\index.ts (625, 2022-03-04)
src\api\modules (0, 2022-03-04)
src\api\modules\candidate.ts (335, 2022-03-04)
src\api\modules\interview.ts (615, 2022-03-04)
src\api\modules\paper.ts (619, 2022-03-04)
src\api\modules\test.ts (258, 2022-03-04)
src\api\modules\user.ts (721, 2022-03-04)
src\common (0, 2022-03-04)
src\common\components (0, 2022-03-04)
src\common\components\Socket.tsx (2601, 2022-03-04)
src\common\components\breadcrumbs.tsx (3035, 2022-03-04)
src\common\components\candidate (0, 2022-03-04)
src\common\components\candidate\codeEditor.tsx (5106, 2022-03-04)
src\common\components\candidate\countdown.tsx (1903, 2022-03-04)
src\common\components\candidate\markdownEditor.tsx (2658, 2022-03-04)
... ...
## 项目地址
GitHub 前端仓库地址:[https://github.com/HCYETY/Online-programming-platform](https://github.com/HCYETY/Online-programming-platform)
GitHub 后端仓库地址:[https://github.com/HCYETY/Online-programming-platform_service](https://github.com/HCYETY/Online-programming-platform_service)
项目演示地址:[http://www.syandeg.com](http://www.syandeg.com)
## 项目介绍
该项目是一个前后端分离项目,按照用户角色分为两部分,分别是面试官和候选人,主要功能是候选人在线完成代码编写,面试官可查看编程结果,同时面试官和候选人还可进行实时文字交流。
项目实现:
- 将项目前端和后端部署于服务器上,并实现了自动化部署。
- 使用 WebSocket 实时更新聊天信息。面试官和候选人各自进入面试间后,客户端会显示房间信息及聊天情况,当两个人都进入面试间后,即可开始实时文字交流。
- 使用 Cookie 存储用户登录时后端生成的随机码,使用 nodemailer 发送邮件信息(如注册验证码等)。
- 相关数据诸如用户登录信息,试卷和试题信息等全部存储于后端 MySQL 数据库中,前端需要的数据渲染均通过请求后端接口获取。
- 使用 react-monaco-editor 代码编辑器,自定义功能选项以编写代码;使用 wangEditor 富文本编辑器,完成试题的自定义编写。
- 使用 Ant Design 完成 UI 设计,几乎使用了其中 80% 的组件。
- 后端使用 Koa 框架,通过 koa-cors 实现前后端跨域。
## 项目技术栈
前端:React + TypeScript ,后端:Node.js + MySQL + Koa 。
## 项目任务拆解
1. 登录/注册模块
- 支持邮箱登录和注册
- 支持“退出登录”功能
2. 面试题模块
3. 在线编程模块
4. 在线留言模块
5. 在线编程模块支持自动刷新
6. 在线留言模块改成实时文字聊天
7. 在线语音聊天模块
8. 在线编程模块支持运行JS代码
9. 在线编程模块支持协同编辑
## 技术选型
|技术|说明|理由|
|:--:|:--:|:--:|
|Ant Design|前端 UI 设计|成熟的 UI 组件库,GitHub 上有 `166 watch` & `32.5k fork` & `78.1k star`|
## 项目进度
- [x] 2021-09-04:实现登录/注册的静态页面
- [x] 2021-09-19:实现登录/注册逻辑(包括账号密码登录、登录拦截,session 身份验证)
- [x] 2021-09-29:初步部署前后端项目到阿里云服务器
- [x] 2021-10-04:购买域名并实现自动化部署项目
- [x] 2021-10-05:支持使用邮箱 登录和注册
- [x] 2021-10-09:面试官侧支持新建/删除试卷,在“新建试卷”里新建/修改/删除试题,发送邮件至候选人邮箱
- [x] 2021-10-15:候选人侧展示试卷、开始编程、提交试卷
- [x] 2021-10-16:支持“退出登录”
- [ ] 2021-10-30:
- [x] 2021-10-31:搭建个人博客
- [x] 2021-11-06:沉淀项目所学,写博客中
- [x] 2021-11-14:评论功能雏形(但因暂无该需求,先放一边)
- [x] 2021-11-23:实现试题筛选功能,完成编程模块
- [ ] 2021-12-01:
- [x] 2021-12-03: 实现在线聊天功能
- [ ] 2021-12-10:解决编辑冲突问题
- [x] 2021-12-14:项目持续待机中,先学小程序开发去了
## 项目展示
### PC 端
1. 登录/注册
![登录界面](https://z3.ax1x.com/2021/11/02/IkyIBQ.png)
![注册界面](https://z3.ax1x.com/2021/11/02/Ik63gf.png)
#### 面试官侧
2. 试题管理
![试卷展示](https://s4.ax1x.com/2022/02/18/H7OIxS.png)
![添加试题之试卷信息](https://s4.ax1x.com/2022/02/18/H7X6zT.png)
![添加试题之试题信息](https://s4.ax1x.com/2022/02/18/H7Xhw9.png)
![修改试卷1](https://s4.ax1x.com/2022/02/18/H7XLOe.png)
![修改试卷2](https://s4.ax1x.com/2022/02/18/H7jekn.png)
3. 阅卷管理
![试卷展示](https://s4.ax1x.com/2022/02/18/H7jMlT.png)
![试卷详细信息之1](https://s4.ax1x.com/2022/02/18/H7jYkR.png)
![试卷详细信息之2](https://s4.ax1x.com/2022/02/18/H7j0XD.png)
![试卷详细信息之3](https://s4.ax1x.com/2022/02/18/H7js7d.png)
![批阅试卷](https://s4.ax1x.com/2022/02/18/H7jR9P.png)
4. 面试间管理
![面试间信息展示](https://s4.ax1x.com/2022/02/18/H7jfc8.png)
![添加面试间](https://s4.ax1x.com/2022/02/18/H7jbhq.png)
5. 面试间入口
![进入面试间](https://s4.ax1x.com/2022/02/18/H7jO3V.png)
#### 候选人侧
近期下载者:
相关文件:
收藏者: