https://github.com/elrouss/movies-explorer-frontend
Приложение для поиска и просмотра фильмов международного фестиваля документального кино о новой культуре "Beat Film Festival"
https://github.com/elrouss/movies-explorer-frontend
api bem-methodology elrouss html5 react react-router scss yandex-praktikum
Last synced: 27 days ago
JSON representation
Приложение для поиска и просмотра фильмов международного фестиваля документального кино о новой культуре "Beat Film Festival"
- Host: GitHub
- URL: https://github.com/elrouss/movies-explorer-frontend
- Owner: elrouss
- Created: 2023-04-11T16:24:57.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-18T21:02:36.000Z (almost 2 years ago)
- Last Synced: 2024-12-10T20:39:25.381Z (5 months ago)
- Topics: api, bem-methodology, elrouss, html5, react, react-router, scss, yandex-praktikum
- Language: JavaScript
- Homepage: https://elrouss.movies.nomoredomains.monster/
- Size: 1.14 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Дипломный проект: "Movies Explorer" (frontend)
Оглавление
- Описание проекта
- Стек технологий
- Установка и запуск приложения в локальном репозитории, эксплуатация
- Процесс создания
- Функционал
- Планы по улучшению
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
* - проект прошел код-ревью
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`
- Кроссбраузерность
