График цен на акции в стиле Robinhood
Robinhood имеет красивый график для отображения цен на различные акции. По мере перемещения по графику, бегущая строка меняется с помощью прокручивающейся текстовой анимации. Если вам интересно как создать такую анимацию, то этот репозиторий может быть чрезвычайно полезен.
Чему вы научитесь, построив график цен на акции в стиле Robinhood:
- Как получать данные о ценах акций через API.
- Как отображать график с различными временными шкалами (например, отображать цены за 3 месяца, полгода, год и т.д.)
- Воссозданию анимации с прокручивающейся стоимостью.
Вы можете использовать этот API для получения котировок акций. Если вы знаете лучший API, который можно использовать бесплатно, разместите его в комментариях ниже.
Клон CodeSandbox
CodeSandbox это онлайн-редактор кода и инструмент прототипирования, позволяющий ускорить создание и обмен веб-приложениями.
Не переусложняйте, постарайтесь реализовать только самые основные функции. Сосредоточьтесь на редакторе, так как это самая полезная функция.
Чему вы научитесь, создав клон CodeSandbox:
- Как рендерить и запускать HTML, CSS и JavaScript внутри браузера.
- Как осуществлять перезагрузку с отображением изменения в реальном времени как в редакторе, так и в полном просмотре.
- Как сгенерировать встраиваемый URL. Встраивание позволяет включить сендбокс в документацию, сообщение в блоге или на сайте, используя iframe (или куда угодно, где есть поддержка Embedly, например Medium, Reddit, Trello и Notion). Вы можете показывать только код, предварительный просмотр или все вместе.
Клон Whoishiring
Whoishiring представляет наиболее релевантные вакансии в виде карты. Соискатели легко могут находить работодателей в наиболее привлекательном для них месте.
Чему вы научитесь, создав клон Whoishiring:
- Как работать с разными картами и рисовать на них.
- Работе со сложной версткой, например, с картой и боковой навигацией которые должны быть синхронизированы.
- Работе с базой данных для получения заданий. Я бы посоветовал использовать фиктивные данные, так как это всего лишь клон, ваша цель отточить навыки фронтендера.
Клон Stackoverflow (только вопросы и ответы)
Всякий раз, когда разработчики сталкиваются с проблемой, StackOverflow это первое место, куда они обращаются. Это умный друг, у которого есть все необходимые ответы!
Stackoverflow это огромный сайт, так что не пытайтесь клонировать его целиком. Начните с вопросов и ответов. Дайте пользователям возможность задавать вопросы, отвечать на них, и ставить теги.
Чему вы научитесь, построив клон StackOverflow.
- Работе с базой данных, такой как PostgreSQL или MongoDB. Вопросы и ответы должны сохраняться в базе данных и извлекаться из нее всякий раз, когда кто-то открывает ваш клон StackOverflow.
- Тегированию сообщений и реализации поиска с индексированием. Вы
должны обеспечить лаконичный, но всесторонний поиск для
пользователей. Также нужно реализовать возможность осуществлять
поиск по вопросам и ответам с помощью простых ключевых слов вроде
[react]
или[javascript]
.
Монитор времени работы сайта
Существует множество сервисов, которые позволяют вам контролировать производительность и время безотказной работы приложений. Они просты в реализации, так почему бы не построить один из них для удовольствия?
Чему вы научитесь, создав клон монитора времени работы:
- Работе с терминалом. Как пользоваться командной строкой и
проверять статус сайта. Если сайт возвращает код
200
, ничего не делайте. Если он вернет код404
или500
, сообщите об этом по электронной почте. - Построению графиков. Все хотят пользоваться интуитивно понятными и свежо выглядящими приложениями. Создавайте красивые графики для отображения состояния сервера.
Маятник Ньютона на CSS
Маятник Ньютона это устройство, которое демонстрирует сохранение импульса и энергии с помощью ряда качающихся сфер. Когда одна сфера на конце поднимается и опускается, она воздействует на неподвижные сферы, передавая через них силу, которая толкает последнюю сферу вверх.
Чему вы научитесь, построив клон маятник Ньютона:
- Работе с keyframe в CSS и созданию анимаций.
Если вы решите использовать Canvas в JavaScript, то это здорово.
Узнайте подробности, как получить востребованную профессию с нуля или Level Up по навыкам и зарплате, пройдя платные онлайн-курсы SkillFactory:
- Профессия Веб-разработчик (8 месяцев)
- Курс по Machine Learning (12 недель)
- Обучение профессии Data Science с нуля (12 месяцев)
- Профессия аналитика с любым стартовым уровнем (9 месяцев)
- Курс Python для веб-разработки (9 месяцев)
- Курс по DevOps (12 месяцев)