前端使用 React 与 MUI 构建用户仪表盘界面
sentrify-dashboard — React 后台模板
作者 Zoot01
Sentrify 是一个基于 React 与 MUI 的免费后台管理模板,前端提供用户仪表盘界面,后端附带一个基础的 Express 服务用于用户认证。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
目前有 1 张原始预览,可打开完整图片查看设计细节。
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
后端附带基础 Express 服务用于用户认证
包含受保护路由、账户验证与密码重置流程
集成队列系统与自动邮件发送
使用 turborepo 组织前后端单仓库结构
采用 TypeScript 编写
模板详细介绍
Sentrify 是一个面向带用户仪表盘的 Web 应用的项目模板,前端使用 React 与 MUI 构建数据界面,后端包含一个基础的 Express 服务,用于处理用户认证。项目采用 TypeScript,并以 turborepo 组织为单仓库结构,前后端代码位于同一仓库中。
认证相关能力包括前端认证、受保护路由、账户验证、密码重置、自动发送邮件、队列系统、全屏功能以及空闲自动登出,同时提供一个可共享的组件库。运行前需要准备远程或本地的 PostgreSQL 与 Redis 实例,并通过环境变量配置数据库、Redis、会话密钥、JWT 密钥、邮件服务等参数。README 要求 PORT 与 ALLOWED_ORIGIN 保持指定值,否则会出现 CORS 与前端请求问题。
该模板采用 MIT 许可,可免费使用、修改、商用和分发代码,但演示图片、字体、图标等第三方素材需按各自许可单独核对,域名、托管、数据库等外部服务可能另行收费。README 未说明项目的生产就绪程度、性能表现或长期维护状态。
适合你的项目吗?
适用场景
- 搭建带用户登录与仪表盘的小型 Web 应用原型
- 学习 React 前端与 Express 认证后端的组合方式
- 在单仓库中同时管理前端界面与认证 API
- 作为需要账户验证、密码重置与邮件通知的项目起点
适合人群
- 需要现成用户认证与仪表盘界面的开发者
- 使用 React、MUI 与 Express 技术栈的团队
- 希望以单仓库方式组织前后端代码的项目
- 能自行准备 PostgreSQL 与 Redis 环境的开发者
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
需要准备远程或本地的 PostgreSQL 与 Redis 实例
- 2
在根目录 .env 中配置 PORT、ALLOWED_ORIGIN、DATABASE_URL、REDIS_URL、SESSION_SECRET、JWT_SECRET、邮件服务等变量
- 3
PORT 与 ALLOWED_ORIGIN 需保持 README 指定值,否则会出现 CORS 与前端请求问题
- 4
安装依赖后需在 apps/api 下执行 npx prisma generate 生成 Prisma 类型
- 5
通过 npm run dev 启动,并访问 http://localhost:3987 而非 127.0.0.1 地址
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 运行项目需要自备远程或本地的 PostgreSQL 与 Redis 实例,属于外部服务依赖,需自行部署或承担相应成本。
- 必须将 PORT 与 ALLOWED_ORIGIN 保持为 README 指定值,否则会出现 CORS 与前端请求问题。
- 本地访问必须使用 localhost:3987 而非 127.0.0.1:3987,否则可能无法正常使用。
- 自动邮件功能需要配置邮箱账号与密码等凭据,属于外部服务依赖。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
You will either need a remote or local instance of Postgresql and Redis.
README 原文
Please keep the PORT & ALLOWED_ORGIN the same as below otherwise it will create CORS and frontend request issues.
README 原文
Make sure you are on [http://localhost:3987](http://localhost:3987) and not http://127.0.0.1:3987.
README 原文
https://github.com/Zoot01/sentrify-dashboard/blob/main/LICENSEhttps://github.com/Zoot01/sentrify-dashboard/blob/main/README.mdEMAIL_PASSWORD=password
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-09-30。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 60 / 100
- 技术栈
- React
- 网站类型
- 后台
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2023-03-20
- 截图检查日期
- 2026-09-30
目前没有记录演示链接。请依据仓库说明在本地评估;仅凭截图无法确认交互行为。
目录记录的主要技术栈是 React。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 4c1ee348f4cf175036cc14e8116b5f3e269886b816a84692c1cbb4640652d8ff
2026-09-30T09:35:37.162Z
来源文件 / 仓库 # Sentrify Free React MUI5 Template Built With Authentication 🔐 <p align="center"> <a href="https://github.com/Zoot01/sentrify-dashboard"><img alt="Stars" src="https://img.shields.io/github/stars/Zoot01/sentrify-dashboard?style=plastic" /></a> <a href="https://github.com/Zoot01/sentrify-dashboard"><img alt="License" src="https://img.shields.io/bower/l/mi?style=plastic" /></a> <a href="https://github.com/Zoot01/sentrify-dashboard"><img alt="Contributors" src="https://img.shields.io/github/contributors/Zoot01/sentrify-dashboard" /></a> </p> ## Please ⭐ to support and share with others Sentrify is a free to use project template for web applications that include a user dashboard. Sentrify provides a clean UX on the frontend with a very basic Express server used for user authentication on the backend. The project is built using modern techniques and utilizes turborepo for a seamless mono-repo environment. Sentrify is the perfect starting point for most small projects. | Features 🌟 | | ----------------------------- | | ✅ TypeScript | | ✅ Express API | | ✅ Frontend Authentication | | ✅ Password reset | | ✅ Automated emails | | ✅ Account verification | | ✅ Protected routes | | ✅ Queue system | | ✅ Fullscreen Functionality | | ✅ Automatic Idle Logout | | ✅ shareable Component Libary | ## Before Getting Started You will either need a remote or local instance of Postgresql and Redis. ## To Run Locally Clone the project ```bash git clone https://github.com/Zoot01/sentrify-dashboard cd sentrify-dashboard ``` Install dependencies ```bash npm install ``` ### Environment Variables To run this project, you will need to add the following environment variables to your .env file located in the root directory Please keep the PORT & ALLOWED_ORGIN the same as below otherwise it will create CORS and frontend request issues. `PORT=3988` `ALLOWED_ORGIN=http://localhost:3987` `SEED_DATABASE=false` `DATABASE_URL=postgresql://USERNAME:PASSWORD@localhost:5432/DB_NAME?schema=public` `REDIS_URL=redis://localhost:6379` `SESSION_SECRET=32 character string` `EMAIL_PASSWORD=password` `EMAIL_SERVICE=hotmail/gmail/ect` `ALLOW_BULL_DASHBOARD=true` `JWT_SECRET=32 character string` Generate prisma types ```bash cd apps/api npx prisma generate cd ../.. ``` Start the application ```bash npm run dev ``` View the application at [http://localhost:3987](http://localhost:3987) and create an account. 💪 Make sure you are on [http://localhost:3987](http://localhost:3987) and not http://127.0.0.1:3987. ⚠ ## License [MIT](https://choosealicense.com/licenses/mit/) ## Feedback If you have any feedback, please reach out to me on discord Zoot#7045 📭 ## Support And Future Plans I hope to continue to update and maintain this repo, any help is appreciated.
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。
ant-design-pro
Ant Design Pro 是 Ant Design 官方推出的企业级中后台前端脚手架,基于 React 19、Umi Max 4 和 antd 6 构建,内置 TypeScript 支持。
React · 后台

coreui-free-react-admin-template
Free React Admin & Dashboard Template Built for AI-Assisted Development
React · 后台

fastapi-react
fastapi-react 是一个基于 Cookiecutter 的模板,用于快速搭建 FastAPI 与 React(TypeScript)的全栈项目。
React · 后台

react-antd-admin-template
一个基于React+Antd的后台管理模版,在线预览https://nlrx-wjc.github.io/react-antd-admin-template/
React · 后台

react-saas-template
🌊 Template for building an SaaS / admin website using React + Material-UI
React · 后台

react-material-admin
☄️React Material Admin is a React template built with Material-UI
React · 后台
