LearnMateAI - Inclusive Educational AI SaaS Platform featuring D

项目说明

LearnMate AI

LearnMate AI is a smart teaching assistant platform made for modern schools. It has different parts for instructors and students. We built this to show how to quickly create a production-ready SaaS app using ad AI coding tools (Claude Code), Agent workflows, and full-stack automatic deployments.

Blog Post

📍 Online Demo

>

> [!IMPORTANT]
> Network Latency (Cold Start) Note
> We use Render's free tier for our backend. If nobody uses the app for a while, the server goes to sleep to sa. So, your first login might take about 3 minutes to load. This is normal. Please wait while it wakes up. After that, it will be fast!

* Frontend ():
* Backend (Render):

🔑 Test Accounts

You can try the app easily using these test accounts:

👨‍🏫 Instructor Role
* Account:
* Password: owEuWEmcl2Xx

🎓 Student Role
* Account (Student A):
* Password: dUfkh
* Account (Student B): emily.da.edu
* Password: OKmjlTF25O2r

---

🚀 Core Features & Smart Designs

We did not want to make a simple CRUD app. Instead, we created special features to solve real problems in education:

1. Instructor Features

* Safe Content Control
* Design: To stop the AI from generating harmful or biased content, instructors can set an "audience profile" for the class. The Prompt Engine uses this profile to make sure the AI respects cultural and psychological safety.
* Li Report Dashboard
* Design: Instead of boring tables, our dashboard calculates class a in real time. It uses backend QuizSubmission data to show an "Error Distribution Radar." This helps instructors see what the class is struggling with without breaking student privacy.

2. Student Features

* Interactive 3D Flashcards
* Design: Reading long texts is tiring. We used CSS3 to build real-feeling 3D flipping flashcards. The LLM summarizes long PDFs into these fun, pocket-sized cards.
* Smart Quizzes with Helpful Feedback
* Design: We used a step-by-step layout for taking quizzes. When you finish, the LLM API quickly gives you a Score Badge and deep feedback on your mistakes. It feels like a real tutor is grading your test.

3. Setup & Security

* Data Safety by Role
* Design: We use React Context and strict router rules so that students and instructors can only see their own data. This completely blocks accounts from seeing data they shouldn't.

---

🏗 System Architecture

The app is built to handle many users, keep data safe, and connect securely with APIs:

<img alt="System Architecture Diagram" src=" />

<br/>

<details>
<summary><h3> 📊 Click here to expand Mermaid Source Code</h3></summary>

<br/>

</details>

---

🛠 Tech Stack

* Frontend: React 19, Vite 8, TypeScript, React Router DOM, Tailwind CSS (with Skeleton loading)
* Backend: Python 3.10+ (CI uses 3.12), FastAPI, Pydantic, SQLAlchemy ORM, Anthropic Claude API
* Database: PostgreSQL Cloud (Neon/Render DB)
* CI/CD Pipeline: GitHub Actions
* Testing: Pytest, , Playwright
* Quality & Security: ESLint, Gitleaks, Bandit, CodeQL, npm audit

---

🤖 Claude Code & Workflow

A big highlight of this project is how we used AI to build it:

1. Test-Dri (TDD)
* To stop AI mistakes, we used Pytest integration loops. This forces the model to follow Pydantic Schemas exactly.
2. AI Agent En (.claude)
* The project has special prompt rules in CLAUDE.md. Claude Code hooks enforce checks instead of reminding: a PreToolUse commit gate runs Pytest before any agent-issued git commit and blocks it on failure, a PostToolUse hook lints each edited file (ruff / eslint + tsc), and a Stop hook runs the test suites before the agent ends a turn with uncommitted changes. See .claude/settings.json.
3. Security & CI/CD Pipeline
* GitHub Actions run Pytest, , and Playwright E2E tests, plus CodeQL, Bandit, Gitleaks, and dependency scans on every push and pull request.

---

💻 Local De Setup

To run this app on your computer (Node 20+, Python 3.10+):

npm run dev runs dev.mjs, which picks the first free ports starting at 5200
(frontend) and 8200 (backend) and wires the frontend to the backend automatically
(o the base ports in server/.env, see server/.en).
To run them separately, point the frontend proxy at the backend port first:

Running tests

---

📁 Repository Structure

---

License & Project Info

Copyright © 2026 LearnMate Team. All Rights Reserved.

Built by Liuyi Yang and Jing Ng. You may not copy, share, or sell this code without permission.

项目信息

开发语言：Python

Star 数：1

技术要点

该项目属于防护思路方向的开源资源，代码结构清晰，适合安全研究人员学习参考。项目围绕Inclusive Educational AI SaaS Platform featuring Defensive JSON Deserialization & 9-Stage CI/CD Security Pipeline (React, FastAPI, Playwright)展开，提供了可运行的实现，对理解相关安全机制、工具原理与攻防技术具有较高的研究价值。

从技术实现角度看，此类项目的核心在于对底层原理的深入理解与工程化落地。开发者在研究过程中可以结合官方文档与社区讨论，梳理项目的初始化流程、核心模块职责与数据流转，逐步掌握其中的技术细节与设计思路。

使用与学习建议

1. 下载源码压缩包，解压到本地环境。

2. 根据项目类型准备对应的运行环境与依赖。

3. 按照 README 中的步骤完成配置与部署。

4. 在隔离的测试环境中运行验证，避免影响生产系统。

免责声明

本资源来源于开源社区，仅供安全研究、技术学习与合法授权范围内的攻防演练使用，请勿用于任何非法或侵害他人权益的用途。使用本项目产生的一切后果由使用者自行承担。