mirror of
https://github.com/opelly27/WinStudentGoalTracker.git
synced 2026-05-20 04:07:39 +00:00
raulsagrado
390 lines
10 KiB
HTML
390 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>WIN Student Goal Tracker – Developer Documentation</title>
|
||
|
||
<style>
|
||
:root{
|
||
--bg:#f5f7fb;
|
||
--card:#ffffff;
|
||
--text:#1f2937;
|
||
--muted:#6b7280;
|
||
--accent:#1d4ed8;
|
||
--accent-dark:#0f172a;
|
||
--border:#dbe3f0;
|
||
}
|
||
|
||
*{
|
||
box-sizing:border-box;
|
||
}
|
||
|
||
html{
|
||
scroll-behavior:smooth;
|
||
}
|
||
|
||
body{
|
||
margin:0;
|
||
font-family:Arial, Helvetica, sans-serif;
|
||
background:var(--bg);
|
||
color:var(--text);
|
||
line-height:1.6;
|
||
}
|
||
|
||
.page{
|
||
max-width:1300px;
|
||
margin:0 auto;
|
||
padding:24px 20px 40px;
|
||
display:grid;
|
||
grid-template-columns:280px minmax(0, 1fr);
|
||
gap:24px;
|
||
align-items:start;
|
||
}
|
||
|
||
.sidebar{
|
||
position:sticky;
|
||
top:20px;
|
||
align-self:start;
|
||
background:var(--card);
|
||
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;
|
||
}
|
||
|
||
.sidebar h2{
|
||
margin:0 0 14px;
|
||
font-size:1.1rem;
|
||
color:var(--accent);
|
||
}
|
||
|
||
.sidebar ul{
|
||
list-style:none;
|
||
padding:0;
|
||
margin:0;
|
||
}
|
||
|
||
.sidebar li{
|
||
margin:0;
|
||
padding:0;
|
||
}
|
||
|
||
.sidebar a{
|
||
display:block;
|
||
padding:9px 10px;
|
||
border-radius:10px;
|
||
color:var(--text);
|
||
text-decoration:none;
|
||
font-size:.96rem;
|
||
}
|
||
|
||
.sidebar a:hover{
|
||
background:#eff6ff;
|
||
color:var(--accent);
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<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>
|
||
|
||
<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 & 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">
|
||
<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>
|
||
|
||
<section id="project-description">
|
||
<h2>1. Project Description</h2>
|
||
<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.
|
||
</p>
|
||
</section>
|
||
|
||
<section id="architecture">
|
||
<h2>2. Architecture</h2>
|
||
|
||
<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>
|
||
|
||
<h3>Architecture Description</h3>
|
||
<ul>
|
||
<li>Presentation Layer: Angular</li>
|
||
<li>Application Layer: .NET API</li>
|
||
<li>Data Layer: MySQL</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<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>
|
||
|
||
<section id="hosting">
|
||
<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>
|
||
|
||
<section id="installation">
|
||
<h2>5. Installation</h2>
|
||
|
||
<h3>Frontend</h3>
|
||
<pre><code>cd frontend
|
||
npm install
|
||
npm start</code></pre>
|
||
|
||
<h3>Backend</h3>
|
||
<pre><code>cd backend
|
||
dotnet restore
|
||
dotnet run</code></pre>
|
||
|
||
<h3>Docker</h3>
|
||
<pre><code>docker-compose up --build</code></pre>
|
||
</section>
|
||
|
||
<section id="authentication">
|
||
<h2>6. Authentication</h2>
|
||
<p>JWT-based authentication with refresh tokens and secure API access control.</p>
|
||
</section>
|
||
|
||
<section id="backup">
|
||
<h2>7. Database Backup</h2>
|
||
|
||
<pre><code>mysqldump -u username -p dbname > backup.sql</code></pre>
|
||
|
||
<pre><code>mysql -u username -p dbname < backup.sql</code></pre>
|
||
</section>
|
||
|
||
<section id="environment">
|
||
<h2>8. Environment Variables</h2>
|
||
|
||
<pre><code>DB_CONNECTION=...
|
||
JWT_SECRET=...
|
||
JWT_EXPIRATION=3600</code></pre>
|
||
</section>
|
||
|
||
<section id="partner-statement">
|
||
<h2>9. Partner Statement</h2>
|
||
<p>The partner has reviewed the developer documentation and understands the system.</p>
|
||
</section>
|
||
|
||
<section id="walkthrough">
|
||
<h2>10. Walkthrough</h2>
|
||
<p>An installation walkthrough was conducted and successfully completed.</p>
|
||
</section>
|
||
|
||
<section id="screenshots">
|
||
<h2>11. Screenshots & 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>
|
||
</section>
|
||
|
||
<section id="improvements">
|
||
<h2>12. Improvements</h2>
|
||
<p>Optimize performance, reduce JavaScript bundle size, and improve mobile UX consistency.</p>
|
||
</section>
|
||
|
||
<section id="sustainability">
|
||
<h2>13. Sustainability</h2>
|
||
<p>Uses free-tier hosting, Docker-based deployment, and modular architecture to support long-term maintainability.</p>
|
||
</section>
|
||
|
||
<section id="appendix-b">
|
||
<h2>Appendix – Structure</h2>
|
||
<pre><code>/frontend
|
||
/backend
|
||
/database
|
||
/docker
|
||
/docs</code></pre>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</body>
|
||
</html>
|