React.js年会签到WebApp

年会的签到搞得花里胡哨不如搞点实在的。这套全栈 WebApp 挺不错的,前端用React.js搞页面渲染,再配个QR 码生成器扫码组件,访客来了一扫就能签到。样式用的是react-semantic-ui,配上点自定义 CSS,整体颜值还挺高。

后端嘛,比较经典的Node.js + Express组合,数据用MySQL + Sequelize,操作起来顺手,逻辑也清晰。Socket.IO在这儿主要是干实时通信的事,比如你在后台看到谁刚刚扫码进场,系统就马上弹通知,响应也快,体验感还蛮好。

部署在Heroku上,省心。如果你也想做点活动类的 WebApp,可以参考它的项目结构,前后分得清,MVC 做得还行。扫码那块用的是浏览器调用摄像头,安全性也比较可控。你也可以把扫码功能拆出去做成小模块,别的场景也能用。

对 Socket.IO 不熟的朋友可以看看这些相关资源:

如果你想搞点更炫的,比如多人扫码动态列表、活动排行榜这些,也都能拓展得上去。,动手练练,收获挺多。

zip
annualparty-master.zip 预估大小:68个文件
folder
annualparty-master 文件夹
folder
client 文件夹
file
package.json 555B
folder
src 文件夹
folder
components 文件夹
folder
DropdownCustom 文件夹
file
index.js 44B
file
DropdownCustom.js 1KB
file
index.js 147B
file
App.js 107B
folder
utils 文件夹
file
API.js 656B
folder
pages 文件夹
folder
Home 文件夹
file
Home.js 1KB
file
index.js 36B
folder
BadgeGeneration 文件夹
file
index.js 47B
file
BadgeGeneration.js 3KB
folder
Attendees 文件夹
file
index.js 41B
file
Attendees.js 2KB
folder
Main 文件夹
file
Main.css 3KB
file
index.js 36B
file
Main.js 4KB
folder
Workshops 文件夹
file
index.js 41B
file
Workshops.js 3KB
folder
WorkshopDetails 文件夹
file
WorkshopDetails.js 7KB
file
index.js 47B
folder
Registration 文件夹
file
Registration.js 6KB
file
index.js 44B
folder
CheckIn 文件夹
file
index.js 39B
file
CheckIn.js 5KB
folder
build 文件夹
file
service-worker.js 3KB
folder
static 文件夹
folder
js 文件夹
file
main.37b459b1.js.map 4.9MB
file
main.37b459b1.js 667KB
folder
css 文件夹
file
main.b5408d31.css 3KB
file
main.b5408d31.css.map 4KB
file
index.html 866B
file
favicon.ico 5KB
file
manifest.json 385B
file
icon.png 781B
folder
img 文件夹
file
grid.png 74B
file
placeit.png 246KB
file
asset-manifest.json 196B
folder
public 文件夹
file
index.html 752B
file
favicon.ico 5KB
file
manifest.json 385B
file
icon.png 781B
folder
img 文件夹
file
grid.png 74B
file
placeit.png 226KB
file
yarn.lock 236KB
file
.gitignore 23B
file
package.json 787B
folder
db 文件夹
file
schema.sql 139B
folder
models 文件夹
file
workshop-selection.js 1KB
file
room.js 722B
file
index.js 972B
file
instructor.js 766B
file
workshop.js 2KB
file
attendee.js 3KB
file
pass-type.js 967B
file
README.md 2KB
folder
config 文件夹
file
config.json 435B
file
Procfile 20B
folder
controllers 文件夹
file
registrationController.js 1KB
file
attendeesController.js 993B
file
workshopsController.js 1KB
file
checkInController.js 2KB
file
nodemon.json 37B
folder
routes 文件夹
folder
api 文件夹
file
index.js 451B
file
workshops.js 343B
file
registration.js 263B
file
attendees.js 382B
file
checkIn.js 251B
file
index.js 335B
file
server.js 2KB
file
yarn.lock 73KB
...
zip 文件大小:1.79MB