HimeraSearchDB
Carding_EbayThief
triada
CrackerTuch
BMIX
issn24

НОВОСТИ [Перевод] Задачи для фронтенд-тренировки: реализуем отдельные элементы интерфейсов YouTube, Instagram, Spotify, GitHub

Alvaros
Онлайн

Alvaros

.
Регистрация
14.05.16
Сообщения
21.452
Реакции
101
Репутация
204
-ny6tulfdgq2zdlp12-cix7as2i.jpeg


Лето. Вот список веселых и интересных идей для тренировки навыков программирования.

Приведенный список — это вызовы вашему мастерству, средство вдохновения, а не пошаговое руководство по разработке перечисленных проектов.

Клон чата на YouTube (только чат)


Я выбрал эту задачу, так как YouTube так распространен, и любой приличный работодатель потребует от вас реализовать аналогичные функции, хотя и в гораздо меньшем масштабе.

ae735ac9da24aab5bd9f4fe8447b15e4.png


Вот чему вы научитесь, построив клон чата на YouTube.

  • Использованию
    You must be registered for see links
    . В двух словах, вебсокеты — это продвинутая технология, позволяющая открывать двусторонний интерактивный сеанс связи между браузером пользователя и сервером.
  • Авторизации пользователей. Вам необходимо раздавать ники пользователям чата и реализовать простую регистрацию.
  • Обработке форм. По сути, абсолютно все чаты являются не более чем сложными формами.


Клон Instagram (Галерея изображений + раздел комментариев)


Instagram действительно хорошо захватывает наше внимание множеством картинок. Никто не заходит в Instagram, чтобы читать лонгриды. Так что давайте попробуем подражать той части, которая в Instagram работает действительно хорошо: речь о галерее изображений и предоставлении пользователям возможности общаться через комментарии.

e8db48fe26657b766b2bb91621a83d8c.png


Вот чему вы научитесь, реализовав галерею изображений как в Instagram.

  • Обработке и загрузке изображений без потерь в облачные сервисы вроде AWS, Azure, Google Cloud Platform и др. Готов поспорить, что в Instagram более 1 миллиона загрузок изображений в день. Ни одна фотография не может быть искажена или потеряна — это большая задача.
  • Работе с изображениями, их эффективный рендеринг в браузере без ущерба для качества и скорости.
  • Авторизации пользователей. Позволяет пользователям регистрироваться и оставлять комментарии к изображениям.


Генератор названий для бизнеса


Shopify имеет кучу бесплатных инструментов, доступных для предпринимателей, и один из них – генератор фирменных наименований. Генератор бизнес-имен делает именно то, чего вы от него ожидаете – он генерирует названия для бизнеса и проверяет доступность соответствующего домена.

23fbfa905a1d058704c91d0c6778074e.png


Вот чему вы научитесь, построив генератор бизнес-имен:

  • Проверке доступных доменных имен (DNS) с помощью API-запросов и предоставлению результатов пользователю.
  • Обработке и проверке форм. Если вы еще не заметили, формы — это большая часть нашей повседневной жизни. Убедитесь, что они заполняются корректно.
  • Заполнению и отображению таблиц с данными. Если у вас есть соответствующий опыт, постарайтесь сделать таблицы адаптивными и работающими на мобильных устройствах.


Экран просмотра альбома в Spotify


Дизайн и проработка пользовательского опыта сделали Spotify глотком свежего воздуха. Причина популярности Spotify заключается в простоте и интуитивности интерфейса. Кроме того, Spotify быстро работает и имеет изящный дизайн.

7effcb67a4a0227fb5dfde1a29acbba5.gif


Вот чему вы научитесь, создав экран просмотра альбома из Spotify:

  • Получению песен и альбомов (и данных о них) через API Spotify.
  • Работе с
    You must be registered for see links
    . Вам нужен способ проигрывать и ставить песни на паузу.
  • Как ставить лайки песням, помещать их в избранное и создавать списки воспроизведения.


Генератор QR-кодов


Используйте QR-коды для привлечения интереса клиентов, увеличения трафика и повышения продаж через печать, электронную почту или веб.

934d95c38a184a7a4ba7e3c79bb4c948.png


Демонстрационное приложение берет электронное письмо и URL-адрес, и встраивает их в QR-код.

Вот чему вы научитесь, создав генератор QR-кодов.

  • Основам фронтенд-разработки – речь о работе с HTML, CSS и JavaScript.
  • Обработке форм и пользовательского ввода. Пользователь указывает входные данные, а вы помещаете их в QR-код.
  • Наконец, вы научитесь работать с QR-кодами и рисовать их на Canvas в JavaScript. Для этого следует использовать уже существующую библиотеку (это можно сделать и с нуля).


Клон профилей на GitHub


На странице вашего профиля в GitHub вы можете рассказать людям о своей работе, показав интересующие вас репозитории, а также о том, какой вклад вы внесли, и о том, как вы общались.

c3fc8c34c633ecf2222c675762ae0919.png


Вот чему вы научитесь, реализовав профили, как на GitHub:

Как использовать GraphQL для получения данных (
You must be registered for see links
). Если вас не интересует изучение GraphQL,
You must be registered for see links
.

Воссозданию шаблона профиля. Попробуйте использовать такие фреймворки, как React.js, Vue.js, Svelte.js, Angular и др. Нет неверного фреймворка. Они все позволяют достичь одной и той же цели.

rdkllrbtrth_kdpceb-vxzrxl1o.jpeg


Узнайте подробности, как получить востребованную профессию с нуля или Level Up по навыкам и зарплате, пройдя платные онлайн-курсы SkillFactory:

  • You must be registered for see links
    (8 месяцев)
  • You must be registered for see links
    (9 месяцев)
  • You must be registered for see links
    (7 месяцев)

Ещё курсы
  • You must be registered for see links
    (12 недель)
  • You must be registered for see links
    (12 месяцев)
  • You must be registered for see links
    (9 месяцев)
  • You must be registered for see links
    (9 месяцев)
  • You must be registered for see links
    (12 месяцев)

Полезное


  • You must be registered for see links
  • You must be registered for see links
  • You must be registered for see links
  • You must be registered for see links
  • You must be registered for see links
 
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу