SyntaxMap — AI-Powered Grammar Learning Platform

A secure, full-stack EdTech platform integrating AI tutoring, adaptive quizzes, and real-time collaboration across multiple institutions.

Next.jsNode.jsExpressPostgreSQLSocket.IODockerRBACn8nAI IntegrationGDPRSecurity Architecture

Context

S — SyntaxMap began as a proof-of-concept for teaching English grammar visually using a cognitive 'Tense Map' system. As adoption grew among schools, it evolved into a full SaaS platform — supporting thousands of exercises, live multiplayer sessions, and administrative dashboards. Each partner school required isolated data handling, compliance, and flexible content management. T — My responsibility was to architect, refactor, and scale SyntaxMap into a secure multi-tenant AI platform. This included building modular front- and back-end systems, implementing real-time multiplayer quizzes, integrating AI assistance, and aligning the entire stack with privacy, accessibility, and operational compliance (GDPR).

Threats

  • Cross-tenant data leaks via shared queries or unsafe joins in the ORM.
  • Injection or unauthorized API use in course/quiz creation endpoints.
  • High latency from non-optimized AI prompt handling and validation layers.
  • Insecure secret storage within n8n automations and Docker environments.
  • Non-compliance with GDPR retention and audit logging policies.
  • Fragmented developer workflows causing deployment drift between environments.

Approach

  1. Re-architected the backend into modular Node.js micro-modules (users, courses, quizzes, multiplayer, AI) using Express routers and role-based middleware. Why: simplify scalability and enable independent versioning per feature.
  2. Implemented tenant-aware RBAC (Role-Based Access Control) with contextual tokens embedded in every database transaction. Why: prevent cross-tenant access and enforce least privilege.
  3. Used PostgreSQL row-level security (RLS) and schema separation for per-institution data isolation. Why: ensure legal data segregation for partner schools.
  4. Integrated OpenAI/DeepSeek models for AI tutoring via sanitized, schema-validated prompts. Why: enable adaptive grammar feedback while preventing model injection and misuse.
  5. Added an in-platform assistant — 'Bob the Butler' — for conversational learning and navigation help. Why: improve engagement and accessibility.
  6. Connected n8n automations for analytics, email workflows, and student progress reporting. Why: automate repetitive operations with safe credential scoping and encryption.
  7. Implemented prompt and token sanitization at API boundaries using Zod and custom regex filters. Why: prevent injection or runaway token usage in LLM calls.
  8. Developed the frontend in Next.js (App Router) with React, Tailwind CSS, and Zustand for global state. Why: ensure modular design and instant navigation.
  9. Built an Admin Dashboard with CRUD for Courses, Questions, and Users. Each record supports media uploads, difficulty tags, and versioning. Why: empower non-technical instructors.
  10. Created the Tense Map module — an interactive 2D visualization mapping English grammar timelines. Why: improve conceptual retention through spatial learning.
  11. Added a Multiplayer Quiz Lobby with Socket.IO for real-time student competition. Why: enhance engagement and test backend concurrency under load.
  12. Built a Notepad/Progress Tracker section for saving vocabulary, examples, and performance analytics.
  13. Implemented environment separation (dev/stage/prod) with Docker Compose and secure `.env` handling. Why: prevent cross-environment key reuse.
  14. Configured secret rotation policies and vault-based injection for n8n and backend CI/CD pipelines (Trivy + Gitleaks scans). Why: harden deployment security.
  15. Applied GDPR principles: data minimization, TTL auto-purge jobs for logs, and anonymized reporting APIs.
  16. Added rate-limiting and CORS policies to backend routes. Why: protect from spam or API enumeration attacks.
  17. Built a comprehensive automated test suite with 229+ Jest tests covering logic, validation, and concurrency behavior. Why: enforce regression-free releases.
  18. Containerized the full stack (frontend, backend, n8n, PostgreSQL) for reproducible deployment on Vercel + Render. Why: reduce ops friction and standardize builds.
  19. Documented every module with architecture diagrams and OpenAPI specs. Why: accelerate onboarding and compliance audits.
  20. Established CI/CD using GitHub Actions with pre-merge checks (lint, tests, vulnerability scan). Why: enforce code quality and shift security left.
  21. Conducted security review workshops with other contributors to align on shared coding and compliance patterns.

Outcome

The refactored SyntaxMap achieved 40% faster API response times and zero detected cross-tenant data leaks under simulated multi-school concurrency. The automated security pipeline reduced pre-deployment review time by ~30%. GDPR readiness was verified through a formal data flow audit, and AI-assisted tutoring increased student task completion by 23% in pilot classrooms. The multiplayer module supported 50+ simultaneous sessions with stable latency below 150 ms. The modularized backend now supports onboarding of new partner schools within minutes — a task that previously required manual database provisioning.

Lessons Learned

Scaling AI-driven EdTech requires balancing pedagogy, privacy, and performance. Real success came from embedding compliance and validation into the development process — not layering it on top. By aligning architecture with GDPR and RBAC principles early, we gained both user trust and engineering speed. I also learned that multi-tenant design isn’t just a backend concern; it shapes UX, observability, and even AI fairness. SyntaxMap reinforced the importance of transparent design — making technology serve education reliably, securely, and inclusively.