Реализовать приложение, схожее по своей функциональности с платформой 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 содержит вспомогательные иконки для приложения.
- 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-тестирование.
Реализовать e2e тестирование c полным покрытием функционала приложения:
- Модуль авторизации;
- Модуль регистрации;
- Модуль смены темы;
- Модуль создания нового tweet;
- Модуль данных о пользователе.