"FilmFinder" - это веб-приложение для поиска фильмов и управления личной коллекцией. Приложение позволяет пользователям находить фильмы по ключевым словам, просматривать детальную информацию о них и сохранять понравившиеся в личный кабинет для быстрого доступа в будущем. Проект позволил углубить знания в области фронтенд-разработки, а также дал возможность на практике применить изученные технологии.
Приложение находится по адресу: https://movies-explorer.ichet.nomoredomainsclub.ru/signin
- Поиск фильмов: на главной странице введите ключевые слова в строку поиска и нажмите кнопку "Искать". Система отобразит список фильмов, соответствующих вашему запросу.
- Сохранение фильмов: для сохранения фильма в личном кабинете нажмите на иконку сердечка или кнопку "Сохранить" на карточке фильма.
- Просмотр сохраненных фильмов: перейдите в раздел "Сохраненные фильмы" в вашем личном кабинете, чтобы просмотреть список избранных фильмов.
- Возможность регистрации и авторизации пользователей для создания личного кабинета с применением JWT.
- Редактирование информации профиля
- Возможность ставить и убирать лайки фильмам;
- Лайв-валидация форм на клиенте с использованием JS
React, HTML5, CSS3, JavaScript (ES6+), Form Validation, Fetch API, async/await, JSON, Webpack, Babel, NPM, Git, HTTPS/SSL, JWT, БЭМ, ООП
Фронтенд
React: Построение пользовательского интерфейса с использованием компонентного подхода, управление состоянием приложения, использование хуков для логики компонентов, маршрутизация с помощью React Router для организации навигации.
HTML5: Структура веб-страницы, использование семантических тегов для обеспечения доступности и SEO-оптимизации.
CSS3: Адаптивная и кроссбраузерная верстка с использованием медиазапросов, стилизация элементов, включая Flexbox и Grid для создания адаптивных макетов, анимации и переходы для улучшения визуального взаимодействия.
JavaScript (ES6+): Динамическое взаимодействие на стороне клиента, использование современных возможностей языка для обработки событий, асинхронных операций и манипуляций с DOM.
Валидация
HTML5 Form Validation: Использование встроенных средств HTML5 для валидации форм на стороне клиента, улучшение пользовательского опыта.
JavaScript: Дополнительная клиентская валидация, включая асинхронную проверку данных и кастомные правила валидации.
Взаимодействие с сервером
Fetch: Отправка асинхронных HTTP-запросов к серверу для работы с REST API, обработка ответов и ошибок.
async/await: Упрощение работы с асинхронным кодом, повышение читаемости и удобства отладки.
JSON: Работа с форматом передачи данных, сериализация и десериализация.
Сборка и разработка
Webpack: Настройка процесса сборки, включая минификацию, объединение и транспиляцию кода.
Babel: Транспиляция JavaScript-кода для обеспечения совместимости с более старыми браузерами.
NPM: Управление зависимостями проекта, автоматизация задач разработки и сборки.
Git: Отслеживание изменений в коде, ветвление и слияние, работа с удаленными репозиториями.
HTTPS/SSL: Использование защищенного соединения для обмена данными между клиентом и сервером.
JWT: Авторизация с помощью JWT
БЭМ: Организация CSS-кода и файловой структуры проекта для повышения читаемости и упрощения масштабирования кода.
ООП: применение классов для организации кода, повышения его модульности и переиспользования.
Выполнение проекта позволило мне углубить и применить на практике знания по созданию реактивных пользовательских интерфейсов, используя библиотеку React. В том числе навыки по адаптивной верстке, асинхронным запросы к внешним сервисам, настройке маршрутизации, регистрации и авторизации.
- Клонировать репозиторий:
git clone git@github.com:iammacheta/movies-explorer-frontend.git- Установить зависимости:
npm install - Запустить проект в режиме разработки командой:
npm run dev. Для сборки проекта используйте:npm run build.