https://github.com/secondthunder/modsen-client-blog
https://github.com/secondthunder/modsen-client-blog
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/secondthunder/modsen-client-blog
- Owner: SecondThundeR
- Created: 2023-11-01T10:28:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-17T19:22:49.000Z (over 1 year ago)
- Last Synced: 2023-11-18T12:17:42.606Z (over 1 year ago)
- Language: TypeScript
- Size: 20.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tестовое задание Modsen Client Blog
## Техническое задание
Необходимо реализовать 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](https://github.com/features/actions).
- Собрать проект с нуля (с настройками всех конфигов: eslint, prettier, husky)
### Пример графического представления
Ссылка на макет: [Макет "Modsen Client Blog"]().
### Также проект предполагает
- Организацию файловой структуры описанной в [structure](https://github.com/mkrivel/structure);
- Придерживаться требований по написанию и организации кода react приложения. Ссылка на требования: [Требования к тестовому заданию](https://github.com/annaprystavka/requirements);
- Обработку ошибок через паттерн _"Error Boundaries"_;
- Использование TypeScript для типизирования и уменьшения количества потенциальных багов;
- Использование алиасов для импортирования файлов;
- Реализация должна быть выполнена без использования UI библиотек;
- Обязательная валидация всех текстовых полей с использованием _zod_;
- Оптимизацию дизайна под мобильные устройства;
- Покрытие тестами всего приложения (cypress, jest);
- Создание UI библиотеки компонентов, используя storybook;
- Обязательную анимацию при наведения, нажатии на кнопки, прокрутки карусели и слайдеров, появлении элементов на странице при рендере и скролле;
- Творчество в контексте анимации, помимо обязательной выше, приветствуется.
## Описание экранов
1. [Главная Home]().
Все страницы включают в себя верхний блок, который предполагает реализацию перехода между страницами и при нажатии на кнопку "Video about us" открывается модальное окно, в котором сразу начинает проигрываться видео(выбранное выполняющим).
На странице необходимо реализовать загрузку контента с помощью infinity scroll.
В блоке "Step-by-step" при нажатии на кнопку "read more" происходит переход на страницу поста, который представлен на [экране](https://www.figma.com/file/fhmK69xjYdFpfoVhY7t6u1/Client-Blog-Modse-Template?node-id=14%3A919&t=5YoUOACNZ3dRVibl-0).
В блоке "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.
2. [Главная Blog]().
В блоке "Step-by-step" при нажатии на кнопку "Read more" происходит переход на страницу поста, который представлен на [экране](https://www.figma.com/file/fhmK69xjYdFpfoVhY7t6u1/Client-Blog?node-id=2%3A323&t=mb2rG2iYAU6MVs3n-0)
На странице расположен список постов с разными категориями. С помощью кнопок prev/next можно листать список постов.
При нажатии на любой из постов, открывается страница Blog Post, на которой для каждого из постов располагается своё содержимое.
В блоке "All Categories" при нажатии на определенную категорию, пользователь попадает на страницу Category.
В блоке "Join our team to be a part of our story" при нажатии на кнопку "Join Now" пользователь попадает на Contact.
3. [Главная Blog Post]().
На данной странице помимо содержимого определенного поста, в блоке "What to read next" находится список с постами с той же категорией, что и основной пост на странице.
В блоке "Join our team to be a part of our story" при нажатии на кнопку "Join Now" пользователь попадает на страницу Contact.
В блоке "Subscribe to our news letter" должна быть реализована форма отправки сообщения на электронную почту пользователя.
4. [Главная About Us]().
В блоке "List of Authors" находится список авторов, при нажатии на определенного автора, открывается страница с информацией о нём на странице About Us.
Каждая из иконок социальных сетей является уникальной для каждого автора.
В блоке "Join our team to be a part of our story" при нажатии на кнопку "Join Now" пользователь попадает на страницу Contact.
5. [Главная Category]().
На данной странице расположен список постов с той же категорией, которую первоначально выбрал пользователь на странице Blog.
К каждому посту привязаны один и более тегов. В блоке "Search for tag..." можно найти посты с определенным тегом, который введет пользователь.
Такой поиск реализован с помощью elastic search. В блоке "Categories" при выборе категории должен отображаться список постов с выбранной категорией.
В блоке "All Tags" происходит поиск постов по тегу, таким образом происходит дополнительная фильтрация постов с текущей категорией.
Если же пользователь ввел определенный тег в "Search for tag...", то при выборе тега в "All tags" отображение постов тоже должно измениться.
Если же никаких совпадений нет, то необходимо отображать альтернативный текст на странице пользователя.
6. [Главная Author]().
На данной странице отображается краткая информация об авторе и список его социальных сетей.
В блоке "My Posts" отображается список его постов, если же они принадлежат автору.
В случае отсутствия постов, которые принадлежат автору, если же постов нет, то должен отображаться альтернативный текст.
При нажатии на один из постов, происходит переход на страницу Blog Post.
7. [Главная Contact]().
Данная страница хранит в себе форму для связи, которая отправляется на почту (выбранную пользователем) с заранее заготовленным текстом.
Карта является интерактивной, на которой отображаются точки (минимум 3) удаленные друг от друга (точки определяет выполняющий, но они должны быть расположены в разных странах).
8. [Главная Privacy Policy]().
## Полезные ссылки
[React](https://reactjs.org/docs/getting-started.html)
[React hooks](https://reactjs.org/docs/hooks-intro.html)
[React redux](https://react-redux.js.org/introduction/quick-start)
[NextJS](https://nextjs.org/docs)
[Тестирование Cypress](https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell)
[Тестирование Jest](https://jestjs.io/ru/docs/getting-started)
[Email-js](https://www.emailjs.com/docs/examples/reactjs/)
[SCSS](https://sass-lang.com/documentation/)
[zod](https://www.npmjs.com/package/zod)
[Storybook](https://dev.to/iamrishupatel/how-to-create-a-react-component-library-using-storybook-typescript-scss-and-rollup-4pin)
[Next-i18next](https://github.com/i18next/next-i18next)
[GitHub Actions](https://github.com/features/actions)
[Heroku](https://devcenter.heroku.com/articles/heroku-cli)