skillfactory_school 9 июл 2020 в 13:30

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

3 мин

6.1K

Блог компании SkillfactoryПрограммирование*Веб-разработка*Учебный процесс в IT

Перевод

Автор оригинала: Indrek Lasn

Предлагаем вашему вниманию идеи/задачи (не решения) для самостоятельного изучения и оттачивания мастерства.

Клон SoundCloud

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

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

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

Клон Jira

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

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

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

Клон Apple Stocks

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

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

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

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

Клон шахмат

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

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

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

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

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

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

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

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

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

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

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

Клон Discord

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

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

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