Задачи для фронтенд-тренировки: реализуем отдельные элементы интерфейсов YouTube, Instagram, Spotify, GitHub

Автор оригинала: Indrek Lasn
  • Перевод
image

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

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

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


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

image

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

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


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


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

image

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

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


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


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

image

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

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


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


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

image

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

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


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


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

image

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

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

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


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


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

image

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

Как использовать GraphQL для получения данных (последний API GitHub использует GraphQL). Если вас не интересует изучение GraphQL, API третьей версии использует более традиционный REST API.

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

image

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



Полезное


SkillFactory
Онлайн-школа Data Science и разработки

Комментарии 2

    +1

    дада удачи вам с чатом
    прям только сейчас из соседней темы:


    расскажите лучше как вы победили скрол в чате.
    99% людей скажут скрол есть скрол, но только 1% кто работал с чатами знает что это самая серьезная проблема.
    Например позиции скрола чтобы контент не прыгал:
    1) топ позиция, добавление сообщений в начало, контент прыгает! как боролись?
    Для загрузки предыдущий следующий коментарией, обычно делает observer триггер после последнего сообщения и перед первым. Так вот при первой загрузки, если отображается порция сообщений из центра, добавляются тригеры, но как мы знает при добавление сообщений в пустой чат, по дефолту скрол будет всегда в позиции низ,
    2) как вы боролись с конфликтом между добавлением в пустой чат сообщений и между бесконечным тригером "подгрузить еще", т.к. по дефолту из за особенностей выше описанных скрол будет прижат вниз.


    дада и хаки flex column reverse для фишки live сообщений, когда пользователь прокрутил в самый низ, и приходят новые сообщения из вебсокета, то нужно что бы как раз скрол прижимался вниз, а контент соответственно "прыгал"(сдвигался) вверх. И обратная ситуация, когда пользователь прокрутил в самый низ (прижал скрол вниз), но сообщение не последнее, то нужно подгрузить историю, при этом контент как раз НЕ должен сдвигаться верх.

      0
      Например позиции скрола чтобы контент не прыгал
      контент и должен прыгать, ведь если я нахожусь в конце чата, и мне приходит сообщение, то я бы хотел что бы контент подпрыгнул и показал мне это сообщение.
      Но со скролом, когда добавляешь в конец или начало, все и так ясно, хуже всего когда добавляешь элемент в центр контента.
      2. как вы боролись с конфликтом между добавлением в пустой чат сообщений и между бесконечным тригером «подгрузить еще», т.к. по дефолту из за особенностей выше описанных скрол будет прижат вниз.
      а почему это проблема то? В чем проблема поставить дополнительный флаг?

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Самое читаемое