diff --git a/docs/technical.html b/docs/technical.html index 8c3b2eb..57e97d1 100644 --- a/docs/technical.html +++ b/docs/technical.html @@ -1,296 +1,389 @@ - - -WIN Student Goal Tracker - Technical Documentation + + + WIN Student Goal Tracker – Developer Documentation - + .content{ + min-width:0; + } + .hero{ + background:linear-gradient(135deg,#0f172a,#1d4ed8); + color:#fff; + padding:40px; + border-radius:18px; + margin-bottom:20px; + box-shadow:0 12px 30px rgba(15,23,42,.14); + } + + .hero h1{ + margin:0 0 12px; + color:#fff; + line-height:1.2; + font-size:2rem; + } + + .hero p{ + margin:6px 0; + } + + section{ + background:var(--card); + padding:24px; + border-radius:18px; + margin-bottom:20px; + border:1px solid var(--border); + box-shadow:0 8px 20px rgba(15,23,42,.05); + scroll-margin-top:20px; + } + + h2{ + margin-top:0; + color:var(--accent); + } + + h3{ + color:var(--accent-dark); + margin-top:24px; + } + + .grid{ + display:grid; + grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); + gap:12px; + } + + .card{ + border:1px solid var(--border); + padding:14px; + border-radius:12px; + background:#fbfdff; + } + + pre{ + background:#111827; + color:#e5e7eb; + padding:12px 14px; + border-radius:10px; + overflow:auto; + } + + code{ + font-family:"Courier New", Courier, monospace; + } + + ul{ + padding-left:20px; + } + + .mobile-nav{ + display:none; + background:var(--card); + border:1px solid var(--border); + border-radius:14px; + padding:14px; + margin-bottom:18px; + } + + .mobile-nav label{ + display:block; + font-weight:bold; + margin-bottom:8px; + color:var(--accent); + } + + .mobile-nav select{ + width:100%; + padding:10px; + border-radius:10px; + border:1px solid var(--border); + background:#fff; + color:var(--text); + font-size:1rem; + } + + @media (max-width: 920px){ + .page{ + grid-template-columns:1fr; + } + + .sidebar{ + display:none; + } + + .mobile-nav{ + display:block; + } + } + + @media (max-width: 640px){ + .page{ + padding:16px 14px 32px; + } + + .hero{ + padding:28px 22px; + } + + .hero h1{ + font-size:1.65rem; + } + + section{ + padding:20px; + } + } + + +
+ -
-

Technical Documentation

-

WIN Student Goal Tracker Architecture and Implementation

-
+
+
+ + +
-
+
+

WIN Student Goal Tracker – Developer Documentation

+

Date: April 2026

+

Project: WIN Student Goal Tracker

+
-
-

System Overview

-

-The WIN Student Goal Tracker is a containerized web application designed to allow -teachers and program staff to track student progress, goals, benchmarks, and -events. The system follows a modern multi-tier architecture separating the -frontend interface, backend services, and database layer. -

-
+
+

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. +

+
-
-

System Architecture

+
+

2. Architecture

-

The system architecture is organized into four main components:

+

Technology Stack

+
+
Frontend: Angular 20
+
Backend: .NET 9.0 + Dapper
+
Authentication: JWT + Refresh Tokens
+
Database: MySQL
+
Infrastructure: Docker + VPS + Traefik
+
-
-Browser
-   │
-   ▼
-Angular Frontend
-   │
-   ▼
-Traefik Reverse Proxy
-   │
-   ▼
-.NET Core API
-   │
-   ▼
-MySQL Database
-
+

Architecture Description

+
    +
  • Presentation Layer: Angular
    • +
  • Application Layer: .NET API
    • +
  • Data Layer: MySQL
    • +
+
-
+
+

3. Data Flow

+

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

+

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

+
-
-

Technology Stack

+
+

4. Hosting

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

5. Installation

-
- - - - +

Frontend

+ 
cd frontend
+npm install
+npm start
- - - - - +

Backend

+ 
cd backend
+dotnet restore
+dotnet run
- - - - - +

Docker

+ 
docker-compose up --build
+ - - - - - +
+

6. Authentication

+

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

+
- - - - - +
+

7. Database Backup

-
- - - - + 
mysqldump -u username -p dbname > backup.sql
- - - - - + 
mysql -u username -p dbname < backup.sql
+ -
LayerTechnologyPurpose
FrontendAngular 20User interface and client-side logic
Backend.NET Core 9.0 (C#)Business logic and REST APIs
ORMDapperLightweight database access
AuthenticationJWT + Refresh TokensSecure user authentication
DatabaseMySQLPersistent data storage
InfrastructureDocker ContainersApplication deployment
Reverse ProxyTraefikRouting and SSL certificate management
+
+

8. Environment Variables

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

Authentication

+
+

9. Partner Statement

+

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

+
-

-The application uses JSON Web Tokens (JWT) for authentication. -After login, the server generates a JWT token which is used to authenticate -subsequent API requests. -

+
+

10. Walkthrough

+

An installation walkthrough was conducted and successfully completed.

+
-
    -
  • Access Tokens authenticate API requests
    • -
  • Refresh Tokens extend user sessions
    • -
  • Program-scoped tokens restrict access to authorized programs
    • -
+
+

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.

+
-
+
+

12. Improvements

+

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

+
-
-

Database Design

- -

The MySQL database stores the application data for students and progress tracking.

- -
    -
  • Users
    • -
  • Programs
    • -
  • Students
    • -
  • Goals
    • -
  • Benchmarks
    • -
  • Progress Events
    • -
- -

-The backend uses Dapper ORM to execute SQL queries and map results -to application objects. -

- -
- -
-

Infrastructure

- -

-The system is deployed using Docker containers on a Virtual Private Server (VPS). -Each component runs in its own container to maintain separation and scalability. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
ContainerFunction
AngularFrontend application
.NET Core APIBackend services
MySQLDatabase server
TraefikReverse proxy and SSL manager
- -
- -
-

Deployment

- -

-The application is deployed using Docker containers orchestrated on a VPS. -Traefik automatically handles HTTPS certificates and routes traffic to the -appropriate container. -

- -
-User Browser
-   │
-   ▼
-Traefik Reverse Proxy
-   │
-   ├── Angular Container
-   │
-   └── .NET Core API Container
-            │
-            ▼
-         MySQL Container
-
- -
- -Back to Project Home - -
- -
-© 2026 WIN Student Goal Tracker -
+
+

13. Sustainability

+

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

+
+
+

Appendix – Structure

+ 
/frontend
+/backend
+/database
+/docker
+/docs
+
+
+
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html b/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html index 407d9a6..96cabbf 100644 --- a/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html +++ b/ui/winstudentgoaltracker/src/app/desktop/components/add-goal-modal/add-goal-modal.html @@ -20,17 +20,6 @@ /> -
- - -
-
+ +
+ + +
+ +
Category
-
- - -
+
+
+ + +
+
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.html b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.html index 65b39fa..a9961a3 100644 --- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.html +++ b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.html @@ -14,7 +14,11 @@
-

{{ goal().description }}

+ @if (goalNumber() > 0) { +

Goal {{ goalNumber() }}: {{ goal().description }}

+ } @else { +

{{ goal().description }}

+ }
diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.ts b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.ts index fb6e3cc..eb8d2d3 100644 --- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.ts +++ b/ui/winstudentgoaltracker/src/app/desktop/components/goal-card/goal-card.ts @@ -19,6 +19,7 @@ export class GoalCard { private readonly route = inject(ActivatedRoute); readonly goal = input.required(); + readonly goalNumber = input(0); // ************************** Properties *************************** diff --git a/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.html b/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.html index d5bade3..0c64896 100644 --- a/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.html +++ b/ui/winstudentgoaltracker/src/app/desktop/components/goal-list/goal-list.html @@ -28,8 +28,8 @@
} @else {
- @for (goal of goals(); track goal.goalId) { - + @for (goal of goals(); track goal.goalId; let i = $index) { + }
}