Необходимо реализовать React приложение "Modsen Client Blog" по предоставленному дизайну из Figma с использование Server-side Rendering (NextJS).
- pnpm - менеджер пакетов;
- TypeScript - инструмент строгой типизации;
- email-js - библиотека позволяющая отправлять электронные письма на почту;
- SCSS - препроцессор, позволяющий писать код для стилей CSS;
- cypress — e2e тестирование для web-приложений;
- jest — unit-тестирование;
- zod - библиотека для валидации;
- nextJS - фреймворк на JavaScript, использующий React для построения server-side render.
Приложение должно предоставлять возможность:
- отправки писем на электронную почту;
- реализацию elastic search;
- реализацию infinity scroll;
- просмотр интерактивной карты;
- смены языка (продумать самостоятельно).
- Развернуть приложение на хостинге (heroku, vercel)
- Настроить CI/CD, используя GitHub Actions.
- Собрать проект с нуля (с настройками всех конфигов: eslint, prettier, husky)
Ссылка на макет: Макет "Modsen Client Blog".
- Организацию файловой структуры описанной в structure;
- Придерживаться требований по написанию и организации кода react приложения. Ссылка на требования: Требования к тестовому заданию;
- Обработку ошибок через паттерн "Error Boundaries";
- Использование TypeScript для типизирования и уменьшения количества потенциальных багов;
- Использование алиасов для импортирования файлов;
- Реализация должна быть выполнена без использования UI библиотек;
- Обязательная валидация всех текстовых полей с использованием zod;
- Оптимизацию дизайна под мобильные устройства;
- Покрытие тестами всего приложения (cypress, jest);
- Создание UI библиотеки компонентов, используя storybook;
- Обязательную анимацию при наведения, нажатии на кнопки, прокрутки карусели и слайдеров, появлении элементов на странице при рендере и скролле;
- Творчество в контексте анимации, помимо обязательной выше, приветствуется.
-
Все страницы включают в себя верхний блок, который предполагает реализацию перехода между страницами и при нажатии на кнопку "Video about us" открывается модальное окно, в котором сразу начинает проигрываться видео(выбранное выполняющим). На странице необходимо реализовать загрузку контента с помощью infinity scroll. В блоке "Step-by-step" при нажатии на кнопку "read more" происходит переход на страницу поста, который представлен на экране. В блоке "Featured Post" при нажатии на кнопку "read more" происходит переход на страницу Blog Post. В блоке "All Posts" при нажатии на кнопку "View All" происходит переход на страницу происходит переход на BLog. В блоке "About Us" при нажатии на кнопку "read more" происходит переход на страницу About Us. В блоке "Choose A Category" при нажатии на одну из категорий, пользователь попадает на страницу Category. В блоке "Why we started" при нажатии на кнопку "Discover our story" пользователь попадает на страницу About Us. В блоке "List of Authors" при нажатии на одного из авторов, пользователь попадает на Author. В блоке "TESTIMONIALS" реализована карусель, которая имеет горизонтальный список включающий в себя 1 карточку с отзывом и есть возможность навигации на следующую страницу списка с использованием двух стрелок навигации. В блоке "Join our team to be a part of our story" при нажатии на кнопку "Join Now" пользователь попадает на страницу Contact. На каждой странице в блоке "Subscribe to our news letter" должна быть реализована форма отправки сообщения на электронную почту выполняющего. При нажатии на ссылку "Privacy Policy", которая находится в футере, должна открываться страница Privacy Policy.
-
В блоке "Step-by-step" при нажатии на кнопку "Read more" происходит переход на страницу поста, который представлен на экране На странице расположен список постов с разными категориями. С помощью кнопок prev/next можно листать список постов. При нажатии на любой из постов, открывается страница Blog Post, на которой для каждого из постов располагается своё содержимое. В блоке "All Categories" при нажатии на определенную категорию, пользователь попадает на страницу Category. В блоке "Join our team to be a part of our story" при нажатии на кнопку "Join Now" пользователь попадает на Contact.
-
На данной странице помимо содержимого определенного поста, в блоке "What to read next" находится список с постами с той же категорией, что и основной пост на странице. В блоке "Join our team to be a part of our story" при нажатии на кнопку "Join Now" пользователь попадает на страницу Contact. В блоке "Subscribe to our news letter" должна быть реализована форма отправки сообщения на электронную почту пользователя.
-
В блоке "List of Authors" находится список авторов, при нажатии на определенного автора, открывается страница с информацией о нём на странице About Us. Каждая из иконок социальных сетей является уникальной для каждого автора. В блоке "Join our team to be a part of our story" при нажатии на кнопку "Join Now" пользователь попадает на страницу Contact.
-
На данной странице расположен список постов с той же категорией, которую первоначально выбрал пользователь на странице Blog. К каждому посту привязаны один и более тегов. В блоке "Search for tag..." можно найти посты с определенным тегом, который введет пользователь. Такой поиск реализован с помощью elastic search. В блоке "Categories" при выборе категории должен отображаться список постов с выбранной категорией. В блоке "All Tags" происходит поиск постов по тегу, таким образом происходит дополнительная фильтрация постов с текущей категорией. Если же пользователь ввел определенный тег в "Search for tag...", то при выборе тега в "All tags" отображение постов тоже должно измениться. Если же никаких совпадений нет, то необходимо отображать альтернативный текст на странице пользователя.
-
На данной странице отображается краткая информация об авторе и список его социальных сетей. В блоке "My Posts" отображается список его постов, если же они принадлежат автору. В случае отсутствия постов, которые принадлежат автору, если же постов нет, то должен отображаться альтернативный текст. При нажатии на один из постов, происходит переход на страницу Blog Post.
-
Данная страница хранит в себе форму для связи, которая отправляется на почту (выбранную пользователем) с заранее заготовленным текстом. Карта является интерактивной, на которой отображаются точки (минимум 3) удаленные друг от друга (точки определяет выполняющий, но они должны быть расположены в разных странах).