9 июля

Фронтенд-тренировка: делаем клоны Discord, Jira, SoundCloud, Apple Stock, шахмат, озвучки и курсов валют

Блог компании SkillFactoryРазработка веб-сайтовПрограммированиеУчебный процесс в IT
Перевод
Автор оригинала: Indrek Lasn
Предлагаем вашему вниманию идеи/задачи (не решения) для самостоятельного изучения и оттачивания мастерства.

image

Клон SoundCloud


SoundCloud — это онлайн-платформа для распространения аудио и обмена музыкой. Сайт позволяет загружать песни, лайкать их и делиться ими.

image

Чему вы научитесь, создав клон SoundCloud:

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

Клон Jira


Jira используется для отслеживания ошибок, контроля проблем и управления проектами. Название «Jira» на самом деле происходит от японского слова «Gojira», которое означает «Годзилла».

image

Чему вы научитесь, создав клон Jira:

  • API Drag and Drop в HTML.
  • Формированию ролей и прав пользователей.
  • Назначению и переназначению задач между различными пользователями.
  • Пометке задач как завершенных, а также архивированию, удалению и редактированию различных задач.

Клон Apple Stocks


Apple Stocks позволяют с легкостью следить за акциями и фондовым рынком. Просматривайте котировки и ежедневную динамику в настраиваемом списке, а также нажимайте на любой пункт, чтобы увидеть интерактивную диаграмму и ключевые детали.

image

Чему вы научитесь, создав клон Apple Stocks:

  • Как асинхронно получать цены акций через API.
  • Как создавать графики цен акций.
  • Отправке ценовых уведомлений. Так, например, если курс акций вырос или упал на 10%, отправьте оповещение.
  • Список любимых акций, за которыми вы активно следите.

Используйте этот API для получения информации о ценах акций. Если вы знаете бесплатный и публичный API для рынка акций, пожалуйста, разместите его в комментариях ниже.

Клон шахмат


Шахматы — это настольная стратегическая игра для двух игроков, в которую играют на клетчатой доске с 64 клетками, расположенными в сетке 8х8.

image

Чему вы научитесь, построив клон шахмат:

  • Как отображать сетку 8х8.
  • Каждая фигура имеет определенные правила, диктующие, как она может перемещаться по шахматной доске. Следовательно, необходимо реализовать критическую для игры логику, чтобы игра соответствовала традиционным шахматным правилам. Вот правила игры в шахматы.
  • API Drag and Drop в HTML.
  • Как следить за очками, вести учет побед, поражений и ничьих. Как хранить результаты в базе данных типа PostgreSQL.

Озвучиватель текста


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

image

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

  • Как использовать Web Speech API.
  • Как создать отзывчивый пользовательский интерфейс.
  • Как переключаться между различными голосами и акцентами.

Калькулятор курсов валют


Калькулятор курсов валют вычисляет разницу между двумя или более валютами и их курсами.

image

Чему вы научитесь, построив клон калькулятора валют:

  • Как получать курсы валют из API – используйте этот API.
  • Как отображать стоимость и курсы обмена для обеих валют.
  • Как обновлять значения в реальном времени в зависимости от изменения стоимости валюты.

Клон Discord


Discord — это голосовой и текстовый чат, объединяющий «все в одном» для геймеров, при этом он бесплатен, безопасен и работает как в настольной версии, так и на смартфонах. Discord чрезвычайно популярен для общения среди разработчиков, геймеров и обычных пользователей.

image

Чему вы научитесь, построив клон Discord:

  • API вебсокетов. Вебсокеты используются в чатах для общения в реальном времени.
  • Формированию различных пользовательских ролей и разрешений (например, администраторы, модераторы контента и обычные пользователи).
  • Активации микрофонов и запуску голосовой связи.
  • Созданию нескольких чатов и использованию нескольких вебсокетов.

image

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



Полезное


Теги:учебный процесс
Хабы: Блог компании SkillFactory Разработка веб-сайтов Программирование Учебный процесс в IT
+2
3,9k 72
Комментарии 1
Похожие публикации
Лучшие публикации за сутки