Дипломный проект: Movies Explorer (React) от "Yandex Practicum".

Дипломный проект "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.

Инструкция по запуску:

1. Склонировать репозиторий:

   git clone git@github.com:Dmitry145528/movies-explorer-frontend.git
   git clone https://github.com/Dmitry145528/movies-explorer-frontend.git
   

2. Перейдите в директорию проекта, выполнив команду:

   cd movies-explorer-frontend

3. Установите все необходимые зависимости проекта, выполнив команду:

   npm install

4. Перед запуском проекта в режиме разработки или деплоем на хостинг, необходимо собрать проект. Для этого выполните команду:

   npm run build

5. Вы можете запустить проект в режиме разработки, выполнив команду:

   npm run dev

6. Для просмотра оптимизированного билда для продакшн, используйте команду:

   npm run preview

Статус разработки:

✅ Завершено

Дальнейшая разработка ведётся в репозитории Movies Explorer (версия для сервера)