↓ Перейти к основному содержимому
Портфолио Pistaha

ElectoLibrary — полнофункциональная электронная библиотека

Коротко о проекте
#

ElectoLibrary — итоговое клиент-серверное приложение электронной библиотеки. Это не макет и не набор отдельных экранов: frontend работает с REST API, данные сохраняются в SQLite, проект запускается контейнерами и покрывает полный пользовательский цикл от поиска книги до бронирования.

Исходный код на GitHub

Главная страница ElectoLibrary

Задача
#

Собрать законченное SPA-приложение и на одном проекте показать практическое владение Vue 3: реактивностью, компонентной декомпозицией, формами, слотами, маршрутизацией, запросами к API и состояниями интерфейса. Серверная часть должна обеспечивать постоянное хранение данных и работу с файлами.

Что реализовано
#

  • каталог с поиском по названию, автору и издательству;
  • фильтрация по наличию и сортировка по дате либо алфавиту;
  • создание, просмотр, редактирование и удаление книг;
  • загрузка JPG-обложек с проверкой размера;
  • избранное, бронирование и отмена бронирования;
  • тематические подборки и отдельные пользовательские разделы;
  • адаптивная навигация, уведомления и отдельная страница 404;
  • хранение данных в SQLite;
  • API-тесты и воспроизводимый запуск через Docker Compose.

Архитектура
# 

Browser
  └─ Vue 3 + Vue Router
       ├─ views / components
       ├─ composable useBooks
       └─ API service
            └─ FastAPI
                 ├─ CRUD и бизнес-операции
                 ├─ загрузка обложек
                 └─ SQLite

Frontend разделён на представления, переиспользуемые компоненты и слой доступа к API. Работа с каталогом вынесена в composable, а сервер отвечает за операции над сущностями и постоянное состояние. В production-сценарии frontend собирается Vite и отдаётся через Nginx, backend работает отдельным контейнером.

Инженерные детали
#

Vue-часть использует computed, watch, template refs, lifecycle hooks, именованные и scoped slots. Маршрутизация включает вложенные и именованные маршруты, программные переходы и fallback для неизвестных URL. Формы используют модификаторы v-model, а дочерние компоненты сообщают о действиях через события.

Проверка и запуск
# 

git clone https://github.com/pistaha/electolibrary-exam.git
cd electolibrary-exam
docker compose up --build

Backend-тесты находятся в backend/test_main.py. В репозитории также сохранены экранные состояния каталога, создания и редактирования книги, мобильной версии и страницы 404.

Результат
#

Проект объединяет интерфейс, API, базу данных, файловую загрузку, тестирование и контейнеризацию в одном воспроизводимом решении. Это основной full-stack кейс портфолио.