11 проектов, чтобы стать мастером фронтенда

Лучший способ улучшить свои знания программирования — развивать навыки на практике, уверен разработчик Сухаил Какар. В своем блоге он поделился 11 идеями проектов, реализация которых поможет вам наработать необходимый скилл и стать мастером фронтенда. Готовые проекты отлично подойдут для размещения в портфолио.

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

1. Калькулятор

Проект, который одновременно прост и практичен. В качестве примера можете оценить приложение-калькулятор разработчика Адеолы Адеоти, исходный код которого доступен по ссылке.

Чему научитесь

Создав приложение-калькулятор вы узнаете:

• как создавать многократно используемые компоненты;
• как пользоваться пропсами;
• как работать с состояниями.

Стек:

• Vue JS;
• Tailwind CSS.

Возможные особенности:

• Красивый UI;
• Темный режим;
• Адаптивность и отзывчивость.

2. Блог веб-сайта

Создание собственного блога улучшит не только навыки кодирования, но и присутствие в интернете. Если у вас есть блог и вы регулярно делитесь на нем контентом, можете получить большое количество посетителей.

Чему научитесь

Создав блог с нуля вы узнаете о:

• стилизованных компонентах;
• маршрутизации в Next JS;
• реализации MDX;
• использовании динамических маршрутов.

Стек:

• Next.js;
• React.js;
• стилизованные компоненты;
• MDX.

Возможные особенности:

• адаптивность и отзывчивость;
• темный режим.

3. Приложение «Погода»

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

Чему научитесь

Благодаря созданию такого приложения вы узнаете:

• об извлечении данных из API;
• отправке данных в API;
• отображении данных;
• создании динамических страниц.

Стек:

• React.js;
• Tailwind CSS;
• Axios.

Возможные особенности:

• адаптивность и отзывчивость;
• красивый UI;
• точный прогноз на ближайшие дни.

4. Spotify 2.0

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

Чему научитесь

Создав собственную версию Spotify вы узнаете:

• как получать данные из API;
• как обрабатывать динамические маршруты;
• как настраивать аутентификацию.

Стек:

• Next.js;
• Tailwind CSS;
• Axios;
• Auth0.

Возможные особенности:

• адаптивность и отзывчивость;
• темный режим;
• красивый UI;
• аутентификация;
• профиль пользователя;
• отображение текста песни;
• скачивание материала.

5. Приложение для просмотра фильмов и сериалов

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

Чему научитесь

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

• создавать повторно используемый контент;
• получать данные из API;
• создавать динамические страницы.

Стек:

• Vue.js;
• стилизованные компоненты;
• Axios;
• TMDB API.

Возможные особенности:

• адаптивность и отзывчивость;
• темный режим;
• красивый UI;
• отображение рейтинга фильмов/сериалов;
• размещение трейлеров;
• информация о жанре, актерском составе и прочих деталях фильма/сериала.

6. Клон YouTube

Если хотите разобраться в сетках и инструменте Flexbox, вам будет полезно взяться за проект по созданию копии видеохостинга YouTube. Но не стоит делать то же самое, поэкспериментируйте с дизайном, наполнением и функциями.

Чему научитесь

При создании клона пользовательского интерфейса YouTube:

• узнаете, что такое сетки и как с ними работать;
• научитесь пользоваться инструментом Flexbox.

Стек:

• Svelte;
• SMUI (Svelte Material UI).

Возможные особенности:

• отзывчивость и адаптивность;
• красивый UI.

7. Чат

Если хотите изучить Firebase, Firestone и базах данных реального времени, этот проект для вас. Он способен усилить ваше портфолио в разы.

Чему научитесь

Создание приложения чата позволит:

• изучить Firebase;
• разобраться в аутентификации;
• изучить базы данных реального времени.

Стек:

• React.js;
• Firebase;
• Material UI.

Возможные особенности:

• адаптивность и отзывчивость;
• чат в реальном времени;
• темный режим.

8. SaaS-лендинг

Проект для оттачивания навыков работы с веб-интерфейсом.

Чему научитесь

Разработка лендинга позволяет:

• улучшить навыки работы с сетками;
• флексбоксами;
• научиться создавать отзывчивые приложения.

Стек:

• Vue;
• стилизованные компоненты.

Возможные особенности:

• отзывчивость и адаптивность;
• красивый UI.

9. Таск-менеджер

Довольно-таки сложный проект, замечает автор подборки, но он стоит того.

Чему научитесь

Создав такое приложение вы:

• узнаете о маркдауне;
• разберетесь в вопросах аутентификации;
• научитесь работать с локальным хранилищем.

Стек:

• Next.js;
• Tailwind CSS;
• Auth0;
• Markdown.

Возможные особенности:

• адаптивность и отзывчивость;
• todo-список;
• создание вики (с помощью маркдауна).

10. UI для сайта электронной коммерции

Проект для отработки навыков фронтенда.

Чему научитесь

Разработав UI вы:

• узнаете о повторно используемых компонентах;
• научитесь управлять состоянием приложения.

Стек:

• Svelte;
• Sveltestrap.

Возможные особенности:

• адаптивность и отзывчивость;
• красивый UI.

11. Админ-панель

Создание панели администрации позволит отработать навыки работы с веб-интерфейсом.

Чему научитесь

После разработки панели администратора вы узнаете:

• как создавать типы компонентов;
• как повторно использовать в нужном месте;
• как сделать страницу адаптивной.

Стек:

• React.js
• SCSS;
• React Bootstrap.

Возможные особенности:

• адаптивность и отзывчивость;
• красивый UI;
• темный режим.