Дипломный проект "Movies Explorer" представляет собой веб-приложение, созданное с использованием React, которое позволяет пользователям открывать увлекательный мир кино. С приложением вы можете легко находить информацию о различных фильмах, исследовать новые кинематографические шедевры и сохранять свои любимые фильмы для последующего просмотра. Ссылка на макет в Figma(dark-1) | Ссылка на сайт
- Movies Explorer (версия React) - этот репозиторий
- Movies Explorer (версия для сервера)
-
Разработал пользовательский интерфейс с использованием библиотеки React.
-
Создал компоненты для отображения информации о фильмах, формы поиска и фильтрации.
-
Настроил маршрутизацию с использованием React Router для перехода между страницами приложения.
-
Интегрировал внешний API для получения данных о фильмах.
-
Реализовал функционал сохранения и удаления фильмов в избранном с использованием локального хранилища браузера.
-
Создал формы для авторизации и регистрации пользователей.
-
Реализовал обработку ошибок и валидацию вводимых данных.
-
Настроил адаптивную вёрстку для корректного отображения на разных устройствах.
-
Добавил анимации и интерактивные элементы для улучшения пользовательского опыта.
-
Просмотр списка фильмов с возможностью поиска и фильтрации.
-
Добавление и удаление фильмов в избранное.
-
Регистрация и аутентификация пользователей.
-
Валидация вводимых данных на формах.
-
Адаптивная вёрстка для корректного отображения на мобильных устройствах.
-
Анимации и интерактивные элементы для улучшения интерфейса.
- Библиотека React + Vite для разработки пользовательского интерфейса.
- Хуки useState и useEffect для управления состоянием компонентов и выполнения побочных эффектов.
- CSS-фреймворк Flexbox для гибкой вёрстки.
- Технология @font-face для подключения шрифтов.
- CSS-фреймворк Grid-Layout для создания сложных сеток.
- Использование относительных единиц измерения, таких как vw, vh, %, rem и em для создания адаптивных интерфейсов.
- Использование псевдокласса :hover для интерактивных элементов.
- Формы и валидация данных.
- Позиционирование элементов.
- Методология БЭМ (Nested) для именования классов CSS.
- Адаптивная вёрстка с использованием медиазапросов @media screen.
- Обработка массивов данных.
- Работа с данными по умолчанию.
- Модульная структура проекта с использованием import и export.
-
Склонировать репозиторий:
git clone git@github.com:Dmitry145528/movies-explorer-frontend.git git clone https://github.com/Dmitry145528/movies-explorer-frontend.git
-
Перейдите в директорию проекта, выполнив команду:
cd movies-explorer-frontend
-
Установите все необходимые зависимости проекта, выполнив команду:
npm install
-
Перед запуском проекта в режиме разработки или деплоем на хостинг, необходимо собрать проект. Для этого выполните команду:
npm run build
-
Вы можете запустить проект в режиме разработки, выполнив команду:
npm run dev
-
Для просмотра оптимизированного билда для продакшн, используйте команду:
npm run preview
✅ Завершено
Дальнейшая разработка ведётся в репозитории Movies Explorer (версия для сервера)