Читати іншою мовою: Українська, English.
- Проект зібраний за допомогою create-react-app.
- Компоненти створені з використанням бібліотеки MUI
- В якості
backend
використано mockapi.io - Бібліотеки управління станом не використовувались. Всі необхідні дані для коректної роботи додатку
зберігаються в
localStorage
- Головна сторінка з коротким описом про додаток
- Сторінка
Tweets
, на якій відображаються картки з інформацією проtweet
(імʼя, кількість твіттів, підписників та кнопка Follow з можливістю підписатись наtweet
) - Пагінація як, при запиті на
backend
, так і при відмалюванні карток на сторінці - Кнопа
back
для повернення на попередню сторінку Dropdown
з можливістю фільтрації карток за станомfollow
- Автоматичне перенаправлення користувача у випадку переходу на неіснуючій
route
- Кнопка
load more
для отримання додатковихtweets
. У випадку, коли отримано всі існуючіtweets
- кнопка не відображається - Збереження стану
filter
при оновленні сторінки, або переході на іншу - Інофрмація про стано 'follow' зберігажться не на
backend
, а у кожного користувача локально, що дає змогу користуватись додатком одночасно декільком користувачам (див. приклад далі)
Мета: створити картки твітів та додати інтерактивності при клікові на кнопку.
Загальний вигляд картки у двох станах - Follow
та Following
- Верстка фіксована в
рх
, семантична та валідна. - Немає помилок в консолі браузера.
- Робота виконана на нативному
JS
з використанням зборщиків або наReact
. - Інтерактивність працює відповідно до технічного завдання.
- Код відформатований та без коментарів.
- В репозиторії має бути описаний
README.md
. Коротка стаття, з рекомендаціями щодо оформлення..
- Відповідно до макету потрібно реалізувати картки юзера.
- При клікові на кнопку
Follow
- текст змінюється наFollowing
. Також змінюється колір кнопки. А до кількості фоловерів додається і ваш. Тобто, початкова кількість складає 100,500 фоловерів. При клікові на кнопку буде 100,501. - При оновлені сторінки має фіксуватись кінцевий результат дій юзера. Тобто, якщо клікнути по
кнопці і оновити сторінку - то кнопка все рівно залишається в стані
Following
із відповідним кольором, а кількість фоловерів НЕ зменшується до початкового значення. - При повторному клікові на кнопку її текст та колір змінюються до початкового стану. Також змінюється і кількість фоловерів. Вона зменшується на 1 (100,500).
- В коді цифра 100,500 має бути прописана одним значенням (100500). В UI - виведено через кому (100,500).
- Створи свій персональний бекенд для розробки за допомогою UI-сервісу
mockapi.io
. Створи ресурсusers
. - Використай конструктор ресурсу та опиши об'єкт юзера, як описано вище.
-
Створюєте локальну базу даних (окремий файл
json
) з наступними полями:id
,user
,tweets
,followers
,avatar
(див. код нижче).
- Зображення аватарів мають бути прописані окремими url у властивості
avatar
. Можете підібрати їх самостійно. - Має бути від 30 юзерів з різними даними (на ваш розсуд) в базі. Зроби пагінацію. На одній
сторінці пагінації має відображатися від 8 до 12 твітів, решта підгружатись при натисканні
Load More
- Відповідно до бази потрібно згенерувати відповідну кількість карток на фронт-частині застосунку.
- Кожна картка має бути незалежною функціонально одна від одної.
- Решта вимог аналогічні до вищеописаного технічного завдання.
[
{
"id": 1,
"user": "Elon Reeve Musk",
"tweets": 777,
"followers": 100500,
"avatar": "url.jpg"
}
]
За виконання вам будуть нараховані додаткові бали! Без виконання додаткового завдання ви не зможете отримати максимальний бал.
- Створи маршрутизацію, використовуючи
React Router
. - У застосунку повинні бути такі маршрути. Якщо користувач зайшов за неіснуючим маршрутом, його необхідно перенаправляти на домашню сторінку.
'/'
– компонентHome
, домашня сторінка. (Стилізація та оформлення на ваш розсуд);'/tweets’
- компонентtweets
, сторінка із відображенням твітів На сторінціtweets
має бути кнопкаBack
, яка веде на головну сторінку.
Додай фільтрацію. Це має бути Dropdown
із 3 опціями (оформлення на ваш розсуд): show all
,
follow
, followings
show all
- показати всі твіти.follow
- показати твіти, у яких станfollow
.followings
- показати твіти, у яких станfollowing