elrouss / movies-explorer-frontend

Приложение для поиска и просмотра фильмов международного фестиваля документального кино о новой культуре "Beat Film Festival"

Дипломный проект: "Movies Explorer" (frontend)

Оглавление

1. Описание проекта
2. Стек технологий
3. Установка и запуск приложения в локальном репозитории, эксплуатация
4. Процесс создания
5. Функционал
6. Планы по улучшению

1. Описание проекта

Дипломный проект "Movies Explorer" - приложение для поиска и просмотра фильмов международного фестиваля документального кино о новой культуре "Beat Film Festival". Выполнен в рамках образовательной программы Яндекс Практикума и представляет собой отзывчиво-адаптивное приложение (SPA), написанное на "React" (часть frontend) и "Express" (часть backend).

Ссылки на проект:
IP: 158.160.47.171
Frontend (деплой): https://elrouss.movies.nomoredomains.monster/
Backend: https://api.elrouss.movies.nomoredomains.monster/

Макет: https://disk.yandex.ru/d/tLqZ9NlxEjOxWQ
Чек-лист: https://code.s3.yandex.net/web-developer/static/new-program/web-diploma-criteria-2.0/checklist_react_diplom.pdf

* - проект прошел код-ревью

(к оглавлению)

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

(к оглавлению)

3. Установка и запуск приложения в локальном репозитории, эксплуатация

1. git clone https://github.com/elrouss/movies-explorer-frontend.git - клонировать репозиторий на свое устройство (HTTPS)
2. npm i - установить зависимости
3. npm run start - запустить приложение

NB! Для корректной работы в локальном репозитории следует также клонировать backend и запустить в первую очередь его командой npm run dev (после установки зависимостей)

(к оглавлению)

4. Процесс создания

Работа выполнена в 2 этапа:

1. Верстка
2. Написание логики

(к оглавлению)

4.1 Основные задачи, проблемы и их решение

4.1.1 Синхронизация данных между найденными и добавленными карточками без лишних запросов к серверу, сохранение состояния между обновлениями страницы

Решение: созданы 4 стейта - allMovies, filteredMovies, savedMovies, filteredSavedMovies. При первом поиске происходит сохранение всех найденных фильмов в localStorage с дальнейшим выводом пользователю отфильтрованного массива. Соответственно при любых дальнейших запросах происходит поиск по стейту allMovies без обращения к Api (поведение сохраняется после перезагрузки страницы). Синхронизация данных между 4 массивами происходит при помощи циклов.

При сохранении фильма в избранные нужный находится в массиве и к нему добавляются поля selected и dbId - идентификатор, создаваемый и отправляемый сервером (для возможности последующего удаления карточки). Поскольку данные, получаемые от стороннего Api отличаются, они модифицируются перед отправкой на сервер, написанный для этого проекта (где сохраняются данные пользователей и избранные карточки)

4.1.2 Валидация личных данных при регистрации, авторизации и обновлении

Решение: согласно условию задания, следовало самостоятельно написать валидацию без привлечения сторонних библиотек. Для этого был использован кастомный хук (применен ранее в учебном проекте) и попробован pattern атрибут полей форм в HTML. Последний показал свою ненадежность и возможность легкого обхода валидации на стороне клиента при изменении данных в DOM в инструменте разработчика

(к оглавлению)

4.1.3 Отрисовка стартовой страницы и неавторизованного состояния header в процессе проверки токена и переадресации пользователя на защищенные роуты

Решение: эта проблема была решена в учебном проекте ранее, но показала свою неэффективность в данной работе (продолжалась отрисовка неавторизованного состояния header и мелькание страниц с формой регистрации и авторизации при переходе на них до появления страницы 404). Согласно изначальной логике, устанавливался isAppLoading со значением false, который в процессе проверки токена становился true и впоследствии снова false (соответственно, отрисовка роутов происходила только после установления false - в чем была ошибка). Поэтому было внесено изменение, согласно которому страница отрисовывается только в случае булевого true и, соответственно, сохранения isAppLoading с этим значением без возвращения к false

4.1.4 SCSS

Решение: при выполнении дипломного проекта был опробован SCSS (не входит в учебную программу) и в организации файловой структуры проведен эксперимент с паттерном 7-in-1. Последний доказал свою неэффективность в процессе разрастания проекта и подтвердил удобство компонентного подхода с хранением файлов js и scss в 1 папке

4.1.5 Типизация данных

Решение: опробованы Proptypes для Реакта (аналог типизации в TypeScript), которые показали свою эффективность при разрастании проекта

(к оглавлению)

5. Функционал

• Регистрация и авторизация пользователей с редактированием личных данных
• Поиск фильмов с фильтрацией и рандомной генерацией вывода карточек, добавлением в избранные и удалением
• Валидация личных данных

(к оглавлению)

6. Планы по улучшению

• Оптимизация лишних ререндеров
• Рефакторинг и "разгрузка" компонента App
• Кроссбраузерность

(к оглавлению)