Socratic

• 

  Homepage

• 

  Achievement Center

• 

  Subject Selection

• 

  Conversation History

• 

  Knowledge Map

• 

  Learning Overview

Inspiration

作为一名教育者和开发者，我深知传统教育中"直接给出答案"的教学方式并不能帮助学生真正理解知识。苏格拉底式教学法通过引导性问题让学生自己发现答案，这种方法几千年来被证明是有效的。我想利用现代 AI 技术，让每个学生都能拥有一个耐心的、会引导思考的私人导师。

What I Learned

• Socratic 教学法：如何设计问题来引导学生思考，而不是直接给出答案
• 实时流式响应：使用 SSE (Server-Sent Events) 实现 AI 回复的逐字显示
• 本地数据持久化：利用 localStorage 实现访客模式的数据隔离和保存
• 成就系统设计：如何通过行为检测算法识别学生的学习里程碑
• 中英文国际化：完成整个应用的中文迁移，支持双语切换

How I Built It

项目采用现代化的前端技术栈：

1. 前端框架：React + TypeScript + Vite，提供快速开发和优秀的类型安全
2. UI 组件：基于 Tailwind CSS 的自定义组件系统
3. 后端服务：Supabase 提供数据库和身份认证
4. AI 集成：通过 MeDo AI Edge Function 调用 Gemini 2.5 Flash 模型
5. 状态管理：自定义 guestStore 管理访客模式的本地状态

核心功能包括：

• 🎯 苏格拉底式 AI 对话（永不直接给答案）
• 📊 学习历史追踪和会话管理
• 🏆 8 个成就解锁系统
• 🗺️ 知识地图可视化各科掌握度
• 👤 零摩擦访客模式（无需注册即可体验）

Challenges Faced

挑战 1：访客数据隔离

• 问题：如何让未登录用户也能使用应用，同时保证每个人的数据独立
• 解决：使用 localStorage 按浏览器/设备隔离，键名 socratic_guest_data，包含 sessions、messages、achievements 等完整数据结构

挑战 2：成就检测系统

• 问题：如何实时检测学生是否达成了某个成就条件
• 解决：在每次 AI 回复后运行检测算法，检查消息内容、提问次数、学习天数等指标，触发时显示 toast 通知

挑战 3：中英文统一

• 问题：项目初期存在中英文混合的界面，用户体验不一致
• 解决：分析所有 73 个 TSX 文件，提取 242+ 条文本，统一迁移到中文

挑战 4：布局适配

• 问题：英文文本比中文长 30-50%，切换语言后按钮和卡片会溢出
• 解决：逐个页面调整样式，确保双语切换后的视觉完整性

Built With

• gemini-ai
• react
• server-sent-events-(sse)
• supabase
• tailwind-css
• typescript
• vite