Tестовое задание приложение Modsen Twitter

Содержание

Техническое задание
Необходимый функционал
Пример графического представления
Используемые технологии
Тестирование
Полезные ссылки

Техническое задание

Реализовать приложение, схожее по своей функциональности с платформой Twitter.

Необходимый функционал:

авторизация пользователя;
регистрация пользователя;
возможность создания нового tweet;
поиск других tweets;
валидация введенных данных;
изменение данных пользователя;
смена темы приложения.

Дополнительные указания

Реализация Loader для отображения запасного UI при подгрузке данных;
Использование библиотек для стилей запрещены;
Все данные о пользователе, tweets хранятся в firebase.

Пример графического представления:

Ссылка на макет: Макет "Modsen Twitter".

Также проект предполагает:

Организацию файловой структуры react приложения. Ссылка на структуру: Cтруктура проекта;
Придерживаться требований по написанию и организации кода react приложения. Ссылка на требования: Требования к тестовому заданию;
Деплой приложения на платформу GitHub Pages или иные другие (Netlify, ...);
Настроить конфигурации babel, eslint;
Использование TypeScript для типизирования и уменьшения количества потенциальных багов;
Обработку ошибок через паттерн Error Boundaries;
Использование алиасов для импортирования файлов;
Оптимизацию дизайна под мобильные устройства;
Покрытие тестами всего приложения (cypress, unit);
Обязательную анимацию при наведения, нажатии на кнопки, прокрутки карусели и слайдеров, появлении элементов на странице при рендере и скролле.

Описание экранов

Страница Sign Up

На данной странице пользователь может ввести свое имя и номер телефона, дату рождения для того, чтобы зарегистрироваться. Все поля должны быть обязательными. При нажатии на "Use email" пользователя переходит на страницу авторизации. На этой странице пользователь может зарегистрироваться с помощью google-аккаунта или перейти на страницу регистрации

Страница Log In

На данной странице пользователь может зайти в аккаунт введя свой логин или телефон. В случае того, если аккаунта не существует, оповестить об этом пользователя. При нажатии на "Sign up to Twitter" пользователь переходит на страницу авторизации.

Страница Profile

На странице профиля отображается информация о пользователе. При нажатии на edit profile открывается модальное окно в котором можно добавить/изменить данные о пользователе: имя, фамилия, пароль, пол, ссылка на телеграмм. В категории "What’s happening" можно создать новый пост, также есть возможность добавить картинку, поставить лайк и удалить созданный tweet. В категории Tweets отображаются созданные пользователем посты. В поле ввода Search Input можно ввести название tweet и в списке должен появиться tweet, при нажатии на который он открывается в новом окне. При нажатии на Tweet(в сайдбаре) открывается модальное окно, в котором можно также создать новый tweet(также с добавление картинки). Также предусмотрена возможность выхода из аккаунта.

Страница Feed

В шапке страницы есть возможность сменить общую тему приложения. На странице есть возможность создать новый твит, который добавится на текущей странице и на странице самого пользователя, а также отображаются посты других пользователей. В поиске Search Twitter происходит список пользователей Twitter(поиск должен происходить на стороне firebase и была возможность у твитов поставить лайк).

Страница icons содержит вспомогательные иконки для приложения.

Используемые технологии

Для react

node.js - программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код);
babel - транспайлер, преобразующий код из одного стандарта в другой;
eslint - линтер для JavaScript кода;
firebase - платформа для разработки приложений, предоставляет облачное хранилище, аналитику и многое другое;
yarn - менеджер пакетов;
react-hook-forms - библиотека для обработки элементов ввода формы;
styled-components - система стилизации react компонентов;
react - JavaScript-библиотека для создания пользовательских интерфейсов;
typescript - строго типизированный язык для уменьшения количества потенциальных багов;
vite - сборщик модулей, который позволяет скомпилировать JavaScript-модули в единый JS-файл;
cypress — e2e тестирование для web-приложений;
jest — unit-тестирование.