发布于 2026-01-05 3 阅读
0

LiveTable 我创建了 LiveTable 如何贡献 LiveTable 技术栈 其他资源/信息

实时表格

我建造的

LiveTable

如何贡献

技术栈

其他资源/信息

我建造的

这是一个用于创建公共房间时间表的 PWA 应用,旨在帮助有共同问题需要解决的人们同步制定时间分配方案。例如,假设一个辅导小组里有一群作息时间不同的学生,他们都想找到最佳的上课时间。他们可以打开这个应用,创建自己的房间,然后安排课程表。我计划添加更多功能,但由于期末考试临近,目前只能先发布这个版本。

演示链接

项目已部署在 Heroku 上:https://mysterious-beach-92009.herokuapp.com/

注意:响应式设计、用户界面设计、加载动画、与时间表操作相关的自定义功能等功能目前尚未添加。

代码链接

GitHub 标志 himanshuc3 / LiveTable

实时日程安排。自由职业者也可以使用 :)

LiveTable

实时日程安排。可供自由职业者使用。

如何贡献

  1. Fork 并克隆该项目。
  2. npm i安装依赖项。根目录下有两个 package.json 文件——一个用于 Node/Express 服务器,一个用于 React 应用。然后cd进入客户端目录,再次安装npm ipackages 文件。
  3. 在命令行中运行npm run dev以同时运行 express 服务器和 react 服务器 - 隐含代理。

注意:react 服务器运行在 localhost:3000,express 服务器运行在http://localhost:5000

技术栈

React、Express。

Redux、cors、redux-thunk 等。




注意:还有大量重构工作要做​​!!!

我是如何搭建的(使用了哪些技术栈?过程中是否遇到问题或发现了什么新东西?)

MERN技术栈:

前端 - React
前端库 - moment、cleave.js、nuka carousel、rodal、react-timetable-events
后端 - Node、Express
实时通信通过 pusher 实现😍

:目前尚未集成 MongoDB,因为这只是个演示应用,而且我时间有限。但可以肯定的是,OAuth 和 MongoDB 都会在后续版本中发挥作用。

我遇到的问题:

  1. 搭建 MERN 技术栈:我之前用过 React 和 Express,但没试过把它们结合起来。一开始管理两个不同的服务器(一个运行 React,一个运行 Express)确实有点棘手,也很有挑战性,但我最终克服了困难。感谢这次挑战
  2. 研究过程:我一开始尝试自己编写调度器,失败了。很快又尝试了另一个,还是失败了。又尝试了三次之后,我终于找到了合适的库。经验教训:研究能节省大量时间。
  3. Pusher:真的很难……哈哈,开玩笑的。Pusher集成得很顺利,集成代码也就写了五六行。

其他资源/信息

其他资源:

  1. 开发过程中发现了 undraw.co 这个网站,上面有一些非常棒的插画。
  2. 启动一个想法比我想象的要容易。虽然遇到了一些小问题,但我都能坦然接受。
文章来源:https://dev.to/himanshuc3/entry-livetable-5h3o