【动手做出原型——新项目搭建】

项目介绍:智学伴侣 (SmartStudy)

学习参考:https://easy-vibe.datawhale.cc/zh-cn/stage-1/1.2-building-prototype/

智学伴侣 是一款专注于沉浸式学习体验的智能学习平台,旨在通过视频学习、笔记记录和数据可视化等功能,帮助学生提升学习效率和专注度。

核心功能模块
  1. 沉浸式双向学习舱 (/learning-cabin)

    • 左侧视频播放:支持播放/暂停、进度控制,记录专注时长。
    • 右侧笔记记录:集成 Markdown 编辑器,支持实时记录学习心得。
    • 灵活布局:支持拖拽调整左右分屏比例,适应不同学习习惯。
  2. 学科掌握度仪表盘 (/dashboard)

    • 多维雷达图:展示知识点覆盖度、专注稳定性、测验准确率等维度的能力模型。
    • 学情热力图:仿 GitHub 贡献墙风格,直观展示每日学习活跃度。
  3. 动态任务看板 (/task-board)

    • 分类管理:覆盖中考、高考、考研、考公等不同阶段的学习任务。
    • 智能标记:支持 AI 推荐标记,帮助用户识别高优先级任务。
技术栈概览

前端 (Frontend)

  • 核心框架:React 18 + TypeScript 5
  • 构建工具:Vite 5
  • 样式方案:TailwindCSS 3 + PostCSS
  • 状态管理:Zustand
  • 路由管理:React Router 7
  • UI 组件库:Recharts (图表), Lucide React (图标), @uiw/react-md-editor (Markdown 编辑器)

后端 (Backend)

  • 运行环境:Node.js
  • Web 框架:Express + TypeScript
  • 功能:提供 API 接口服务(运行在 3001 端口)





演示

相关推荐
CoderYanger2 天前
A.每日一题:234. 回文链表
数据结构·程序人生·leetcode·链表·面试·职场和发展·学习方法
CoderYanger2 天前
A.每日一题:3612. 用特殊操作处理字符串 I
java·程序人生·leetcode·面试·职场和发展·学习方法·改行学it
CoderYanger2 天前
A.每日一题:144题+145题 二叉树的前序遍历+后序遍历
java·程序人生·leetcode·面试·职场和发展·学习方法·改行学it
2601_960356382 天前
大数据管理与数据科学专业的对比分析
学习方法
法雅特吉他3 天前
吉他面板材质怎么选?云杉vs桃花心木深度解析
经验分享·新媒体运营·学习方法·材质·内容运营
CoderYanger3 天前
Java EE:6.网络编程套接字(第二弹)
java·网络·程序人生·面试·职场和发展·java-ee·学习方法
CoderYanger3 天前
Java EE:5.网络原理-初识
java·网络·面试·职场和发展·java-ee·智能路由器·学习方法
Cloud_Shy6183 天前
解读《Effective Python 3rd Edition》:从练气到老魔(第七章 Item 51)
开发语言·人工智能·笔记·python·学习方法
法雅特吉他3 天前
初学者吉他推荐品牌:法雅特梵高日记V1-PRO与天路F4016S参数深度解析,1500元档入门吉他选购指南
经验分享·新媒体运营·学习方法·材质·内容运营
Cloud_Shy6184 天前
解读《Effective Python 3rd Edition》:从练气到老魔(第七章 Item 48 - 50)
开发语言·人工智能·笔记·python·microsoft·学习方法