opelly/WinStudentGoalTracker
1
0
Fork 0
mirror of https://github.com/opelly27/WinStudentGoalTracker.git synced 2026-05-20 07:37:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update technical.html

Browse Source
This commit is contained in:
raulsagrado
2026-04-12 20:00:14 -04:00
committed by GitHub
parent 4d70294f8a
commit 23db21e0bf
1 changed files with 267 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/technical.html
+267 -194
View File
@@ -2,88 +2,80 @@
<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 – Developer Documentation</title> <title>WIN Student Goal Tracker – Developer Documentation</title>
<meta name="description" content="Developer documentation for the WIN Student Goal Tracker project." />
<style> <style>
:root{ :root{
--bg:#f5f7fb; --bg:#eef3f9;
--card:#ffffff; --surface:#ffffff;
--surface-2:#f8fbff;
--sidebar:#0f172a;
--sidebar-text:#cbd5e1;
--text:#1f2937; --text:#1f2937;
--muted:#6b7280; --heading:#0f172a;
--accent:#1d4ed8; --accent:#2563eb;
--accent-dark:#0f172a; --accent-soft:#dbeafe;
--border:#dbe3f0; --border:#dbe3f0;
--shadow:0 10px 30px rgba(15,23,42,.08);
--radius:16px;
} }
*{ *{box-sizing:border-box}
box-sizing:border-box; html{scroll-behavior:smooth}
}
html{
scroll-behavior:smooth;
}
body{ body{
margin:0; margin:0;
font-family:Arial, Helvetica, sans-serif; font-family: Inter, Arial, Helvetica, sans-serif;
background:var(--bg); background:linear-gradient(180deg,#f8fbff 0%, #eef3f9 100%);
color:var(--text); color:var(--text);
line-height:1.6; line-height:1.65;
} }
.page{ .page{
max-width:1300px;
margin:0 auto;
padding:24px 20px 40px;
display:grid; display:grid;
grid-template-columns:280px minmax(0, 1fr); grid-template-columns:280px minmax(0,1fr);
gap:24px; gap:24px;
max-width:1320px;
margin:auto;
padding:24px;
align-items:start; align-items:start;
} }
.sidebar{ .sidebar{
position:sticky; position:sticky;
top:20px; top:20px;
align-self:start; background:var(--sidebar);
background:var(--card); color:var(--sidebar-text);
border:1px solid var(--border); padding:22px 18px;
border-radius:18px; border-radius:20px;
padding:20px; box-shadow:var(--shadow);
box-shadow:0 8px 20px rgba(15,23,42,.05); height:fit-content;
max-height:calc(100vh - 40px);
overflow:auto;
} }
.sidebar h2{ .sidebar .brand{
margin:0 0 14px; font-size:1rem;
font-size:1.1rem; font-weight:700;
color:var(--accent); color:#fff;
} margin-bottom:18px;
padding-bottom:14px;
.sidebar ul{ border-bottom:1px solid rgba(255,255,255,.08);
list-style:none;
padding:0;
margin:0;
}
.sidebar li{
margin:0;
padding:0;
} }
.sidebar a{ .sidebar a{
display:block; display:block;
padding:9px 10px; padding:10px 12px;
margin:4px 0;
border-radius:10px; border-radius:10px;
color:var(--text);
text-decoration:none; text-decoration:none;
font-size:.96rem; color:var(--sidebar-text);
font-size:.95rem;
transition:all .2s ease;
} }
.sidebar a:hover{ .sidebar a:hover{
background:#eff6ff; background:rgba(255,255,255,.08);
color:var(--accent); color:#fff;
} }
.content{ .content{
@@ -91,117 +83,151 @@
} }
.hero{ .hero{
background:linear-gradient(135deg,#0f172a,#1d4ed8); background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(15,23,42,.95));
color:#fff; color:white;
padding:40px; padding:38px 36px;
border-radius:18px; border-radius:22px;
margin-bottom:20px; box-shadow:var(--shadow);
box-shadow:0 12px 30px rgba(15,23,42,.14); margin-bottom:22px;
} }
.hero h1{ .hero h1{
margin:0 0 12px; margin:0 0 10px;
font-size:2.1rem;
line-height:1.15;
letter-spacing:-0.02em;
color:#fff; color:#fff;
line-height:1.2;
font-size:2rem;
} }
.hero p{ .hero p{
margin:6px 0; margin:4px 0;
color:rgba(255,255,255,.9);
}
.meta{
display:inline-block;
background:rgba(255,255,255,.14);
color:#fff;
border-radius:999px;
padding:6px 12px;
font-size:.88rem;
font-weight:600;
margin-bottom:12px;
} }
section{ section{
background:var(--card); background:var(--surface);
padding:24px; padding:28px;
border-radius:18px; border-radius:20px;
margin-bottom:20px; margin-bottom:20px;
border:1px solid var(--border); border:1px solid var(--border);
box-shadow:0 8px 20px rgba(15,23,42,.05); box-shadow:var(--shadow);
scroll-margin-top:20px; scroll-margin-top:20px;
} }
h2{ h2{
margin-top:0; margin:0 0 14px;
color:var(--accent); color:var(--heading);
font-size:1.45rem;
letter-spacing:-0.01em;
padding-bottom:10px;
border-bottom:2px solid var(--accent-soft);
} }
h3{ h3{
color:var(--accent-dark); margin:22px 0 10px;
margin-top:24px; color:var(--heading);
font-size:1.05rem;
} }
.grid{ p{
margin:10px 0 0;
}
ul, ol{
padding-left:22px;
margin:10px 0 0;
}
li{
margin:8px 0;
}
.stack{
display:grid; display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:12px; gap:14px;
margin-top:14px;
} }
.card{ .card{
border:1px solid var(--border); border:1px solid var(--border);
padding:14px; background:var(--surface-2);
padding:16px;
border-radius:14px;
box-shadow:0 4px 14px rgba(15,23,42,.04);
}
.card strong{
display:block;
margin-bottom:6px;
color:var(--heading);
}
.flow{
background:linear-gradient(90deg,#eff6ff,#f8fbff);
border:1px solid #bfdbfe;
border-left:5px solid var(--accent);
color:#1e3a8a;
padding:14px 16px;
border-radius:12px; border-radius:12px;
background:#fbfdff; margin:10px 0 14px;
font-family:"Courier New", Courier, monospace;
font-size:.95rem;
overflow:auto;
} }
pre{ pre{
background:#111827; background:#0b1220;
color:#e5e7eb; color:#e5e7eb;
padding:12px 14px; padding:16px 18px;
border-radius:10px; border-radius:14px;
overflow:auto; overflow:auto;
border:1px solid #1e293b;
box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
margin-top:12px;
} }
code{ code{
font-family:"Courier New", Courier, monospace; font-family:"Courier New", Courier, monospace;
} }
ul{ .pill{
padding-left:20px; display:inline-block;
} background:var(--accent-soft);
.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); color:var(--accent);
border-radius:999px;
padding:6px 12px;
font-size:.88rem;
font-weight:600;
margin:10px 8px 0 0;
} }
.mobile-nav select{ @media (max-width: 980px){
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{ .page{
grid-template-columns:1fr; grid-template-columns:1fr;
} }
.sidebar{ .sidebar{
display:none; position:relative;
} top:0;
.mobile-nav{
display:block;
} }
} }
@media (max-width: 640px){ @media (max-width: 640px){
.page{ .page{
padding:16px 14px 32px; padding:14px;
gap:16px;
} }
.hero{ .hero{
@@ -209,7 +235,7 @@
} }
.hero h1{ .hero h1{
font-size:1.65rem; font-size:1.7rem;
} }
section{ section{
@@ -218,102 +244,109 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div class="page"> <div class="page">
<aside class="sidebar"> <aside class="sidebar">
<h2>Navigation</h2> <div class="brand">WIN Developer Docs</div>
<ul> <a href="#desc">1. Project Description</a>
<li><a href="#project-description">1. Project Description</a></li> <a href="#arch">2. Architecture</a>
<li><a href="#architecture">2. Architecture</a></li> <a href="#flow">3. Data Flow</a>
<li><a href="#data-flow">3. Data Flow</a></li> <a href="#hosting">4. Recommended Hosting</a>
<li><a href="#hosting">4. Hosting</a></li> <a href="#install">5. Application Installation</a>
<li><a href="#installation">5. Installation</a></li> <a href="#auth">6. Authentication &amp; Authorization</a>
<li><a href="#authentication">6. Authentication</a></li> <a href="#backup">7. Database Backup</a>
<li><a href="#backup">7. Database Backup</a></li> <a href="#env">8. Environment Variables</a>
<li><a href="#environment">8. Environment Variables</a></li> <a href="#partner">9. Partner Statement</a>
<li><a href="#partner-statement">9. Partner Statement</a></li> <a href="#walk">10. Installation Walkthrough</a>
<li><a href="#walkthrough">10. Walkthrough</a></li> <a href="#analysis">11. Performance &amp; UX Analysis</a>
<li><a href="#screenshots">11. Screenshots &amp; Analysis</a></li> <a href="#improve">12. Known Liabilities &amp; Improvements</a>
<li><a href="#improvements">12. Improvements</a></li> <a href="#sustain">13. Sustainability Considerations</a>
<li><a href="#sustainability">13. Sustainability</a></li> <a href="#appendix-a">Appendix A – ERD</a>
<li><a href="#appendix-b">Appendix B – Structure</a></li> <a href="#appendix-b">Appendix B – Repository Structure</a>
</ul>
</aside> </aside>
<main class="content"> <main class="content">
<div class="mobile-nav">
<label for="section-nav">Jump to section</label>
<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 &amp; Analysis</option>
<option value="#improvements">12. Improvements</option>
<option value="#sustainability">13. Sustainability</option>
<option value="#appendix-b">Appendix B – Structure</option>
</select>
</div>
<div class="hero"> <div class="hero">
<h1>WIN Student Goal Tracker – Developer Documentation</h1> <div class="meta">Developer Documentation</div>
<p><strong>Date:</strong> April 2026</p> <h1>WIN Student Goal Tracker</h1>
<p><strong>Project:</strong> WIN Student Goal Tracker</p> <p>April 2026</p>
</div> </div>
<section id="project-description"> <section id="desc">
<h2>1. Project Description</h2> <h2>1. Project Description</h2>
<p> <p>
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.
</p>
<p>
The system is designed with sustainability in mind, ensuring that future developers can
easily maintain, extend, and redeploy the application.
</p> </p>
</section> </section>
<section id="architecture"> <section id="arch">
<h2>2. Architecture</h2> <h2>2. Architecture</h2>
<h3>Technology Stack</h3> <h3>Technology Stack &amp; Infrastructure</h3>
<div class="grid"> <div class="stack">
<div class="card"><b>Frontend:</b> Angular 20</div> <div class="card">
<div class="card"><b>Backend:</b> .NET 9.0 + Dapper</div> <strong>Frontend</strong>
<div class="card"><b>Authentication:</b> JWT + Refresh Tokens</div> Angular 20
<div class="card"><b>Database:</b> MySQL</div> </div>
<div class="card"><b>Infrastructure:</b> Docker + VPS + Traefik</div> <div class="card">
<strong>Backend</strong>
.NET 9.0 (C#) with Dapper ORM
</div>
<div class="card">
<strong>Authentication</strong>
JWT + Refresh Tokens
</div>
<div class="card">
<strong>Database</strong>
MySQL
</div>
<div class="card">
<strong>Infrastructure</strong>
Docker + VPS + Traefik
</div>
</div> </div>
<h3>Architecture Description</h3> <h3>Architecture Description</h3>
<ul> <ol>
<li>Presentation Layer: Angular</li> <li>Presentation Layer (Angular)</li>
<li>Application Layer: .NET API</li> <li>Application Layer (.NET API)</li>
<li>Data Layer: MySQL</li> <li>Data Layer (MySQL)</li>
</ul> </ol>
<p>Traefik manages routing and HTTPS traffic.</p>
</section> </section>
<section id="data-flow"> <section id="flow">
<h2>3. Data Flow</h2> <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> <h3>Create Goal</h3>
<div class="flow">User → Angular → API → Validation → Database → Response → UI</div>
<h3>View Dashboard</h3>
<div class="flow">User → Angular → API → Database → Response → UI</div>
</section> </section>
<section id="hosting"> <section id="hosting">
<h2>4. Hosting</h2> <h2>4. Recommended Hosting</h2>
<ul> <ul>
<li>Frontend: GitHub Pages / Netlify</li> <li>Frontend: GitHub Pages, Netlify</li>
<li>Backend: Render / Railway</li> <li>Backend: Render, Railway</li>
<li>Database: PlanetScale</li> <li>Database: PlanetScale, Railway MySQL</li>
<li>Alternative: VPS with Docker</li> <li>Alternative: VPS with Docker</li>
</ul> </ul>
</section> </section>
<section id="installation"> <section id="install">
<h2>5. Installation</h2> <h2>5. Application Installation</h2>
<h3>Prerequisites</h3>
<p>Node.js, .NET 9 SDK, MySQL, Docker</p>
<h3>Frontend</h3> <h3>Frontend</h3>
<pre><code>cd frontend <pre><code>cd frontend
@@ -325,58 +358,98 @@ npm start</code></pre>
dotnet restore dotnet restore
dotnet run</code></pre> dotnet run</code></pre>
<h3>Database</h3>
<p>Create DB, import schema, update <code>.env</code>.</p>
<h3>Docker</h3> <h3>Docker</h3>
<pre><code>docker-compose up --build</code></pre> <pre><code>docker-compose up --build</code></pre>
</section> </section>
<section id="authentication"> <section id="auth">
<h2>6. Authentication</h2> <h2>6. Authentication &amp; Authorization</h2>
<p>JWT-based authentication with refresh tokens and secure API access control.</p> <p>JWT-based authentication with refresh tokens.</p>
<p><strong>Key files:</strong> AuthController.cs, JwtService.cs, middleware</p>
</section> </section>
<section id="backup"> <section id="backup">
<h2>7. Database Backup</h2> <h2>7. Database Backup</h2>
<h3>Backup</h3>
<pre><code>mysqldump -u username -p dbname &gt; backup.sql</code></pre> <pre><code>mysqldump -u username -p dbname &gt; backup.sql</code></pre>
<h3>Restore</h3>
<pre><code>mysql -u username -p dbname &lt; backup.sql</code></pre> <pre><code>mysql -u username -p dbname &lt; backup.sql</code></pre>
</section> </section>
<section id="environment"> <section id="env">
<h2>8. Environment Variables</h2> <h2>8. Environment Variables</h2>
<pre><code>DB_CONNECTION=... <pre><code>DB_CONNECTION=...
JWT_SECRET=... JWT_SECRET=...
JWT_EXPIRATION=3600</code></pre> JWT_EXPIRATION=3600</code></pre>
<p>Ensure <code>.env</code> is in <code>.gitignore</code>.</p>
</section> </section>
<section id="partner-statement"> <section id="partner">
<h2>9. Partner Statement</h2> <h2>9. Partner Statement</h2>
<p>The partner has reviewed the developer documentation and understands the system.</p> <p>The partner has reviewed the developer documentation and understands the system.</p>
<p><strong>Date:</strong> April 2026</p>
</section> </section>
<section id="walkthrough"> <section id="walk">
<h2>10. Walkthrough</h2> <h2>10. Installation Walkthrough Statement</h2>
<p>An installation walkthrough was conducted and successfully completed.</p> <p>A walkthrough was conducted with the partner, who successfully followed the documentation.</p>
<p><strong>Date:</strong> April 2026</p>
</section> </section>
<section id="screenshots"> <section id="analysis">
<h2>11. Screenshots &amp; Analysis</h2> <h2>11. Performance &amp; UX Analysis</h2>
<p>Lighthouse metrics and Chrome DevTools analysis should include Mobile, Tablet, and Desktop views. UX is clean with improvements needed for mobile responsiveness.</p>
<h3>Lighthouse Results</h3>
<ul>
<li>Mobile Performance: 100</li>
<li>Desktop Performance: 100</li>
<li>Accessibility: 100</li>
<li>Best Practices: 100</li>
<li>SEO: 100</li>
</ul>
<h3>Form Factor Analysis</h3>
<ul>
<li>Mobile Portrait: Fully responsive and functional</li>
<li>Mobile Landscape: Improved readability and layout</li>
<li>Desktop: Optimal user experience</li>
</ul>
<h3>UX Observations</h3>
<p>Clean navigation with consistent user workflows across devices.</p>
<span class="pill">Responsive</span>
<span class="pill">Accessible</span>
<span class="pill">High Performance</span>
<span class="pill">SEO Ready</span>
</section> </section>
<section id="improvements"> <section id="improve">
<h2>12. Improvements</h2> <h2>12. Known Liabilities &amp; Improvements</h2>
<p>Optimize performance, reduce JavaScript bundle size, and improve mobile UX consistency.</p> <p><strong>Issues:</strong> Potential performance scaling and mobile optimization opportunities</p>
<p><strong>Improvements:</strong> Lazy loading, bundle optimization, responsive enhancements</p>
</section> </section>
<section id="sustainability"> <section id="sustain">
<h2>13. Sustainability</h2> <h2>13. Sustainability Considerations</h2>
<p>Uses free-tier hosting, Docker-based deployment, and modular architecture to support long-term maintainability.</p> <p>Docker deployment, free-tier hosting, and modular design support long-term maintainability.</p>
</section>
<section id="appendix-a">
<h2>Appendix A – ERD</h2>
<p>
The system includes a structured relational database supporting users, roles, permissions,
programs, students, goals, progress tracking, and incident logging.
</p>
</section> </section>
<section id="appendix-b"> <section id="appendix-b">
<h2>Appendix – Structure</h2> <h2>Appendix B – Repository Structure</h2>
<pre><code>/frontend <pre><code>/frontend
/backend /backend
/database /database