frontend

      

Friends App

Створіть невеличку сторінку пошуку друзів у соціальних мережах з картками користувачів, пошуком, сортуванням та фільтрацією їх за віком, прізвищем, ім’ям, або чим завгодно, за допомогою Random User API :)

Приклади

Це приклад. Ви повинні стилізувати свою програму так, як хочете.

Зробіть це особистим. Зробіть це красивим. Зробіть це ідеальним, а потім пишайтеся тим, що ви зробили.

Реалізуйте наведені нижче приклади користування.

Як користувач, я хотів би

• бачити список карток користувачів на сторінці, картки повинні бути гарно стилізовані з фотографією користувача, ім’ям, віком, номером телефону, можливо, з іншою інформацією користувача, яку ви бачите в інформаційній картці користувача
• шукати, ввівши ім’я в поле пошуку, і одразу побачити фільтрацію на сторінці
• сортувати картки за іменем/віком та за алфавітом (A-Z/Z-A)
• фільтрувати друзів за віком, іменами, будь-якими іншими параметрами
• бачити модні іконки та крутий дизайн з тінями, градієнтами, жовтим шрифтом на синьому фоні тощо. Використання шаблону цілком прийнятне

Якщо ви відчуваєте, що можете зробити роботу краще - зробіть

Зауважте, що це додаткова частина завдання. Ви можете реалізувати будь-що зі списку нижче.

Будьте як Дуров і

• додайте пагінацію до прокручування
• сортуйте не тільки за прізвищем і віком, а й за датою реєстрації
• фільтруйте за місцем розташування та електронною поштою
• створить гарний дизайн, який підходить для мобільних пристроїв - responsive/fluid/elastic/будь-що
• використовуйте async/awaits для обробки асинхронних дій

Будьте як Цукерберг і

• додайте підтримку адресного рядка, що означає, що користувач повинен бачити стан фільтрів і сортування в URL
• використовуючи свої знання ООП, розділіть свій додаток на різні частини, наприклад: FriendsList, FiltersContainer тощо.
• за допомогою модулів ES6 створіть вебсайт на основі frontend-компонентів

Ви можете

• використовувати всі Array.methods, які ви знаєте :)
• спробувати розібратися з асинхронною інкапсуляцією даних у request/response. Спробуйте логіку callbacks у дії
• зрозуміти різницю між синхронними та асинхронними network запитами
• дізнатися параметри та запити в дії
• використовувати fetch та/або XMLHttpRequest. Але НЕ jQuery. Поганий jQuery, поганий! Ніхто не любить jQuery!¯\_(ツ)_/¯
• зрозуміти плюси та мінуси імутабельності (незмінності) даних на прикладі копій масивів
• спробувати key/mouse events форм, керувати ними, вмикати та вимикати їх

Речі, які вам допоможуть

• Ми вважаємо, що для цього завдання вам потрібно буде використовувати promises ;)
• Randomuser api with awesome simple examples and docs - ви можете використовувати один із цих API для отримання даних для вашого вебсайту;
• URL API - ви можете використовувати це для роботи з URL;
• Подивіться на Array methods on learn.javascript.ru і на MDN
• Manipulating the browser history - ви повинні знати, як працювати з історією браузера.

Коли ви завершите завдання, пушніть свій код у репозиторію GitHub і опублікуйте його використовуючи GitHub Pages.

Після завершення виконайте наступне:

1. Для цього завдання вам знадобиться review коду:
   • Для студентів курсу Frontend 2022: будь ласка, дотримуйтесь цих інструкцій
   • Для студентів p2p course: будь ласка, дотримуйтесь цих інструкцій
   • Опублікуйте демо вашого проекту в Студентському чаті і попросіть про фідбек. Ліквідуйте знайдені колегами баги. В PR додайте комент, з якого було б видно, що фідбек зібрано і оброблено, а знайдені баги виправлено.
2. Чудова робота! Якщо ваш PR вже продивились ментори, узгодили та вмерджили (його статус змінено на merged з фіолетовою іконкою), то прийшов час ділитись своїми досягненнями з іншими – опублікуйте повідомлення в course channel: Friends App — #done (або Friends App — #p2p_done якщо ви студент курсу p2p) і додайте посилання до свого репо. Цей крок важливий, оскільки він допомагає наставникам відстежувати ваш прогрес!

Готово?

Congratulations! 🎉

• Ви виконали всі обов’язкові завдання?
• Перевірені практичні завдання та PR змержені в frontend-2022-homeworks repo master?

Ви закінчили Stage 0 курсу!

Розмістіть святкову наклейку або танцювальний GIF у course channel.

… і ще невелика річ. Вкажіть себе серед тих, хто закінчив Stage 0 курсу.

⤴️ Повернутися до Contents

This site is open source. Improve this page.