Optimized Interfaces for Teachers, Students, and Parents

Tailored dashboards focus exclusively on the specific concerns of each role, preventing confusion caused by information overload.

Frictionless Navigation & Accessible UX

Designed with a focus on accessibility to ensure that any user, regardless of digital literacy, can complete tasks using the most direct and intuitive paths.

End-to-End Data Lifecycle Design

A unified data architecture that seamlessly connects lesson distribution, AI integration, and learning analytics. A single data point triggers AI quiz generation and progress visualization, accelerating decision-making on the front lines of education.

Feature 1: Content Management

• Overview: A one-stop solution covering the entire workflow from assignment distribution and collection to grading and record-keeping.
• Key Highlights: Minimizes communication overhead between teachers and students, significantly accelerating the feedback loop. The system is designed so all data is instantly reflected in the database and automatically synchronized with the Visualization section.

Feature 2: Data Visualization

• Overview: Aggregates learning data and presents it in an intuitive, easy-to-grasp format.
• Key Highlights: Transforms vast amounts of raw data into "actionable insights at a glance." Teachers can optimize instruction based on class-wide trends, while parents can provide targeted support at home by tracking their child's specific academic progress and performance history.

Feature 3: AI-Powered Quiz

• Overview: Automatically generates quizzes based on lesson materials to provide a personalized learning experience.
• Key Highlights: Lowers the barrier to self-study by transforming passive learning into "active challenges." This feature expands the learning experience by stimulating intellectual curiosity and encouraging student agency.

[Overview]

The entire system is architected around a consistent data flow: User Input → Data Processing → Database Persistence → Cross-Functional Synchronization.

[Technical Decisions & Strategy]

• Single Source of Truth: All input data is treated as a single source to ensure seamless synchronization across all platform features.
• Data-Level Integration: Established deep integration between content management and analytics visualization at the data layer.
• Structural Integrity: Maintained strict alignment between UI states and underlying data structures to prevent state drift.

[My Contribution]

• System-Wide Data Flow Design: Architected the end-to-end logic for how data travels through the application.
• Inter-functional Data Connectivity: Designed the structural bridges that allow different features to share and react to data updates in real-time.
• Consistency Governance: Formulated the core design principles to guarantee data integrity across the entire platform.

The system is architected around the core principle of separating "stateless business logic" from "stateful real-time communication."

[Key Architectural Strategies]

• Physical Service Separation (Main vs. Chat): To prevent the overhead of persistent Socket.io connections from degrading the performance of the main REST API (handling assignments and AI quiz generation), these processes are physically decoupled. This architecture enables independent scaling to accommodate future traffic spikes.
• Cross-Service Integration: Implemented a hybrid design where the Chat server's io instance is injected into the main server's notification routes (notificationRoutes). This allows REST communication results to trigger seamless real-time push notifications.
• Strict Security Layer: Centralized management of JWT authentication via httpOnly cookies and Role-Based Access Control (RBAC) within unified middleware. On the frontend, authentication and connection states are managed through the Context API, with endpoint logic standardized across the Axios service layer.

[My Role: Technical Lead]

• Technical Validation & Decision Making: Evaluated the proposal for physical chat server separation from the perspectives of communication integrity and resource efficiency, ultimately deciding on it as the optimal architecture.
• Standardized Directory Structure: Defined the directory structure for both frontend and backend layers. By enforcing Strict Separation of Concerns (SoC), I established an environment where team members could focus on implementation without ambiguity.
• Development Efficiency: Introduced a monorepo configuration using npm workspaces. This centralized dependency management across packages and built a seamless development cycle for the entire team.

[Data Architecture: Balancing Flexibility and Integrity]

Leveraging MongoDB's document-oriented nature, I defined a strict data structure using Mongoose to manage the complex educational domain (Subjects, Weeks, Homework, and Submissions).

• Relational Design with Indexing: Centered around "Subjects," I managed "Weeks" (curriculum) and "Homework" as independent collections. I proactively utilized compound unique indexes (e.g., Subject × Week Number, Homework × Student) to physically prevent data duplication and inconsistency at the database level.
• Strategic Schema Structure: I differentiated between "Embedding" (e.g., schedules, file lists) and "Referencing" (e.g., weeks, submissions) based on update frequency and data volume. This prevents document bloating while enabling efficient data retrieval via populate.
• Data Quality Control: Implemented role management via enum, required validations, and pre("save") hooks for password hashing and date verification, maintaining a secure and clean data state across the entire application.

[My Role: Lead Data Architect]

• Core Model Design: Responsible for the complete definition of the initial data models with scalability in mind. I led the design to minimize dependencies between models, anticipating future feature expansions.
• Validation Strategy: To prevent data inconsistency across the team, I developed common validation middleware, significantly enhancing the overall robustness of the codebase.

[Defense-in-Depth: Multi-Layered Protection]

To protect user personal information and educational assets, I implemented a multi-layered defense strategy across communication, authentication, and browser protection layers.

• Session & Browser Security: Utilized JWTs stored in HttpOnly Cookies to prevent token theft via XSS. Additionally, I implemented secure HTTP headers using Helmet.js and mitigated CSRF attacks by applying the SameSite=Lax attribute.
• Secure Content Delivery (AWS S3): For sensitive educational materials, I adopted S3 Presigned URLs. This ensures that temporary access is only granted to authorized server-side requests, keeping AWS credentials strictly hidden from the frontend.
• Data Residency & Compliance: In compliance with the Freedom of Information and Protection of Privacy Act (FIPPA) for Canadian public institutions, I selected domestic regions for MongoDB (Montreal) and AWS S3 (Calgary) to meet all legal data protection requirements.

[My Role: Security Architect]

• Security Strategy & Implementation: Led the end-to-end design from authentication flows to infrastructure selection. Notably, I optimized security and performance by conducting a comparative analysis between direct S3 access and backend-mediated delivery.
• Vulnerability Mitigation: Defined a robust defense guideline compliant with the OWASP Top 10, including NoSQL injection prevention via Mongoose, strict Cross-Origin Resource Sharing (CORS) policies, and cookie-based CSRF protections to build a resilient communication environment.

To balance maximizing development speed with optimizing learning costs, I adopted the MERN stack, utilizing JavaScript consistently across the entire ecosystem.

[Frontend: Focus on Core React]

• React (Vite): Since the team was new to React, I opted for Vanilla React over higher-level frameworks like Next.js to avoid excessive abstraction. My priority was ensuring the team mastered core concepts (Hooks, Context API) while maintaining a rapid development cycle via Vite.
• TailwindCSS / Material-UI: Selected to achieve both rapid prototyping and UI consistency, with a strong emphasis on accessibility for children.
• Recharts: Integrated to provide users with intuitive, visual feedback on learning progress.

[Backend & Infrastructure: Scalability & AI]

• Node.js / Express: Chosen to minimize context switching through language unification and for its native affinity with Socket.io for real-time communication.
• Gemini AI: Integrated as the core engine for generating personalized quizzes linked directly to the curriculum.
• MongoDB: Adopted for its flexibility in handling complex educational logs and its capacity for future scaling.
• AWS S3: Utilized for asset management. I prioritized a "Vendor-Neutral" data protection strategy to avoid vendor lock-in (like Firebase or Azure) and ensure future portability.

[My Role: Technical Strategy & Mentorship]

• Technology Selection: Analyzed the team's skill set (proficiency in JS) to define a stack that minimized development bottlenecks.
• Architectural Decision: Faced with a team of React beginners, I prioritized learning efficiency and the avoidance of "black-box" abstractions. I made the strategic decision to use Pure React instead of Next.js, building SDK and API integrations from scratch to guarantee full transparency and control over the system.
• Vendor-Neutral Strategy: Advocated for a loosely coupled architecture that does not over-rely on a single ecosystem. I selected AWS S3 for its versatility, anticipating future multi-cloud operations.

[Challenge: Balancing Boilerplate Efficiency and Maintainability]

As the Technical Lead, to maximize the initial launch speed of the project, I meticulously designed and pre-implemented "common templates" encompassing everything from core Data Models to APIs and Custom Hooks.

• The Initiative: To ensure team members could focus exclusively on business logic, I pre-built standard CRUD controllers and shared data-fetching Hooks. This established an environment that eliminated "development ambiguity" during the early stages.
• The Conflict: As requirements became more specific during the project's progression, some of the generic pre-built logic began to diverge from actual needs, resulting in "dead code" (unused code). This led to blurred dependencies and created a psychological hurdle during refactoring—the fear that "someone might still need this"—which ultimately hindered code legibility and maintainability.

[Lessons Learned: Adaptive Architecture Control]

• Collaborative Scoping: I realized the critical importance of team consensus regarding where "pre-implementation" ends and "individual developer flexibility" begins.
• Just-in-Time Implementation: I learned that instead of front-loading every possible utility, adopting a "Just-in-Time (JIT)" approach—extending the core infrastructure only as new features require it—is essential to balancing code purity with team ownership.

[My Role: Technical Decision & Refactoring Lead]

• In the final stages of development, I led the cleanup of redundant functions and the reorganization of documentation. Through this experience, I have adopted "Strategic Minimalism"—designing with the minimum necessary complexity while preserving future extensibility—as my core engineering philosophy.