Skip to Content
⚙️ Сайт находится в стадии разработки.
ПортфолиоMovies ExplorerФронтенд

Фронтенд

Ссылка на Github-репозиторий с фронтендом проекта 

Файловая структура

  • components/ - для React-компонентов;
  • utils/ - для запросов к API и вспомогательных функций;
  • images/ - для изображений;
  • vendor/ - для стороннего кода и файлов, в т.ч. для шрифтов.

Компоненты

Для каждого компонента создана отдельная директория. Например, для компонента App:

 
-- components/
 
---- App/
------ App.js
------ App.css

Список компонентов:

  1. Компоненты для отдельных страниц:
РодительскийДочернийОписание
AppКорневой компонент приложения, создается командой create-react-app
MainКомпонент страницы “О проекте”
PromoКомпонент с версткой баннера
NavTabКомпонент с навигацией
AboutProjectКомпонент с описанием дипломного проекта
TechsКомпонент с использованными технологиями
AboutMeКомпонент с информацией о студенте
PortfolioКомпонент со ссылками на другие проекты
MoviesКомпонент страницы с поиском фильмов
SearchFormФорма поиска. Содержит отдельный компнент FilterCheckbox
PreLoaderОтвечает за работу прелоадера
MoviesCardListОтвечает за отрисовку карточек фильмов и их количество
MoviesCardКомпонент отдельной карточки фильма
SavedMoviesКомпонент страницы с сохраненными карточками фильмов
MoviesCardListОтвечает за отрисовку карточек фильмов и их количество
MoviesCardКомпонент отдельной карточки фильма
  1. Компоненты для каждой страницы:
КомпонентОписание
HeaderОтрисовывает шапку сайта на странице
NavigationОтвечает за верхнее навигационное меню
FooterОтрисовывает подвал сайта на странице
  1. Компоненты для страниц регистрации, авторизации и редактирования профиля:
КомпонентОписание
RegisterДля страницы регистрации пользователя
LoginДля страницы авторизации пользователя
ProfileДля страницы редактирования профиля пользователя

Роуты

Маршруты

РоутСтраница
/О проекте
/moviesФильмы
/saved-movies/Сохраненные фильмы
/profileПрофиль пользователя
/signupСтраница регистрации пользователя
/signinСтраница авторизации пользователя

События

Клик по элементуПереход на страницу
Логотип/
Фильмы/movies
Сохраненные фильмы/saved-movies
Регистрация/signup
Авторизация/signin
Аккаунт/profile

Неучтенные роуты ведут на страницу /404.

Вёрстка

HTML:

  • Разметка портирована в JSX.
  • Разметка семантическая.
  • Все классы названы по БЭМ.
  • Навигация должна работать: ни одна ссылка не ведёт «в никуда».

CSS:

  • Для стилизации каждого блока выбраны правильные инструменты, которые подходят для задачи.
  • Вёрстка на Flex layout и/или Grid layout.
  • Адаптивность под указанные в макете разрешения и отсутствие поломок в промежуточных значениях.
  • Шрифты подключены через @font-face.
  • Элементы правильно позиционированы.
  • Сделана микроанимация кнопок, ссылок и инпутов.
  • Использован normalize.сss или стилизован строго по БЭМ — без внешних файлов.
  • Формы и плейсхолдеры стилизованы верно.
  • В разных частях проекта есть переиспользуемые блоки.
  • Все изображения оптимизированы — в том числе и .svg.
Обновлено
Архитектура приложенияБэкенд