mirror of
https://github.com/opelly27/WinStudentGoalTracker.git
synced 2026-05-20 05:17:41 +00:00
Create technical.html
This commit is contained in:
raulsagrado
@@ -0,0 +1,296 @@
|
|||||||
|
<!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 - Technical Documentation</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,sans-serif;
|
||||||
|
margin:0;
|
||||||
|
background:#f5f7fa;
|
||||||
|
color:#111827;
|
||||||
|
line-height:1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
header{
|
||||||
|
background:#111827;
|
||||||
|
color:white;
|
||||||
|
padding:3rem 1.5rem;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1{
|
||||||
|
margin:0;
|
||||||
|
font-size:2.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header p{
|
||||||
|
opacity:.9;
|
||||||
|
margin-top:.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main{
|
||||||
|
max-width:1000px;
|
||||||
|
margin:auto;
|
||||||
|
padding:2rem 1rem 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card{
|
||||||
|
background:white;
|
||||||
|
border-radius:14px;
|
||||||
|
padding:1.5rem;
|
||||||
|
margin-bottom:1rem;
|
||||||
|
box-shadow:0 8px 20px rgba(0,0,0,.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
margin-top:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
code{
|
||||||
|
background:#eef2ff;
|
||||||
|
padding:.2rem .4rem;
|
||||||
|
border-radius:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table{
|
||||||
|
width:100%;
|
||||||
|
border-collapse:collapse;
|
||||||
|
margin-top:1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,td{
|
||||||
|
padding:.7rem;
|
||||||
|
border-bottom:1px solid #e5e7eb;
|
||||||
|
text-align:left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn{
|
||||||
|
display:inline-block;
|
||||||
|
margin-top:1rem;
|
||||||
|
padding:.6rem 1rem;
|
||||||
|
background:#2563eb;
|
||||||
|
color:white;
|
||||||
|
text-decoration:none;
|
||||||
|
border-radius:8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer{
|
||||||
|
text-align:center;
|
||||||
|
padding:2rem;
|
||||||
|
color:#6b7280;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1>Technical Documentation</h1>
|
||||||
|
<p>WIN Student Goal Tracker Architecture and Implementation</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>System Overview</h2>
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>System Architecture</h2>
|
||||||
|
|
||||||
|
<p>The system architecture is organized into four main components:</p>
|
||||||
|
|
||||||
|
<pre>
|
||||||
|
Browser
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
Angular Frontend
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
Traefik Reverse Proxy
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
.NET Core API
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
MySQL Database
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>Technology Stack</h2>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Layer</th>
|
||||||
|
<th>Technology</th>
|
||||||
|
<th>Purpose</th>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Frontend</td>
|
||||||
|
<td>Angular 20</td>
|
||||||
|
<td>User interface and client-side logic</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Backend</td>
|
||||||
|
<td>.NET Core 9.0 (C#)</td>
|
||||||
|
<td>Business logic and REST APIs</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>ORM</td>
|
||||||
|
<td>Dapper</td>
|
||||||
|
<td>Lightweight database access</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Authentication</td>
|
||||||
|
<td>JWT + Refresh Tokens</td>
|
||||||
|
<td>Secure user authentication</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Database</td>
|
||||||
|
<td>MySQL</td>
|
||||||
|
<td>Persistent data storage</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Infrastructure</td>
|
||||||
|
<td>Docker Containers</td>
|
||||||
|
<td>Application deployment</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>Reverse Proxy</td>
|
||||||
|
<td>Traefik</td>
|
||||||
|
<td>Routing and SSL certificate management</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>Authentication</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
The application uses <strong>JSON Web Tokens (JWT)</strong> for authentication.
|
||||||
|
After login, the server generates a JWT token which is used to authenticate
|
||||||
|
subsequent API requests.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Access Tokens authenticate API requests</li>
|
||||||
|
<li>Refresh Tokens extend user sessions</li>
|
||||||
|
<li>Program-scoped tokens restrict access to authorized programs</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>Database Design</h2>
|
||||||
|
|
||||||
|
<p>The MySQL database stores the application data for students and progress tracking.</p>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user