SPA “Каталог книг” (Vue.js + Firebase + Typescript)

Примечание: Этот проект НЕ требует постоянных обновлений кода.

Статус Проекта: 🟩 Активен.

📑Содержание

1. Цели и Задачи

2. Основная работа

   a) Главная страница

   b) Страница создания новой книги

3. Скриншоты

4. Стек технологий

5. Установка

---

❗ Цели и задачи

Целью данного проекта является реализация SPA “Каталог книг” на любом frontend фреймворке/библиотеке.

Требования:

1. Хранение данных организовать используя Firestore и соответствующий SDK;

2. На главной странице должен отображаться список всех книг доступных в системе;

3. Книги должны быть разбиты на группы по году публикации, группы должны быть отсортированы в обратном порядке (сначала новые), внутри группы книги сортируются по названию;

4. Нужна возможность добавлять и удалять книги;

5. Система должна рекомендовать хорошую книгу для прочтения:

   a. Хорошая книга должна пройти проверку временем, поэтому она должна быть издана не менее 3 лет назад;

   b. Из всех проверенных временем книг нужно выбрать лучшие - с самым высоким рейтингом;

   c. Если нашлось несколько хороших книг выбрать одну случайным образом;

Поля книги:

• название (обязательный параметр, не более 100 символов);
• список авторов (книга должна содержать хотя бы одного автора);
• год публикации (опциональный параметр, не раньше 1800);
• рейтинг (опциональный параметр, целое число, от 0 до 10, по умолчанию 0);
• ISBN (опциональный параметр);

Дополнительные функции (по желанию):

1. Валидация ISBN;
2. Смена режима группировки (по рейтингу, по автору);
3. Редактирование книг;

---

Основная работа

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

На этой странице отображается список из всех книг, хранящихся в базе данных (Firebase).

Книги сгруппированы по годам. Для книг, у которых не указан год, есть отдельная группа — "Книги без указания года". Также есть отдельно поле, в котором отображается рекомендованная книга.

У каждой книги вс списке есть кнопка "Удалить", при нажатии на которую пользователю показывается окно подтверждения для удаления выбранной книги. После успешного удаления содержимое страницы будет перезагружено и выбранной книги в списке быть уже не должно.

❗ Важно: Если книга после удаления осталась в списке, то просто перезагрузите страницу. Есть задержка между запросами к базе данных.

Страница создания новой книги

На этой странице находится форма создания новой книги. Здесь есть 5 полей для заполнения:

• Название книги.
• Автор или авторы.
• Год публикации.
• Рейтинг.
• ISBN.

Только первые 2 поля являются обязательными для заполнения. Если у книги имеется несколько авторов, то нужно написать всех авторов через запятую.

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

Если валидация не прошла успешно, то будет выведено сообщение пользователю (alert). Если валидация прошла успешно, то выведется соответствующее сообщение, после чего пользователь будет переадресован на главную страницу.

❗ Важно: Если созданная книга не видна в списке после успешной валидации, то просто перезагрузите страницу. Есть задержка между запросами к базе данных.

---

📷 Скриншоты

Загрузка данных из БД:

Загруженные данные:

Книги без указанного года находятся внизу главной страницы в отдельной группе:

Форма создания новой книги:

Давайте создадим новую книгу, а потом удалим её:

Ниже представлены сообщения об ошибках валидации формы:

---

💻 Стек технологий

В проекте был использован следующий стек технологий:

• HTML
• CSS
• Vue.js
• Git
• Sass
• Vite.js
• gh-pages (Github Pages)
• Typescript
• Firebase

---

⏬ Установка

Клонируем удалённый репозиторий на локальную машину:

git clone https://github.com/Nico-kun123/LibrarySPA

Устанавливаем все необходимые компоненты:

cd LibrarySPA
npm install

Содержание package.json:

{
  "name": "libraryspa",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build-only": "vite build",
    "preview": "npm run build-only & vite preview",
    "format": "prettier --write src/",
    "deploy": "npm run build-only && gh-pages -d dist",
    "build": "run-p type-check \"build-only {@}\" --",
    "type-check": "vue-tsc --build --force"
  },
  "dependencies": {
    "@form-validation/validator-isbn": "^2.4.0",
    "firebase": "^10.11.1",
    "gh-pages": "^6.1.1",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.12.5",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/tsconfig": "^0.5.1",
    "npm-run-all2": "^6.1.2",
    "prettier": "^3.2.5",
    "sass": "^1.75.0",
    "typescript": "~5.4.0",
    "vite": "^5.2.8",
    "vue-tsc": "^2.0.11"
  }
}

В проекте есть следующие разделы:

• dependencies: Это пакеты, необходимые для работы приложения.
• devDependencies: Это пакеты, которые нужны только для разработки и тестирования приложения. Они не будут включены в окончательную сборку приложения.

В проекте есть следующие скрипты (рассмотрим более важные):

• "dev". Этот скрипт запускает сервер разработки Vite на локальной машине. Проект работает в режиме development;
• "build-only". Этот скрипт используется для сборки проекта для production. Он минимизирует и оптимизирует код для лучшей производительности в production;
• "preview". Сборка проекта в production и предварительный просмотр собранного проекта. Он запускает сервер, который позволяет увидеть, как он будет выглядеть и работать в production;
• "format". Автоматически форматирует код в файлах проекта, используя "Prettier";
• "deploy". Этот скрипт сначала собирает проект в production, а затем развертывает его на "GitHub Pages".

---

Автор

Кудрявцев Николай (Электронная почта: nicolay.kudryavtsev@gmail.com)