student-analytics-dashboard

Vue 3 · Vite · Chart.js · JWT · Student Analytics Dashboard

_{Vue 3 фронтенд для аналитики академических данных студентов: оценки, рейтинг, графики и ML-инсайты.}

Русская версия

Фронтенд-панель для визуализации и анализа учебных данных студентов.
Работает с Django REST API, использует JWT-авторизацию, Chart.js и отдельный ML-раздел.


Тип проекта	Web frontend · analytics dashboard
Статус	Завершённый личный проект
Автор	mdkefir
Основной стек	Vue 3, Vite, Bootstrap 5, Chart.js, Vitest
Backend	Django REST API + JWT

О проекте

student-analytics-dashboard — Vue 3 проект для аналитики академических данных студентов.

Проект объединяет разрозненные метрики успеваемости в единую веб-панель с фильтрами, таблицами и диаграммами.

Панель ориентирована на сотрудников, преподавателей и аналитиков, которым нужно:

видеть статистику по оценкам и дисциплинам;
отслеживать рейтинг студентов и зоны риска;
анализировать академический отпуск;
использовать ML-подсистему для прогнозов и кластеризации.

Изначально код публиковался в репозитории напарника: ArtemBarlukov/VueFront. Эта версия — мой личный репозиторий с полным исходным кодом и документацией.

Мой вклад

Фронтенд целиком разрабатывался мной. Основные направления работы:

Архитектура и ядро приложения

спроектировал app.vue как app-shell: навигация, auth-state, provide/inject;
реализовал единый HTTP-слой fetchData с Bearer-токенами и auto-refresh при 401;
настроил асинхронную подгрузку views и табовую навигацию (desktop + mobile);
организовал загрузку справочников фильтров (группы, дисциплины).

Авторизация и безопасность

JWT-аутентификация: login, хранение токенов в localStorage, refresh-flow;
обработка истечения сессии, logout и повторный вход;
централизованная обработка ошибок API.

Аналитические экраны (все 5 views)

Модуль	Что сделано
`StatisticsView`	Статистика оценок, групповая аналитика, KPI, риски, drill-down по графикам
`AcademicLeaveView`	Аналитика академического отпуска, фильтры, сортировка, диаграммы
`SubjectStatsView`	Статистика по дисциплинам, фильтрация, пагинация
`StudentRatingView`	Рейтинг, статусные карточки, долги, batch-загрузка больших данных
`StudentAnalyticsView`	ML-вкладка: прогноз оценок, кластеризация, поиск студента по ID

UI, UX и компоненты

переиспользуемые компоненты: ChartComponent, Pagination, PerPageSelector, UI-kit;
адаптивное mobile-меню, ARIA-атрибуты, улучшения доступности;
интеграция Chart.js для всех аналитических разделов.

Тестирование и качество кода

настроил Vitest + @vue/test-utils + happy-dom;
написал unit-тесты для views и UI-компонентов (src/__tests__/);
оптимизировал обработку ошибок, убрал лишние console.log.

Возможности

Аналитика и визуализация

Раздел	Описание
Статистика оценок	Агрегаты, графики, групповая аналитика с KPI и рисками
Академический отпуск	Успеваемость студентов в академическом отпуске
Статистика по предметам	Аналитика дисциплин с фильтрами и сортировкой
Рейтинг студентов	Топ, статусы, долги, batch-загрузка больших наборов
ML-аналитика	Прогноз оценок и кластеризация студентов

Технические возможности

JWT-аутентификация с автоматическим refresh токена;
единый HTTP-слой fetchData с обработкой 401;
табовая навигация с адаптивным mobile-меню;
переиспользуемые компоненты графиков и пагинации;
unit-тесты ключевых views и UI-компонентов (Vitest).

Архитектура

flowchart TD
    User["Пользователь"] --> App["app.vue"]
    App --> Auth["JWT login / refresh"]
    App --> Views["views/*.vue"]
    Views --> Charts["ChartComponent"]
    Views --> API["fetchData → /api"]
    API --> Backend["Django REST API"]
    Backend --> DB["PostgreSQL / SQL Server"]

Слой	Назначение
app.vue	Auth, навигация, `fetchData`, `provide/inject`
views/	Бизнес-логика разделов: фильтры, таблицы, графики
components/	Chart.js, пагинация, UI-компоненты
Django API	Данные студентов, статистика, ML-endpoints

Навигация реализована через переключение activeTab в app.vue, а не через URL-router. Views подгружаются асинхронно через defineAsyncComponent.

Разделы интерфейса

Вкладка	Файл	Ключевые API
Статистика оценок	`StatisticsView.vue`	`GET /api/statistics/marks/`
Академический отпуск	`AcademicLeaveView.vue`	`GET /api/academic/performance/`
Статистика по предметам	`SubjectStatsView.vue`	`GET /api/statistics/subject/`
Рейтинг студентов	`StudentRatingView.vue`	`GET /api/student-rating/`
ML-аналитика	`StudentAnalyticsView.vue`	`POST /api/predictions/train/`, `GET /api/analytics/data/`

Переиспользуемые компоненты

Компонент	Назначение
`ChartComponent.vue`	Обёртка Chart.js с lifecycle и `chartClick`
`Pagination.vue`	Пагинация таблиц
`PerPageSelector.vue`	Выбор размера страницы
`UI/MyButton.vue`, `MyInput.vue`, `MySelect.vue`, `MyDialog.vue`	Базовые UI-элементы

Структура проекта

student-analytics-dashboard/
├── public/
│   └── datasets/               # Демо-данные (CSV)
├── src/
│   ├── views/
│   │   ├── StatisticsView.vue
│   │   ├── AcademicLeaveView.vue
│   │   ├── SubjectStatsView.vue
│   │   ├── StudentRatingView.vue
│   │   └── StudentAnalyticsView.vue
│   ├── components/
│   │   ├── ChartComponent.vue
│   │   ├── Pagination.vue
│   │   └── UI/
│   ├── __tests__/                # Vitest unit-тесты
│   ├── app.vue                   # App shell: auth, nav, fetchData
│   └── main.js
├── vite.config.js                # Dev-сервер + proxy /api
├── vitest.config.js
├── package.json
└── README.md

API и авторизация

HTTP-слой

Все запросы проходят через fetchData в app.vue:

добавляет Authorization: Bearer <token>;
при 401 вызывает POST /api/auth/token/refresh/;
при неуспехе refresh — logout и повторный вход.

Основные endpoints

Группа	Endpoints
Auth	`POST /api/login/`, `POST /api/auth/token/refresh/`
Справочники	`GET /api/groups/`, `GET /api/disciplines/`
Статистика	`GET /api/statistics/marks/`, `GET /api/statistics/subject/`
Рейтинг	`GET /api/student-rating/`
Академ. отпуск	`GET /api/academic/performance/`
ML	`POST /api/predictions/train/`, `GET /api/analytics/data/`

Прокси (dev)

В vite.config.js запросы /api проксируются на http://127.0.0.1:8000.

Тестирование

Сценарий	Ожидаемый результат
`npm run test`	Vitest запускает unit-тесты
Views	`StatisticsView`, `StudentRatingView`, `AcademicLeaveView`, `SubjectStatsView`
Компоненты	`ChartComponent`, `Pagination`, UI-компоненты
Coverage	`npm run test:coverage` генерирует отчёт покрытия

Стек: Vitest + @vue/test-utils + happy-dom.

Как запустить

Требования

Node.js 16+ (рекомендуется 18+)
npm 8+
Запущенный Django backend на http://127.0.0.1:8000

Быстрый старт (backend уже работает)

git clone https://github.com/mdkefir/student-analytics-dashboard.git
cd student-analytics-dashboard
npm install
npm run dev

Откройте http://localhost:5173 и войдите через JWT-форму.

Полная настройка с backend

Клонируйте и запустите backend:

git clone https://github.com/mdkefir/Auth-and-Permissions-Logic.git
cd Auth-and-Permissions-Logic
py -3.12 -m venv venv
.\venv\Scripts\Activate.ps1        # Windows
pip install -r requirements.txt
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver

Запустите frontend (см. быстрый старт выше).

npm-скрипты

Команда	Назначение
`npm run dev`	Vite dev-сервер (основной)
`npm run test`	Unit-тесты (watch)
`npm run test:coverage`	Тесты с покрытием
`npm run build`	Production-сборка (Vue CLI)

Связанные репозитории

Репозиторий	Роль
mdkefir/Auth-and-Permissions-Logic	Django backend + JWT + permissions
ArtemBarlukov/VueFront	Первоначальная публикация кода (репозиторий напарника)

Без backend фронтенд не загрузит рабочие данные.

Что можно улучшить

вынести API URL в .env (dev/stage/prod);
унифицировать toolchain (Vite-only, убрать Vue CLI legacy);
добавить e2e-тесты (Playwright / Cypress);
расширить покрытие StudentAnalyticsView;
перейти на URL-router вместо табовой навигации;
добавить централизованный error boundary и toast-уведомления.

English

English Version

Back to top · Русская версия

Frontend dashboard for visualizing and analyzing student academic data.
Works with a Django REST API, uses JWT auth, Chart.js and a dedicated ML section.


Project type	Web frontend · analytics dashboard
Status	Completed personal project
Author	mdkefir
Main stack	Vue 3, Vite, Bootstrap 5, Chart.js, Vitest
Backend	Django REST API + JWT

About

student-analytics-dashboard is my Vue 3 project for student academic data analytics. Essentially the entire frontend is my work — from architecture and authentication to analytics screens, the ML tab and tests.

The project brings scattered performance metrics together in a single web panel with filters, tables and charts.

The dashboard is built for staff, teachers and analysts who need to:

view grade and subject statistics;
track student rankings and risk zones;
analyze academic leave data;
use the ML subsystem for predictions and clustering.

The code was initially published in a teammate's repository: ArtemBarlukov/VueFront. This version is my personal repository with the full source code and documentation.

My Contribution

I developed the entire frontend. Key areas of work:

Architecture and app core

designed app.vue as the app shell: navigation, auth state, provide/inject;
implemented the unified fetchData HTTP layer with Bearer tokens and auto-refresh on 401;
set up async view loading and tab navigation (desktop + mobile);
organized filter reference data loading (groups, disciplines).

Authentication and security

JWT authentication: login, token storage in localStorage, refresh flow;
session expiry handling, logout and re-login;
centralized API error handling.

Analytics screens (all 5 views)

Module	What I built
`StatisticsView`	Grade statistics, group analytics, KPIs, risks, chart drill-down
`AcademicLeaveView`	Academic leave analytics, filters, sorting, charts
`SubjectStatsView`	Subject statistics, filtering, pagination
`StudentRatingView`	Rankings, status cards, debts, batch loading for large datasets
`StudentAnalyticsView`	ML tab: grade predictions, clustering, student lookup by ID

UI, UX and components

reusable components: ChartComponent, Pagination, PerPageSelector, UI kit;
responsive mobile menu, ARIA attributes, accessibility improvements;
Chart.js integration across all analytics sections.

Testing and code quality

set up Vitest + @vue/test-utils + happy-dom;
wrote unit tests for views and UI components (src/__tests__/);
optimized error handling, removed unnecessary console.log calls.

Features

Analytics and visualization

Section	Description
Grade statistics	Aggregates, charts, group analytics with KPIs and risk indicators
Academic leave	Performance analysis for students on academic leave
Subject statistics	Discipline analytics with filters and sorting
Student ranking	Top lists, status cards, debts, batch loading for large datasets
ML analytics	Grade predictions and student clustering

Technical features

JWT authentication with automatic token refresh;
unified fetchData HTTP layer with 401 handling;
tab navigation with responsive mobile menu;
reusable chart and pagination components;
unit tests for key views and UI components (Vitest).

Architecture

flowchart TD
    User["User"] --> App["app.vue"]
    App --> Auth["JWT login / refresh"]
    App --> Views["views/*.vue"]
    Views --> Charts["ChartComponent"]
    Views --> API["fetchData → /api"]
    API --> Backend["Django REST API"]
    Backend --> DB["PostgreSQL / SQL Server"]

Layer	Responsibility
app.vue	Auth, navigation, `fetchData`, `provide/inject`
views/	Section business logic: filters, tables, charts
components/	Chart.js, pagination, UI components
Django API	Student data, statistics, ML endpoints

Navigation uses activeTab switching in app.vue rather than a URL router. Views are loaded asynchronously via defineAsyncComponent.

UI Sections

Tab	File	Key APIs
Grade statistics	`StatisticsView.vue`	`GET /api/statistics/marks/`
Academic leave	`AcademicLeaveView.vue`	`GET /api/academic/performance/`
Subject statistics	`SubjectStatsView.vue`	`GET /api/statistics/subject/`
Student ranking	`StudentRatingView.vue`	`GET /api/student-rating/`
ML analytics	`StudentAnalyticsView.vue`	`POST /api/predictions/train/`, `GET /api/analytics/data/`

Reusable components

Component	Responsibility
`ChartComponent.vue`	Chart.js wrapper with lifecycle and `chartClick`
`Pagination.vue`	Table pagination
`PerPageSelector.vue`	Page size selector
`UI/MyButton.vue`, `MyInput.vue`, `MySelect.vue`, `MyDialog.vue`	Base UI elements

Project Structure

student-analytics-dashboard/
├── public/
│   └── datasets/               # Demo data (CSV)
├── src/
│   ├── views/
│   │   ├── StatisticsView.vue
│   │   ├── AcademicLeaveView.vue
│   │   ├── SubjectStatsView.vue
│   │   ├── StudentRatingView.vue
│   │   └── StudentAnalyticsView.vue
│   ├── components/
│   │   ├── ChartComponent.vue
│   │   ├── Pagination.vue
│   │   └── UI/
│   ├── __tests__/                # Vitest unit tests
│   ├── app.vue                   # App shell: auth, nav, fetchData
│   └── main.js
├── vite.config.js                # Dev server + /api proxy
├── vitest.config.js
├── package.json
└── README.md

API & Authentication

HTTP layer

All requests go through fetchData in app.vue:

adds Authorization: Bearer <token>;
on 401 calls POST /api/auth/token/refresh/;
on refresh failure — logout and re-login.

Main endpoints

Group	Endpoints
Auth	`POST /api/login/`, `POST /api/auth/token/refresh/`
Reference data	`GET /api/groups/`, `GET /api/disciplines/`
Statistics	`GET /api/statistics/marks/`, `GET /api/statistics/subject/`
Ranking	`GET /api/student-rating/`
Academic leave	`GET /api/academic/performance/`
ML	`POST /api/predictions/train/`, `GET /api/analytics/data/`

Proxy (dev)

In vite.config.js, /api requests are proxied to http://127.0.0.1:8000.

Testing

Scenario	Expected result
`npm run test`	Vitest runs unit tests
Views	`StatisticsView`, `StudentRatingView`, `AcademicLeaveView`, `SubjectStatsView`
Components	`ChartComponent`, `Pagination`, UI components
Coverage	`npm run test:coverage` generates a coverage report

Stack: Vitest + @vue/test-utils + happy-dom.

How to Run

Prerequisites

Node.js 16+ (18+ recommended)
npm 8+
Running Django backend at http://127.0.0.1:8000

Quick start (backend already running)

git clone https://github.com/mdkefir/student-analytics-dashboard.git
cd student-analytics-dashboard
npm install
npm run dev

Open http://localhost:5173 and sign in via the JWT form.

Full setup with backend

Clone and start the backend:

git clone https://github.com/mdkefir/Auth-and-Permissions-Logic.git
cd Auth-and-Permissions-Logic
py -3.12 -m venv venv
.\venv\Scripts\Activate.ps1        # Windows
pip install -r requirements.txt
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver

Start the frontend (see quick start above).

npm scripts

Command	Purpose
`npm run dev`	Vite dev server (primary)
`npm run test`	Unit tests (watch)
`npm run test:coverage`	Tests with coverage
`npm run build`	Production build (Vue CLI)

Related Repositories

Repository	Role
mdkefir/Auth-and-Permissions-Logic	Django backend + JWT + permissions
ArtemBarlukov/VueFront	Initial code publication (teammate's repository)

The frontend cannot load live data without the backend.

Roadmap

move API URL to .env (dev/stage/prod);
unify toolchain (Vite-only, remove Vue CLI legacy);
add e2e tests (Playwright / Cypress);
expand StudentAnalyticsView test coverage;
migrate to URL-based routing instead of tab navigation;
add a centralized error boundary and toast notifications.

Русская версия

_{Personal Project · Vue 3 · Student Analytics Dashboard · mdkefir}

Name		Name	Last commit message	Last commit date
Latest commit History 32 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
analitika_pos.md		analitika_pos.md
babel.config.js		babel.config.js
index.html		index.html
jsconfig.json		jsconfig.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
vite.config.js		vite.config.js
vitest.config.js		vitest.config.js
vue.config.js		vue.config.js

Folders and files

Latest commit

History

Repository files navigation

student-analytics-dashboard

Vue 3 · Vite · Chart.js · JWT · Student Analytics Dashboard

Русская версия

Содержание

О проекте

Мой вклад

Архитектура и ядро приложения

Авторизация и безопасность

Аналитические экраны (все 5 views)

UI, UX и компоненты

Тестирование и качество кода

Возможности

Аналитика и визуализация

Технические возможности

Архитектура

Разделы интерфейса

Переиспользуемые компоненты

Структура проекта

API и авторизация

HTTP-слой

Основные endpoints

Прокси (dev)

Тестирование

Как запустить

Требования

Быстрый старт (backend уже работает)

Полная настройка с backend

npm-скрипты

Связанные репозитории

Что можно улучшить

English Version

Table of Contents

About

My Contribution

Architecture and app core

Authentication and security

Analytics screens (all 5 views)

UI, UX and components

Testing and code quality

Features

Analytics and visualization

Technical features

Architecture

UI Sections

Reusable components

Project Structure

API & Authentication

HTTP layer

Main endpoints

Proxy (dev)

Testing

How to Run

Prerequisites

Quick start (backend already running)

Full setup with backend

npm scripts

Related Repositories

Roadmap

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Contributors

Uh oh!

Languages