AI导哈

数据表格应用

一个基于React和InstantDB的全栈数据表格应用，具有实时同步和安全认证功能，适用于需要实时协作和数据处理的项目。

  • by jllerenadesign
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 jllerena1/table-test-mcp

使用说明

数据表组件

使用React和InstantDB构建的全栈数据表应用程序，具有实时同步和安全身份验证功能。

认证

此应用程序使用 InstantDB幻码身份验证 对于安全的用户登录：

  • 基于电子邮件的登录：用户输入他们的电子邮件地址以接收验证码
  • 6位幻码：向用户的电子邮件发送一个安全的6位代码
  • 两步验证：电子邮件→ 代码验证流程
  • 会话管理：使用InstantDB自动处理会话
  • 受保护的路线：所有数据操作都需要身份验证

登录流程

  1. 用户输入其电子邮件地址
  2. 系统通过电子邮件发送6位验证码
  3. 用户输入代码以完成身份验证
  4. 授予对具有实时同步功能的数据表的访问权限

特性

  • 标题段：标题和描述
  • 批处理操作栏：选择项目时出现，显示所选计数和操作按钮
  • 数据表:
    • 带复选框的可选行
    • 带有可排序标题的动态列
    • 行选择突出显示
    • 内联单元格编辑
    • 实时数据同步
  • 插槽组件：可选占位符组件
  • 分页：每页项目选择器、页面导航和项目计数显示
  • 黑暗模式切换：只需单击一下即可在浅色和深色主题之间切换
  • CRUD操作：通过实时更新创建、读取、更新和删除行

入门指南

再进行

npm install

运行开发服务器

npm run dev

为生产而建

npm run build

特性

  • ✅ 带复选框的行选择
  • ✅ 选择所有功能
  • ✅ 选择项目时的批处理操作栏
  • ✅ 分页控制
  • ✅ 深色模式 -在浅色和深色主题之间切换
  • ✅ 响应式设计
  • ✅ 简洁、现代的用户界面与Figma设计相匹配
  • ✅ 平滑的主题转换

技术栈

  • 反应18 -UI框架
  • 维特 -构建工具和开发服务器
  • 即时数据库 -具有实时同步功能的后端即服务
    • 密码认证
    • 实时数据库同步
    • 无需后端代码
  • 层叠样式表 -自定义样式（无外部CSS框架）

数据库

此应用程序使用 即时数据库 作为其后端数据库：

  • 实时同步：所有更改在所有连接的客户端上立即同步
  • 模式:
    • columns 表：存储列定义（名称、顺序、createdAt）
    • rows table：将包含单元格的行数据存储为JSON数组
  • 认证：内置魔术码电子邮件身份验证
  • 权限：共享表-所有经过身份验证的用户都可以读/写数据

环境设置

创建一个 .env 根目录中的文件：

VITE_INSTADB_APP_ID=your-app-id-here

应用程序ID已在中配置 src/config/instadb.js 并且可以通过环境变量进行覆盖。

部署

  • 实时应用程序: https://table-test-mcp.vercel.app
  • 平台：Vercel
  • 自动部署：从主分支启用
  • 备选网址:
    • https://table-test-mcp-juan-llerenas-projects.vercel.app
    • https://table-test-mcp-git-main-juan-llerenas-projects.vercel.app

仓库

相关 MCP