mirror of
https://github.com/opelly27/WinStudentGoalTracker.git
synced 2026-05-20 07:37:38 +00:00
Update technical.html
This commit is contained in:
raulsagrado
+345
-252
@@ -1,296 +1,389 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>WIN Student Goal Tracker - Technical Documentation</title>
|
<title>WIN Student Goal Tracker – Developer Documentation</title>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
:root{
|
||||||
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,sans-serif;
|
--bg:#f5f7fb;
|
||||||
margin:0;
|
--card:#ffffff;
|
||||||
background:#f5f7fa;
|
--text:#1f2937;
|
||||||
color:#111827;
|
--muted:#6b7280;
|
||||||
line-height:1.6;
|
--accent:#1d4ed8;
|
||||||
}
|
--accent-dark:#0f172a;
|
||||||
|
--border:#dbe3f0;
|
||||||
|
}
|
||||||
|
|
||||||
header{
|
*{
|
||||||
background:#111827;
|
box-sizing:border-box;
|
||||||
color:white;
|
}
|
||||||
padding:3rem 1.5rem;
|
|
||||||
text-align:center;
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1{
|
html{
|
||||||
margin:0;
|
scroll-behavior:smooth;
|
||||||
font-size:2.4rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
header p{
|
body{
|
||||||
opacity:.9;
|
margin:0;
|
||||||
margin-top:.5rem;
|
font-family:Arial, Helvetica, sans-serif;
|
||||||
}
|
background:var(--bg);
|
||||||
|
color:var(--text);
|
||||||
|
line-height:1.6;
|
||||||
|
}
|
||||||
|
|
||||||
main{
|
.page{
|
||||||
max-width:1000px;
|
max-width:1300px;
|
||||||
margin:auto;
|
margin:0 auto;
|
||||||
padding:2rem 1rem 3rem;
|
padding:24px 20px 40px;
|
||||||
}
|
display:grid;
|
||||||
|
grid-template-columns:280px minmax(0, 1fr);
|
||||||
|
gap:24px;
|
||||||
|
align-items:start;
|
||||||
|
}
|
||||||
|
|
||||||
.card{
|
.sidebar{
|
||||||
background:white;
|
position:sticky;
|
||||||
border-radius:14px;
|
top:20px;
|
||||||
padding:1.5rem;
|
align-self:start;
|
||||||
margin-bottom:1rem;
|
background:var(--card);
|
||||||
box-shadow:0 8px 20px rgba(0,0,0,.05);
|
border:1px solid var(--border);
|
||||||
}
|
border-radius:18px;
|
||||||
|
padding:20px;
|
||||||
|
box-shadow:0 8px 20px rgba(15,23,42,.05);
|
||||||
|
max-height:calc(100vh - 40px);
|
||||||
|
overflow:auto;
|
||||||
|
}
|
||||||
|
|
||||||
h2{
|
.sidebar h2{
|
||||||
margin-top:0;
|
margin:0 0 14px;
|
||||||
}
|
font-size:1.1rem;
|
||||||
|
color:var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
code{
|
.sidebar ul{
|
||||||
background:#eef2ff;
|
list-style:none;
|
||||||
padding:.2rem .4rem;
|
padding:0;
|
||||||
border-radius:5px;
|
margin:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
table{
|
.sidebar li{
|
||||||
width:100%;
|
margin:0;
|
||||||
border-collapse:collapse;
|
padding:0;
|
||||||
margin-top:1rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
th,td{
|
.sidebar a{
|
||||||
padding:.7rem;
|
display:block;
|
||||||
border-bottom:1px solid #e5e7eb;
|
padding:9px 10px;
|
||||||
text-align:left;
|
border-radius:10px;
|
||||||
}
|
color:var(--text);
|
||||||
|
text-decoration:none;
|
||||||
|
font-size:.96rem;
|
||||||
|
}
|
||||||
|
|
||||||
.btn{
|
.sidebar a:hover{
|
||||||
display:inline-block;
|
background:#eff6ff;
|
||||||
margin-top:1rem;
|
color:var(--accent);
|
||||||
padding:.6rem 1rem;
|
}
|
||||||
background:#2563eb;
|
|
||||||
color:white;
|
|
||||||
text-decoration:none;
|
|
||||||
border-radius:8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer{
|
.content{
|
||||||
text-align:center;
|
min-width:0;
|
||||||
padding:2rem;
|
}
|
||||||
color:#6b7280;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<aside class="sidebar">
|
||||||
|
<h2>Navigation</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#project-description">1. Project Description</a></li>
|
||||||
|
<li><a href="#architecture">2. Architecture</a></li>
|
||||||
|
<li><a href="#data-flow">3. Data Flow</a></li>
|
||||||
|
<li><a href="#hosting">4. Hosting</a></li>
|
||||||
|
<li><a href="#installation">5. Installation</a></li>
|
||||||
|
<li><a href="#authentication">6. Authentication</a></li>
|
||||||
|
<li><a href="#backup">7. Database Backup</a></li>
|
||||||
|
<li><a href="#environment">8. Environment Variables</a></li>
|
||||||
|
<li><a href="#partner-statement">9. Partner Statement</a></li>
|
||||||
|
<li><a href="#walkthrough">10. Walkthrough</a></li>
|
||||||
|
<li><a href="#screenshots">11. Screenshots & Analysis</a></li>
|
||||||
|
<li><a href="#improvements">12. Improvements</a></li>
|
||||||
|
<li><a href="#sustainability">13. Sustainability</a></li>
|
||||||
|
<li><a href="#appendix-b">Appendix B – Structure</a></li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
|
||||||
<header>
|
<main class="content">
|
||||||
<h1>Technical Documentation</h1>
|
<div class="mobile-nav">
|
||||||
<p>WIN Student Goal Tracker Architecture and Implementation</p>
|
<label for="section-nav">Jump to section</label>
|
||||||
</header>
|
<select id="section-nav" onchange="if(this.value) location.href=this.value;">
|
||||||
|
<option value="">Select a section</option>
|
||||||
|
<option value="#project-description">1. Project Description</option>
|
||||||
|
<option value="#architecture">2. Architecture</option>
|
||||||
|
<option value="#data-flow">3. Data Flow</option>
|
||||||
|
<option value="#hosting">4. Hosting</option>
|
||||||
|
<option value="#installation">5. Installation</option>
|
||||||
|
<option value="#authentication">6. Authentication</option>
|
||||||
|
<option value="#backup">7. Database Backup</option>
|
||||||
|
<option value="#environment">8. Environment Variables</option>
|
||||||
|
<option value="#partner-statement">9. Partner Statement</option>
|
||||||
|
<option value="#walkthrough">10. Walkthrough</option>
|
||||||
|
<option value="#screenshots">11. Screenshots & Analysis</option>
|
||||||
|
<option value="#improvements">12. Improvements</option>
|
||||||
|
<option value="#sustainability">13. Sustainability</option>
|
||||||
|
<option value="#appendix-b">Appendix B – Structure</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<main>
|
<div class="hero">
|
||||||
|
<h1>WIN Student Goal Tracker – Developer Documentation</h1>
|
||||||
|
<p><strong>Date:</strong> April 2026</p>
|
||||||
|
<p><strong>Project:</strong> WIN Student Goal Tracker</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<section id="project-description">
|
||||||
<h2>System Overview</h2>
|
<h2>1. Project Description</h2>
|
||||||
<p>
|
<p>
|
||||||
The WIN Student Goal Tracker is a containerized web application designed to allow
|
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.
|
||||||
teachers and program staff to track student progress, goals, benchmarks, and
|
</p>
|
||||||
events. The system follows a modern multi-tier architecture separating the
|
</section>
|
||||||
frontend interface, backend services, and database layer.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
<section id="architecture">
|
||||||
<h2>System Architecture</h2>
|
<h2>2. Architecture</h2>
|
||||||
|
|
||||||
<p>The system architecture is organized into four main components:</p>
|
<h3>Technology Stack</h3>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="card"><b>Frontend:</b> Angular 20</div>
|
||||||
|
<div class="card"><b>Backend:</b> .NET 9.0 + Dapper</div>
|
||||||
|
<div class="card"><b>Authentication:</b> JWT + Refresh Tokens</div>
|
||||||
|
<div class="card"><b>Database:</b> MySQL</div>
|
||||||
|
<div class="card"><b>Infrastructure:</b> Docker + VPS + Traefik</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<pre>
|
<h3>Architecture Description</h3>
|
||||||
Browser
|
<ul>
|
||||||
│
|
<li>Presentation Layer: Angular</li>
|
||||||
▼
|
<li>Application Layer: .NET API</li>
|
||||||
Angular Frontend
|
<li>Data Layer: MySQL</li>
|
||||||
│
|
</ul>
|
||||||
▼
|
</section>
|
||||||
Traefik Reverse Proxy
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
.NET Core API
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
MySQL Database
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
</div>
|
<section id="data-flow">
|
||||||
|
<h2>3. Data Flow</h2>
|
||||||
|
<p><b>Create Goal:</b><br>User → Angular → API → Database → UI</p>
|
||||||
|
<p><b>View Dashboard:</b><br>User → Angular → API → Database → UI</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="card">
|
<section id="hosting">
|
||||||
<h2>Technology Stack</h2>
|
<h2>4. Hosting</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Frontend: GitHub Pages / Netlify</li>
|
||||||
|
<li>Backend: Render / Railway</li>
|
||||||
|
<li>Database: PlanetScale</li>
|
||||||
|
<li>Alternative: VPS with Docker</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
<table>
|
<section id="installation">
|
||||||
<tr>
|
<h2>5. Installation</h2>
|
||||||
<th>Layer</th>
|
|
||||||
<th>Technology</th>
|
|
||||||
<th>Purpose</th>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
<h3>Frontend</h3>
|
||||||
<td>Frontend</td>
|
<pre><code>cd frontend
|
||||||
<td>Angular 20</td>
|
npm install
|
||||||
<td>User interface and client-side logic</td>
|
npm start</code></pre>
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
<h3>Backend</h3>
|
||||||
<td>Backend</td>
|
<pre><code>cd backend
|
||||||
<td>.NET Core 9.0 (C#)</td>
|
dotnet restore
|
||||||
<td>Business logic and REST APIs</td>
|
dotnet run</code></pre>
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
<h3>Docker</h3>
|
||||||
<td>ORM</td>
|
<pre><code>docker-compose up --build</code></pre>
|
||||||
<td>Dapper</td>
|
</section>
|
||||||
<td>Lightweight database access</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
<section id="authentication">
|
||||||
<td>Authentication</td>
|
<h2>6. Authentication</h2>
|
||||||
<td>JWT + Refresh Tokens</td>
|
<p>JWT-based authentication with refresh tokens and secure API access control.</p>
|
||||||
<td>Secure user authentication</td>
|
</section>
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
<section id="backup">
|
||||||
<td>Database</td>
|
<h2>7. Database Backup</h2>
|
||||||
<td>MySQL</td>
|
|
||||||
<td>Persistent data storage</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
<pre><code>mysqldump -u username -p dbname > backup.sql</code></pre>
|
||||||
<td>Infrastructure</td>
|
|
||||||
<td>Docker Containers</td>
|
|
||||||
<td>Application deployment</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
<pre><code>mysql -u username -p dbname < backup.sql</code></pre>
|
||||||
<td>Reverse Proxy</td>
|
</section>
|
||||||
<td>Traefik</td>
|
|
||||||
<td>Routing and SSL certificate management</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</table>
|
<section id="environment">
|
||||||
|
<h2>8. Environment Variables</h2>
|
||||||
|
|
||||||
</div>
|
<pre><code>DB_CONNECTION=...
|
||||||
|
JWT_SECRET=...
|
||||||
|
JWT_EXPIRATION=3600</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="card">
|
<section id="partner-statement">
|
||||||
<h2>Authentication</h2>
|
<h2>9. Partner Statement</h2>
|
||||||
|
<p>The partner has reviewed the developer documentation and understands the system.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
<p>
|
<section id="walkthrough">
|
||||||
The application uses <strong>JSON Web Tokens (JWT)</strong> for authentication.
|
<h2>10. Walkthrough</h2>
|
||||||
After login, the server generates a JWT token which is used to authenticate
|
<p>An installation walkthrough was conducted and successfully completed.</p>
|
||||||
subsequent API requests.
|
</section>
|
||||||
</p>
|
|
||||||
|
|
||||||
<ul>
|
<section id="screenshots">
|
||||||
<li>Access Tokens authenticate API requests</li>
|
<h2>11. Screenshots & Analysis</h2>
|
||||||
<li>Refresh Tokens extend user sessions</li>
|
<p>Lighthouse metrics and Chrome DevTools analysis should include Mobile, Tablet, and Desktop views. UX is clean with improvements needed for mobile responsiveness.</p>
|
||||||
<li>Program-scoped tokens restrict access to authorized programs</li>
|
</section>
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
<section id="improvements">
|
||||||
|
<h2>12. Improvements</h2>
|
||||||
|
<p>Optimize performance, reduce JavaScript bundle size, and improve mobile UX consistency.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="card">
|
<section id="sustainability">
|
||||||
<h2>Database Design</h2>
|
<h2>13. Sustainability</h2>
|
||||||
|
<p>Uses free-tier hosting, Docker-based deployment, and modular architecture to support long-term maintainability.</p>
|
||||||
<p>The MySQL database stores the application data for students and progress tracking.</p>
|
</section>
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>Users</li>
|
|
||||||
<li>Programs</li>
|
|
||||||
<li>Students</li>
|
|
||||||
<li>Goals</li>
|
|
||||||
<li>Benchmarks</li>
|
|
||||||
<li>Progress Events</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
The backend uses <strong>Dapper ORM</strong> to execute SQL queries and map results
|
|
||||||
to application objects.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h2>Infrastructure</h2>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
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.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<th>Container</th>
|
|
||||||
<th>Function</th>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Angular</td>
|
|
||||||
<td>Frontend application</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>.NET Core API</td>
|
|
||||||
<td>Backend services</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>MySQL</td>
|
|
||||||
<td>Database server</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Traefik</td>
|
|
||||||
<td>Reverse proxy and SSL manager</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<h2>Deployment</h2>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
The application is deployed using Docker containers orchestrated on a VPS.
|
|
||||||
Traefik automatically handles HTTPS certificates and routes traffic to the
|
|
||||||
appropriate container.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
User Browser
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
Traefik Reverse Proxy
|
|
||||||
│
|
|
||||||
├── Angular Container
|
|
||||||
│
|
|
||||||
└── .NET Core API Container
|
|
||||||
│
|
|
||||||
▼
|
|
||||||
MySQL Container
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a class="btn" href="/">Back to Project Home</a>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
© 2026 WIN Student Goal Tracker
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
<section id="appendix-b">
|
||||||
|
<h2>Appendix B – Structure</h2>
|
||||||
|
<pre><code>/frontend
|
||||||
|
/backend
|
||||||
|
/database
|
||||||
|
/docker
|
||||||
|
/docs</code></pre>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user