A simple set, for a quick start. Try the new features of JavaScript with Babel.
| commands | actions |
|---|---|
yarn install |
install |
yarn start |
development |
yarn build |
production |
Проект разработан с использованием WebPack, NodeJS, SCSS, В работе с базой данных используется сервис Firebase. Применена архитектура MVC. Используется jQuery. Приложение адаптивно.
Проект «Прочиталочка» — это одностраничное (Single Page Application) CRUD-приложение, которое представлять собой библиотеку, основанную на API сервисе https://wolnelektury.pl/api/
В каталоге можно подбирать книги с помощью фильтров:
-
Фильтр «Авторы» (выпадающий список).
-
Фильтр «Жанры (выпадающий список). При выборе автора сужается перечень жанров. При дефолтном значении автора и выборе жанра сужается список авторов.
-
Фильтр «Род литературы» (чек-боксы с конкретными значениями). Выбор книг - по кнопке Найти с учетом всех выбранных параметров в фильтрах.
-
«Мой словарик» Форма ввода слова и перевода, доступна после входа в аккаунт. По клику на кнопку «Добавить» пара слов записывается в базу данных под конкретного пользователя.
Запись осуществляется в виде хеша (слово-перевод-отметка Выучено/Не выучено). Кнопка заблокирована, если пользователь ещё не прошел авторизацию. Доступ к сохраненным словам - из кабинета.
ContentContainer - основной компонент приложения. Содержание меняется в зависимости от назначения страницы. Содержит следующие варианты отображения (папка Pages).
HomePage Главная страница. При первой загрузке отображает каталог книг, получаемый с помощью соответствующего API метода. Переход на неё возможен с любой страницы приложения по клику на «Каталог» в NavBar, на логотип в Header, а также при выходе из аккаунта (по кнопке «Выход») Базу каталога сохраняю в SessionStorage (для более быстрой отрисовки при переходах по сайту). Книги подгружаются поэтапно, показаны первые 9 книг, при прокручивании становятся видимыми следующие и т.д. Отображение книг обновляется по клику на кнопку «Найти» (запрос в базу каталога). Каждая секция книги должна содержать изображение обложки с ссылкой на страницу книги, название книги(так же со ссылкой на страницу), имя автора, жанр, род литературы, а также иконку, говорящую о наличии аудиокниги.
Book Страничка книжки. Внутри изображение-обложка, название имя автора, жанр, род литературы, кнопки с ссылками на скачивание. По результату проверки на наличие аудиокниги отображается аудиоплеер. По переходу по кнопкам вперед/назад осуществляется переход по главам, срабатывает счетчик глав, отображается название конкретной главы. Если пользователь прошел авторизацию, возле изображения обложки становится видимой кнопка-звездочка. По клику на неё книга добавляется в Список литературы пользователя (с записью в базу данных). Список отображается на странице Account. Кнопка «Читать» осуществляет переход на страницу Read. Внизу страницы отображаются секции с описанием трех других книг автора.
Read Страница онлайн чтения. Здесь фрейм с текстом для чтения (непосредственно с ресурса https://wolnelektury.pl).
Account Личный кабинет пользователя. Содержит две основные секции:
- Список литературы.
Список формируется из книг из базы данных под конкретного пользователя(записываются по нажатию на звездочку на странице книги).
Строка списка содержит название (с ссылкой на переход на страницу книги), имя автора. Кнопка-крестик позволяет по клику удалять книгу из списка и одновременно из базы данных. - Тренажер «Мой словарик».
Эта часть приложения предназначена для работы с перечнем слов с переводом, записанных и сохраненных пользователем в базу данных с помощью формы «Мой словарик» в NavBar (words в базе данных).
На странице пользователя слова в словаре отражаются в списке селекта.
Выбор из селекта — по клику на кнопку «В работу».
Выбранное слово превращается в карточку в рабочей зоне, при этом исчезает из списка селекта.
На карточке есть кнопка-крестик, которая удаляет карточку с рабочего стола, отправляя слово обратно в селект. На карточке слово и перевод. По двойному щелчку мыши на карточке перевод исчезает. Карточки можно перетаскивать при нажатой кнопке мыши. При попадании в зону «Папка выученных слов», отпустив кнопку мыши, пользователь отправляет пару слово-перевод в отдельный «Список выученных слов» (отражается на странице ListOfWords). При этом в базе данных меняется значение по ключу learned с 0, присвоенного по умолчанию при сохранении, на 1 (в хеше под каждое отдельное слово).
ListOfWords Страница со Списком выученных слов. Позволяет манипулировать с содержанием базы данных. Каждая строчка списка — пара слово-перевод со значением 1 по ключу learned. Пользователь может решить, что делать со словом в словарике. Нажав на кнопку со стрелочкой, он меняет значение 0 на 1 по ключу learned. Слово снова может отобразиться в селекте «Моего словарика» в кабинете пользователя. Нажав на кнопку-крестик, пользователь удаляет хешь данного слова из базы.