mirror of
https://github.com/opelly27/WinStudentGoalTracker.git
synced 2026-05-20 01:47:41 +00:00
raulsagrado
463 lines
12 KiB
HTML
463 lines
12 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>
|
||
<meta name="description" content="Developer documentation for the WIN Student Goal Tracker project." />
|
||
<style>
|
||
:root{
|
||
--bg:#eef3f9;
|
||
--surface:#ffffff;
|
||
--surface-2:#f8fbff;
|
||
--sidebar:#0f172a;
|
||
--sidebar-text:#cbd5e1;
|
||
--text:#1f2937;
|
||
--heading:#0f172a;
|
||
--accent:#2563eb;
|
||
--accent-soft:#dbeafe;
|
||
--border:#dbe3f0;
|
||
--shadow:0 10px 30px rgba(15,23,42,.08);
|
||
--radius:16px;
|
||
}
|
||
|
||
*{box-sizing:border-box}
|
||
html{scroll-behavior:smooth}
|
||
|
||
body{
|
||
margin:0;
|
||
font-family: Inter, Arial, Helvetica, sans-serif;
|
||
background:linear-gradient(180deg,#f8fbff 0%, #eef3f9 100%);
|
||
color:var(--text);
|
||
line-height:1.65;
|
||
}
|
||
|
||
.page{
|
||
display:grid;
|
||
grid-template-columns:280px minmax(0,1fr);
|
||
gap:24px;
|
||
max-width:1320px;
|
||
margin:auto;
|
||
padding:24px;
|
||
align-items:start;
|
||
}
|
||
|
||
.sidebar{
|
||
position:sticky;
|
||
top:20px;
|
||
background:var(--sidebar);
|
||
color:var(--sidebar-text);
|
||
padding:22px 18px;
|
||
border-radius:20px;
|
||
box-shadow:var(--shadow);
|
||
height:fit-content;
|
||
}
|
||
|
||
.sidebar .brand{
|
||
font-size:1rem;
|
||
font-weight:700;
|
||
color:#fff;
|
||
margin-bottom:18px;
|
||
padding-bottom:14px;
|
||
border-bottom:1px solid rgba(255,255,255,.08);
|
||
}
|
||
|
||
.sidebar a{
|
||
display:block;
|
||
padding:10px 12px;
|
||
margin:4px 0;
|
||
border-radius:10px;
|
||
text-decoration:none;
|
||
color:var(--sidebar-text);
|
||
font-size:.95rem;
|
||
transition:all .2s ease;
|
||
}
|
||
|
||
.sidebar a:hover{
|
||
background:rgba(255,255,255,.08);
|
||
color:#fff;
|
||
}
|
||
|
||
.content{
|
||
min-width:0;
|
||
}
|
||
|
||
.hero{
|
||
background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(15,23,42,.95));
|
||
color:white;
|
||
padding:38px 36px;
|
||
border-radius:22px;
|
||
box-shadow:var(--shadow);
|
||
margin-bottom:22px;
|
||
}
|
||
|
||
.hero h1{
|
||
margin:0 0 10px;
|
||
font-size:2.1rem;
|
||
line-height:1.15;
|
||
letter-spacing:-0.02em;
|
||
color:#fff;
|
||
}
|
||
|
||
.hero p{
|
||
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{
|
||
background:var(--surface);
|
||
padding:28px;
|
||
border-radius:20px;
|
||
margin-bottom:20px;
|
||
border:1px solid var(--border);
|
||
box-shadow:var(--shadow);
|
||
scroll-margin-top:20px;
|
||
}
|
||
|
||
h2{
|
||
margin:0 0 14px;
|
||
color:var(--heading);
|
||
font-size:1.45rem;
|
||
letter-spacing:-0.01em;
|
||
padding-bottom:10px;
|
||
border-bottom:2px solid var(--accent-soft);
|
||
}
|
||
|
||
h3{
|
||
margin:22px 0 10px;
|
||
color:var(--heading);
|
||
font-size:1.05rem;
|
||
}
|
||
|
||
p{
|
||
margin:10px 0 0;
|
||
}
|
||
|
||
ul, ol{
|
||
padding-left:22px;
|
||
margin:10px 0 0;
|
||
}
|
||
|
||
li{
|
||
margin:8px 0;
|
||
}
|
||
|
||
.stack{
|
||
display:grid;
|
||
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
|
||
gap:14px;
|
||
margin-top:14px;
|
||
}
|
||
|
||
.card{
|
||
border:1px solid var(--border);
|
||
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;
|
||
margin:10px 0 14px;
|
||
font-family:"Courier New", Courier, monospace;
|
||
font-size:.95rem;
|
||
overflow:auto;
|
||
}
|
||
|
||
pre{
|
||
background:#0b1220;
|
||
color:#e5e7eb;
|
||
padding:16px 18px;
|
||
border-radius:14px;
|
||
overflow:auto;
|
||
border:1px solid #1e293b;
|
||
box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
|
||
margin-top:12px;
|
||
}
|
||
|
||
code{
|
||
font-family:"Courier New", Courier, monospace;
|
||
}
|
||
|
||
.pill{
|
||
display:inline-block;
|
||
background:var(--accent-soft);
|
||
color:var(--accent);
|
||
border-radius:999px;
|
||
padding:6px 12px;
|
||
font-size:.88rem;
|
||
font-weight:600;
|
||
margin:10px 8px 0 0;
|
||
}
|
||
|
||
@media (max-width: 980px){
|
||
.page{
|
||
grid-template-columns:1fr;
|
||
}
|
||
|
||
.sidebar{
|
||
position:relative;
|
||
top:0;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 640px){
|
||
.page{
|
||
padding:14px;
|
||
gap:16px;
|
||
}
|
||
|
||
.hero{
|
||
padding:28px 22px;
|
||
}
|
||
|
||
.hero h1{
|
||
font-size:1.7rem;
|
||
}
|
||
|
||
section{
|
||
padding:20px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<aside class="sidebar">
|
||
<div class="brand">WIN Developer Docs</div>
|
||
<a href="#desc">1. Project Description</a>
|
||
<a href="#arch">2. Architecture</a>
|
||
<a href="#flow">3. Data Flow</a>
|
||
<a href="#hosting">4. Recommended Hosting</a>
|
||
<a href="#install">5. Application Installation</a>
|
||
<a href="#auth">6. Authentication & Authorization</a>
|
||
<a href="#backup">7. Database Backup</a>
|
||
<a href="#env">8. Environment Variables</a>
|
||
<a href="#partner">9. Partner Statement</a>
|
||
<a href="#walk">10. Installation Walkthrough</a>
|
||
<a href="#analysis">11. Performance & UX Analysis</a>
|
||
<a href="#improve">12. Known Liabilities & Improvements</a>
|
||
<a href="#sustain">13. Sustainability Considerations</a>
|
||
<a href="#appendix-a">Appendix A – ERD</a>
|
||
<a href="#appendix-b">Appendix B – Repository Structure</a>
|
||
</aside>
|
||
|
||
<main class="content">
|
||
<div class="hero">
|
||
<div class="meta">Developer Documentation</div>
|
||
<h1>WIN Student Goal Tracker</h1>
|
||
<p>April 2026</p>
|
||
</div>
|
||
|
||
<section id="desc">
|
||
<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>
|
||
<p>
|
||
The system is designed with sustainability in mind, ensuring that future developers can
|
||
easily maintain, extend, and redeploy the application.
|
||
</p>
|
||
</section>
|
||
|
||
<section id="arch">
|
||
<h2>2. Architecture</h2>
|
||
|
||
<h3>Technology Stack & Infrastructure</h3>
|
||
<div class="stack">
|
||
<div class="card">
|
||
<strong>Frontend</strong>
|
||
Angular 20
|
||
</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>
|
||
|
||
<h3>Architecture Description</h3>
|
||
<ol>
|
||
<li>Presentation Layer (Angular)</li>
|
||
<li>Application Layer (.NET API)</li>
|
||
<li>Data Layer (MySQL)</li>
|
||
</ol>
|
||
<p>Traefik manages routing and HTTPS traffic.</p>
|
||
</section>
|
||
|
||
<section id="flow">
|
||
<h2>3. Data Flow</h2>
|
||
|
||
<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 id="hosting">
|
||
<h2>4. Recommended Hosting</h2>
|
||
<ul>
|
||
<li>Frontend: GitHub Pages, Netlify</li>
|
||
<li>Backend: Render, Railway</li>
|
||
<li>Database: PlanetScale, Railway MySQL</li>
|
||
<li>Alternative: VPS with Docker</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<section id="install">
|
||
<h2>5. Application Installation</h2>
|
||
|
||
<h3>Prerequisites</h3>
|
||
<p>Node.js, .NET 9 SDK, MySQL, Docker</p>
|
||
|
||
<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>Database</h3>
|
||
<p>Create DB, import schema, update <code>.env</code>.</p>
|
||
|
||
<h3>Docker</h3>
|
||
<pre><code>docker-compose up --build</code></pre>
|
||
</section>
|
||
|
||
<section id="auth">
|
||
<h2>6. Authentication & Authorization</h2>
|
||
<p>JWT-based authentication with refresh tokens.</p>
|
||
<p><strong>Key files:</strong> AuthController.cs, JwtService.cs, middleware</p>
|
||
</section>
|
||
|
||
<section id="backup">
|
||
<h2>7. Database Backup</h2>
|
||
|
||
<h3>Backup</h3>
|
||
<pre><code>mysqldump -u username -p dbname > backup.sql</code></pre>
|
||
|
||
<h3>Restore</h3>
|
||
<pre><code>mysql -u username -p dbname < backup.sql</code></pre>
|
||
</section>
|
||
|
||
<section id="env">
|
||
<h2>8. Environment Variables</h2>
|
||
<pre><code>DB_CONNECTION=...
|
||
JWT_SECRET=...
|
||
JWT_EXPIRATION=3600</code></pre>
|
||
<p>Ensure <code>.env</code> is in <code>.gitignore</code>.</p>
|
||
</section>
|
||
|
||
<section id="partner">
|
||
<h2>9. Partner Statement</h2>
|
||
<p>The partner has reviewed the developer documentation and understands the system.</p>
|
||
<p><strong>Date:</strong> April 2026</p>
|
||
</section>
|
||
|
||
<section id="walk">
|
||
<h2>10. Installation Walkthrough Statement</h2>
|
||
<p>A walkthrough was conducted with the partner, who successfully followed the documentation.</p>
|
||
<p><strong>Date:</strong> April 2026</p>
|
||
</section>
|
||
|
||
<section id="analysis">
|
||
<h2>11. Performance & UX Analysis</h2>
|
||
|
||
<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 id="improve">
|
||
<h2>12. Known Liabilities & Improvements</h2>
|
||
<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 id="sustain">
|
||
<h2>13. Sustainability Considerations</h2>
|
||
<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 id="appendix-b">
|
||
<h2>Appendix B – Repository Structure</h2>
|
||
<pre><code>/frontend
|
||
/backend
|
||
/database
|
||
/docker
|
||
/docs</code></pre>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</body>
|
||
</html>
|