From 23db21e0bf31f4d84b35c306d1674d4f2ac37686 Mon Sep 17 00:00:00 2001 From: raulsagrado <119356996+raulsagrado@users.noreply.github.com> Date: Sun, 12 Apr 2026 20:00:14 -0400 Subject: [PATCH] Update technical.html --- docs/technical.html | 461 +++++++++++++++++++++++++------------------- 1 file changed, 267 insertions(+), 194 deletions(-) diff --git a/docs/technical.html b/docs/technical.html index 57e97d1..de89d12 100644 --- a/docs/technical.html +++ b/docs/technical.html @@ -2,88 +2,80 @@ - + WIN Student Goal Tracker – Developer Documentation - + -
-
- - -
-
-

WIN Student Goal Tracker – Developer Documentation

-

Date: April 2026

-

Project: WIN Student Goal Tracker

+
Developer Documentation
+

WIN Student Goal Tracker

+

April 2026

-
+

1. Project Description

- The WIN Student Goal Tracker is a web-based case management system designed to support organizations working with adults with special needs. The platform enables staff to track student goals, document services, and log critical incidents while maintaining strong privacy, auditability, and compliance with FERPA, IDEA, and FAPE. + The WIN Student Goal Tracker is a web-based case management system designed to support + organizations working with adults with special needs. The platform enables staff to track + student goals, document services, and log critical incidents while maintaining strong privacy, + auditability, and compliance with FERPA, IDEA, and FAPE. +

+

+ The system is designed with sustainability in mind, ensuring that future developers can + easily maintain, extend, and redeploy the application.

-
+

2. Architecture

-

Technology Stack

-
-
Frontend: Angular 20
-
Backend: .NET 9.0 + Dapper
-
Authentication: JWT + Refresh Tokens
-
Database: MySQL
-
Infrastructure: Docker + VPS + Traefik
+

Technology Stack & Infrastructure

+
+
+ Frontend + Angular 20 +
+
+ Backend + .NET 9.0 (C#) with Dapper ORM +
+
+ Authentication + JWT + Refresh Tokens +
+
+ Database + MySQL +
+
+ Infrastructure + Docker + VPS + Traefik +

Architecture Description

-
    -
  • Presentation Layer: Angular
    • -
  • Application Layer: .NET API
    • -
  • Data Layer: MySQL
    • -
+
    +
  1. Presentation Layer (Angular)
    2. +
  2. Application Layer (.NET API)
    3. +
  3. Data Layer (MySQL)
    4. +
+

Traefik manages routing and HTTPS traffic.

-
+

3. Data Flow

-

Create Goal:
User → Angular → API → Database → UI

-

View Dashboard:
User → Angular → API → Database → UI

+ +

Create Goal

+
User → Angular → API → Validation → Database → Response → UI
+ +

View Dashboard

+
User → Angular → API → Database → Response → UI
-

4. Hosting

+

4. Recommended Hosting

    -
  • Frontend: GitHub Pages / Netlify
    • -
  • Backend: Render / Railway
    • -
  • Database: PlanetScale
    • +
  • Frontend: GitHub Pages, Netlify
    • +
  • Backend: Render, Railway
    • +
  • Database: PlanetScale, Railway MySQL
  • Alternative: VPS with Docker
-
-

5. Installation

+
+

5. Application Installation

+ +

Prerequisites

+

Node.js, .NET 9 SDK, MySQL, Docker

Frontend

cd frontend
@@ -325,58 +358,98 @@ npm start
dotnet restore dotnet run +

Database

+

Create DB, import schema, update .env.

+

Docker

docker-compose up --build
-
-

6. Authentication

-

JWT-based authentication with refresh tokens and secure API access control.

+
+

6. Authentication & Authorization

+

JWT-based authentication with refresh tokens.

+

Key files: AuthController.cs, JwtService.cs, middleware

7. Database Backup

+

Backup

mysqldump -u username -p dbname > backup.sql
+

Restore

mysql -u username -p dbname < backup.sql
-
+

8. Environment Variables

- 
DB_CONNECTION=...
 JWT_SECRET=...
 JWT_EXPIRATION=3600
+

Ensure .env is in .gitignore.

-
+

9. Partner Statement

The partner has reviewed the developer documentation and understands the system.

+

Date: April 2026

-
-

10. Walkthrough

-

An installation walkthrough was conducted and successfully completed.

+
+

10. Installation Walkthrough Statement

+

A walkthrough was conducted with the partner, who successfully followed the documentation.

+

Date: April 2026

-
-

11. Screenshots & Analysis

-

Lighthouse metrics and Chrome DevTools analysis should include Mobile, Tablet, and Desktop views. UX is clean with improvements needed for mobile responsiveness.

+
+

11. Performance & UX Analysis

+ +

Lighthouse Results

+
    +
  • Mobile Performance: 100
    • +
  • Desktop Performance: 100
    • +
  • Accessibility: 100
    • +
  • Best Practices: 100
    • +
  • SEO: 100
    • +
+ +

Form Factor Analysis

+
    +
  • Mobile Portrait: Fully responsive and functional
    • +
  • Mobile Landscape: Improved readability and layout
    • +
  • Desktop: Optimal user experience
    • +
+ +

UX Observations

+

Clean navigation with consistent user workflows across devices.

+ + Responsive + Accessible + High Performance + SEO Ready
-
-

12. Improvements

-

Optimize performance, reduce JavaScript bundle size, and improve mobile UX consistency.

+
+

12. Known Liabilities & Improvements

+

Issues: Potential performance scaling and mobile optimization opportunities

+

Improvements: Lazy loading, bundle optimization, responsive enhancements

-
-

13. Sustainability

-

Uses free-tier hosting, Docker-based deployment, and modular architecture to support long-term maintainability.

+
+

13. Sustainability Considerations

+

Docker deployment, free-tier hosting, and modular design support long-term maintainability.

+
+ +
+

Appendix A – ERD

+

+ The system includes a structured relational database supporting users, roles, permissions, + programs, students, goals, progress tracking, and incident logging. +

-

Appendix – Structure

+

Appendix B – Repository Structure

/frontend
 /backend
 /database