# LearnTrack

Note

LearnTrack is a comprehensive learning management system designed for educational institutions with role-based access for students, faculty, and administrators. As this project was built using SQLite with basic encryption for a short-duration college project, it has some security vulnerabilities. I plan to improve the security features in future updates.

# Live Demo

Frontend: https://learntrack.pages.dev - deployed on Cloudflare Pages
Backend: deployed using Docker on Render

# Screenshots

# Problem Statement

Project Brief

Learn Track streamlines course access, submission tracking, and academic progress for students and faculty. It supports resource uploading, grading, feedback, and certificate downloads. Personalized dashboards give real-time academic analytics. The system supports semester-based enrollment, auto-notifications, and bulk result uploads.

# User Responsibilities

Student	Faculty	Admin
Enroll in courses and view syllabus	Upload lecture content	Approve new course creation
Submit assignments and check grades	Grade submissions and provide remarks	Manage user permissions
Access study material and feedback	Track student performance	Generate result analysis and performance reports

# Allowed Tools

Frontend: React, framer-motion, Tailwind CSS, etc.
Backend: Python (FastAPI) with SQLite3

# Overview

LearnTrack is a comprehensive learning management system that streamlines course access, submission tracking, and academic progress for students and faculty. It provides a robust platform with personalized dashboards offering real-time analytics and supports semester-based enrollment, auto-notifications, and bulk result uploads.

# Features

Role-based Access - Student, faculty, and admin portals
Course Management - CRUD operations and enrollment tracking
Assignment System - Creation, submission, and grading workflow
File Management - Materials and submissions handling
Real-time Notifications - Role-targeted messaging system

Analytics - Performance metrics and progress tracking
Reporting - Customized reports for different stakeholders
Scheduling - Course timeline and assignment due dates

Theming - Dark/light theme support
Responsive Design - Mobile-friendly interface
Accessibility - WCAG-compliant components

# Tech Stack

Frontend	Backend	Authentication
React - UI library for building component-based interfaces	FastAPI - Modern, high-performance Python web framework	Role-based Access Control - Permission management
TypeScript - For type safety and improved developer experience	SQLite - Lightweight relational database	Bcrypt - Password hashing
Framer Motion - For sophisticated animations and transitions	Pydantic - Data validation and settings management
Tailwind CSS - For utility-first styling	Uvicorn - ASGI server implementation
React Router - For client-side routing

# Folder Structure

LearnTrack/
├── backend/            # FastAPI server
│   ├── app.py          # Main application entry
│   ├── models/         # Database models
│   ├── routers/        # API route handlers
│   ├── services/       # Business logic layer
│   ├── utils/          # Helper functions
│   └── uploads/        # File storage
├── public/             # Static assets
├── src/                # React application
│   ├── components/     # UI & dashboards
│   ├── contexts/       # Auth, Theme, Notifications
│   ├── layouts/        # Auth & Main layouts
│   ├── pages/          # Route-based pages
│   └── App.tsx         # Routes configuration
├── database.db         # SQLite database
├── package.json        # Frontend dependencies
└── README.md           # Project documentation

# Getting Started

# Prerequisites

Node.js >= 18
pnpm or npm
Python 3.9+
pip

# Installation

# Frontend setup
cd LearnTrack
pnpm install

# Backend setup
cd backend
pip install -r requirements.txt

# Prebuilt Docker Image (Optional)

Tip

For quick setup, you can use our pre-built Docker image

curl -L https://github.com/0xarchit/LearnTrack/releases/download/2.1.0/learntrack_v2_1.tar -o learntrack_v2_1.tar
docker load -i learntrack_v2_1.tar
docker run --rm -d --name learntrack_v2_1 -p 5000:5000 -p 5173:5173 learntrack_v2_1

# Running the Application

# Start backend (FastAPI)
cd backend
uvicorn app:app --host 0.0.0.0 --port 5000 --reload

# Start frontend (Vite)
cd LearnTrack
pnpm dev

Open http://localhost:5173 in your browser.

# Demo Logins

For testing purposes, you can use the following demo accounts:

Role	Email	Password
Student	student@0xarchit.is-a.dev	12345678
Faculty	faculty@0xarchit.is-a.dev	12345678
Admin	admin@0xarchit.is-a.dev	12345678

# Frontend

# Frameworks & Libraries

React & TypeScript - Core UI framework with type safety
React Router v6 - For client-side routing and navigation
Framer Motion - For sophisticated animations and transitions
Tailwind CSS - For utility-first styling approach
Context API - For state management (Auth, Theme, Notifications)

# Routing & Layouts

flowchart TD
    A[App] -->|Public Routes| B[AuthLayout]
    A -->|Protected Routes| C[MainLayout]
    B --> D[Login]
    B --> E[Register]
    B --> F[ForgotPassword]
    C -->|Role Check| G[ProtectedRoute]
    G -->|Student| H[StudentDashboard]
    G -->|Faculty| I[FacultyDashboard]
    G -->|Admin| J[AdminDashboard]
    H --> K[StudentComponents]
    I --> L[FacultyComponents]
    J --> M[AdminComponents]

# Contexts

User State - Current user object with profile data
Role Management - Student, faculty, or admin role handling

Dark/Light Mode - Theme preference management
Color Schemes - Primary and accent color customization
Local Storage - Persistent theme preferences

Toast Notifications - For system messages
Real-time Updates - WebSocket connection (future)
Notification Center - Centralized notification management

# Pages & Components

Core Pages	Admin Pages	Faculty Pages
LandingPage - Marketing page	UserManagement - Create, edit, deactivate users	CourseCreation - Create & manage course content
Login/Register/ForgotPassword - Authentication	CourseApproval - Review & approve courses	AssignmentCreation - Create & grade assignments
Dashboard - Role-specific metrics	ReportGeneration - Analytics & performance reports	StudentProgress - Track student performance
Courses - Course listing & enrollment		MaterialUpload - Upload & organize resources
Assignments - Viewing & submission
Materials - Study resources & downloads
Grades - Performance tracking & feedback
Profile - User information & preferences

# Backend

# Framework & Setup

FastAPI - High-performance Python web framework
CORS Middleware - For secure cross-origin requests
StaticFiles - For serving uploaded files
SQLite Helper - For database connection and migrations

# API Endpoints

Method	Endpoint	Description
POST	`/api/register`	Create new user account
POST	`/api/login`	Authenticate and get token
GET	`/api/courses`	List all available courses
GET	`/api/courses/{id}`	Get course details
POST	`/api/courses`	Create new course
PUT	`/api/courses/{id}`	Update course details
DELETE	`/api/courses/{id}`	Remove course
GET	`/api/enrollments`	List user enrollments
POST	`/api/enroll`	Enroll in a course
DELETE	`/api/enroll`	Unenroll from course
GET	`/api/assignments`	List course assignments
POST	`/api/assignments`	Create new assignment
POST	`/api/assignments/{id}/submissions`	Submit assignment work
PUT	`/api/submissions/{id}/grade`	Grade submission
GET	`/api/materials`	Access course materials
GET	`/api/grades`	View student grades
GET	`/api/reports/performance`	Generate performance reports

Tip

Access interactive API documentation at http://localhost:5000/docs after starting the backend

# Database

# Schema

Table	Key Columns
users	id, name, email, password, role, department, joinDate

Table	Key Columns
courses	id, title, instructor_id, description, status
enrollments	user_id, course_id
materials	id, title, course_id, type, url

Table	Key Columns
assignments	id, title, course_id, description, due_date
submissions	id, user_id, assignment_id, file_url, grade
grades	id, user_id, course_id, grade

Table	Key Columns
notifications	id, message, type, target_role, created_at

# ER Diagram

erDiagram
    USERS {
        int id PK
        string name
        string email
        string password
        string role
        string phone
        string address
        string department
        string joinDate
    }
    
    COURSES {
        int id PK
        string title
        int instructor_id FK
        string instructor
        string description
        string status
        string duration
        string thumbnail_url
    }
    
    ASSIGNMENTS {
        int id PK
        string title
        int course_id FK
        string description
        string due_date
        int max_score
    }
    
    MATERIALS {
        int id PK
        string title
        int course_id FK
        string type
        string url
    }
    
    GRADES {
        int id PK
        int user_id FK
        int course_id FK
        int grade
    }
    
    ENROLLMENTS {
        int user_id PK,FK
        int course_id PK,FK
    }
    
    NOTIFICATIONS {
        int id PK
        string message
        string type
        string target_role
        string created_at
    }
    
    SUBMISSIONS {
        int id PK
        int user_id FK
        int assignment_id FK
        string file_url
        string submitted_at
        int grade
        string description
    }
    
    USERS ||--o{ COURSES : teaches
    USERS ||--o{ ENROLLMENTS : enrolls
    COURSES ||--o{ ENROLLMENTS : has
    COURSES ||--o{ ASSIGNMENTS : contains
    COURSES ||--o{ MATERIALS : includes
    USERS ||--o{ GRADES : receives
    COURSES ||--o{ GRADES : for
    USERS ||--o{ SUBMISSIONS : submits
    ASSIGNMENTS ||--o{ SUBMISSIONS : has

# Migrations

On startup, init_db() adds missing columns and migrates data.

# Workflows

# Authentication Flow

flowchart TD
  A[User] -->|POST /api/login| B[AuthContext]
  B --> C[Store user & role]
  C --> D[ProtectedRoute grants access]

# Course Management Flow

flowchart LR
  U[Admin] -->|Create Course| API["/api/courses POST"]
  API --> DB["SQLite courses table"]
  U -->|View Courses| API["/api/courses GET"] --> U

# Assignment Submission & Grading Flow

sequenceDiagram
  Student->>Frontend: Submit form
  Frontend->>API: POST /api/assignments/{id}/submissions
  API->>DB: Insert submission
  Faculty->>API: GET /api/assignments/{id}/submissions
  Faculty->>API: PUT /api/submissions/{id}/grade

# Notification Flow

flowchart TD
  A[Admin/Faculty] -->|POST /api/notifications| B[NotificationContext]
  B --> API
  API --> DB
  Student -->|GET /api/notifications| B --> UI

# Diagrams

# System Overview

flowchart LR
  subgraph Frontend
    FE[React App] 
  end
  subgraph Backend
    BE[FastAPI]
    DB[SQLite3]
  end
  FE -->|HTTP| BE -->|SQL| DB

# Frontend Routing

flowchart LR
  Public --> AuthLayout --> Login/Register
  Protected --> MainLayout --> Dashboard/Courses/...

# Backend API Flow

flowchart TD
  Client --> FastAPI
  FastAPI --> DB
  FastAPI --> Storage["/uploads folder"]

# Environment Variables

# Frontend
VITE_API_URL=http://localhost:5000

# Backend (optional)
DATABASE_URL=sqlite:///./database.db

# Advanced Usage

# API Integration Example

// Example of course enrollment using the LearnTrack API
const enrollInCourse = async (courseId: number) => {
  try {
    const response = await fetch(`${import.meta.env.VITE_API_URL}/api/enroll`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${authToken}`
      },
      body: JSON.stringify({ courseId })
    });
    
    if (!response.ok) throw new Error('Failed to enroll');
    return await response.json();
  } catch (error) {
    console.error('Enrollment error:', error);
    throw error;
  }
};

# Custom Workflow Integration

LearnTrack can be extended with custom workflows by implementing additional API endpoints and frontend components. Example use cases include:

Calendar integration for scheduling
Discussion forums for each course
Video conferencing for virtual classrooms
Advanced analytics dashboards

# Troubleshooting

Connection Errors: Verify SQLite database file exists and is not corrupted
Foreign Key Constraints: Ensure related records exist before creating dependent records

Size Limitations: Default upload limit is 5MB
Supported Formats: Check allowed file extensions (.pdf, .doc, .jpg, etc.)

Clear Cache: Browser caching may cause stale UI state
Check Network: Verify backend connectivity

# Contact & Support

For questions, assistance, or contributions, please reach out:

GitHub Email LinkedIn

# License

This project is licensed under the MIT License - see the LICENSE file for details.

react typescript fastapi sqlite docker