MCP知识问答应用📚
🚀 由……开发 穆罕默德·阿卜杜拉 🚀 表情符号“🚀”通常被用来表示火箭、快速上升或加速等含义，在中文中可以翻译为“🚀（火箭/快速上升）”。不过，由于表情符号的直观性，直接使用“🚀”在中文语境中也是完全可以理解的。
*全栈开发人员 & MCP（微软认证专业人员）专家*
______________________________________________________________________
一个全面的、仅前端实现的问答应用程序 模型上下文协议（MCP） 备考指南。包含150道精心设计的问题，难度循序渐进，融入真实场景。
✨ 采用 React、TypeScript 和 Tailwind CSS 构建，品质卓越 ✨
特色✨
- 150道选择题 涵盖所有MCP主题
- 无需认证 - 开始测验
- 灵活导航 - 随时返回/前进，随时停止
- 详细结果 - 查看正确答案及解释
- 类别细分 - 按主题进行性能分析
- 移动设备友好（或自适应） - 在所有设备上均可使用
- 本地存储 - 自动保存进度
- Vercel Ready（已准备好部署到Vercel） - 轻松部署
快速入门 🚀
先决条件
- Node.js 18及以上版本
- npm 或 yarn
安装
- 克隆项目并导航至项目目录：
cd mcp-quiz-app- 安装依赖项：
npm install- 启动开发服务器：
npm run dev- 打开您的浏览器：
http://localhost:5173可用脚本 📜
npm run dev- 启动开发服务器npm run build- 为生产构建npm run preview- 预览生产构建npm run lint- 运行 ESLint
部署到 Vercel 🌐
选项1：Vercel CLI（推荐）
- 安装 Vercel CLI：
npm i -g vercel- 部署：
vercel- 按照提示操作：
- 设置并部署？ Y - 哪个范围？选择您的账户 - 链接到现有项目？ N - 项目名称？ mcp-quiz-app - 目录？ ./ - 覆盖设置？ N
选项2：Vercel仪表板
- 构建项目：
npm run build- 导入您的项目：
- 点击“新建项目” - 从Git仓库导入 - 选择这个项目
- 配置设置：
- 框架预设： Vite - 构建命令： npm run build - 输出目录： dist
- 部署！
项目结构 📁
mcp-quiz-app/
├── src/
│ ├── components/
│ │ ├── HomePage.tsx # Landing page
│ │ ├── QuizInterface.tsx # Main quiz interface
│ │ ├── ResultsPage.tsx # Results and review
│ │ └── ProgressBar.tsx # Progress indicator
│ ├── data/
│ │ └── questions.json # Question bank (150 MCQs)
│ ├── types/
│ │ └── quiz.types.ts # TypeScript definitions
│ ├── App.tsx # Main app component
│ ├── main.tsx # App entry point
│ └── index.css # Global styles
├── public/ # Static assets
├── package.json # Dependencies
└── README.md # This file题库 📝
该应用程序包含150道精心设计的多项选择题，涵盖：
- HTTP理论 (20个问题) - HTTP基础、生命周期、结构化示例
- REST API（Representational State Transfer Application Programming Interface，表述性状态传递应用程序编程接口） (15个问题) - RESTful服务模式
- JSON-RPC（JSON远程过程调用） (12个问题) - 远程过程调用协议
- MCP 基础知识 (45个问题) - 核心概念、工具、资源、提示
- 能力与运输 (25道题) - 高级MCP功能
- OpenAI 集成 (15个问题) - 代理SDK集成
- OAuth 安全性 (10个问题) - 认证与授权
- 高级功能 （8个问题）- 状态化功能及其他
定制化🎨
添加更多问题
编辑 src/data/questions.json：
{
"id": 151,
"question": "Your question here?",
"options": [
"Option A",
"Option B",
"Option C",
"Option D"
],
"correctAnswer": 0,
"explanation": "Detailed explanation here.",
"category": "Category Name",
"difficulty": "easy|medium|hard"
}改变及格分数线
编辑 PASSING_PERCENTAGE 在 src/App.tsx：
const PASSING_PERCENTAGE = 70; // Change to desired percentage造型
该应用使用了Tailwind CSS。请在以下位置修改样式：
src/index.css- 全局样式- 组件文件 - 组件特定的样式
tailwind.config.js- Tailwind 配置
浏览器支持 🌐
- Chrome 90及以上版本
- Firefox 88及以上版本
- Safari 14+
- Edge 90+
贡献力量🤝
- 为仓库创建分支
- 创建一个特性分支
- 做出你的更改
- 彻底测试
- 提交一个拉取请求
许可证 📄
MIT 许可证 - 欢迎自由使用此项目来开发您自己的测验应用程序！
支持💬
如果您遇到任何问题：
- 检查浏览器控制台中的错误
- 确保您使用的是受支持的浏览器
- 尝试清除localStorage：
localStorage.clear() - 刷新页面
______________________________________________________________________
👨💻 关于开发者
穆罕默德·阿卜杜拉
全栈开发人员 & MCP（微软认证专家）
🚀 表情符号“🚀”在中文中通常被翻译为“火箭”或直接用作表示火箭发射、快速前进等意思的符号。它本身没有具体的文字含义，但在网络和日常交流中，常用来表达兴奋、期待或快速进展的情绪。 专业知识： React，TypeScript，Node.js，Python，AI集成\ 🎯（瞄准目标） 专业领域： 模型上下文协议，OpenAI智能体软件开发工具包，FastMCP（快速模型上下文协议）\ 💻 表示电脑或笔记本电脑的符号。 焦点： 构建可扩展的Web应用程序和AI驱动的工具\ 🏆（奖杯/冠军标志） 使命： 利用尖端技术打造卓越用户体验
*“以每一行代码，构建AI驱动应用的未来”*
______________________________________________________________________
祝你学习愉快！ 🎓 祝你MCP考试准备顺利！
*由穆罕默德·阿卜杜拉倾心打造*