返回项目
开发中Next.jsReactSupabaseTypeScriptTailwind CSSRedux ToolkitGSAPKaTeXOpenAI API2026

ICFES Master

面向哥伦比亚 ICFES 国家考试（Saber 11）的互动刷题与学习平台。采用 Feature-Based 与 Atomic Design，技术栈为 Next.js 15、React 19、Tailwind CSS 与 Supabase。包含三个学习层级、分科练习、三小时 200 题全真模拟、学习资料、可配置计时、进度统计、每日挑战与排行榜、邮箱与 Google 登录、40+ 成就体系、订阅方案（免费/Pro/Premium/年付）、详尽解析反馈、多媒体与 KaTeX 公式，以及 OpenAI API 集成。部分内容与成就逻辑仍在完善中。

查看演示查看代码
ICFES Master — vista previa

我学到了什么

  • 用功能模块化目录 + Atomic Design 扩展大型教育产品与界面
  • 使用 Supabase 做邮箱/Google 认证并在数据库之上抽象服务层
  • 在 Next.js 中用 Redux Toolkit 管理全局状态，同时保持按功能划界
  • 富文本学习流：Markdown、KaTeX 公式与多媒体统一渲染
  • 用 GSAP 做动效并与 React 保持可控耦合
  • 接入 OpenAI API 时明确产品边界（聚焦 ICFES，而非泛化的多国考试工具）

技术细节

  • •Next.js 15（应用路由）、React 19、TypeScript
  • •Tailwind CSS 4、clsx、tailwind-merge
  • •Supabase JS：认证与数据访问
  • •@reduxjs/toolkit 与 react-redux
  • •GSAP 与 @gsap/react
  • •react-markdown；KaTeX 与 react-katex
  • •openai SDK 支撑 AI 相关能力