Найти тему
Proзнания

9 проектов, которые вы можете сделать, чтобы стать Front-End мастером в 2023 году

Оглавление

Введение

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

Возьмем, к примеру, React – открытый всего четыре года назад Facebook стал выбором номер один для JavaScript-разработчиков по всему миру.

Vue и Angular, конечно, также имеют своих последователей. Есть еще Svelte и универсальные фреймворки, такие как Next.js или Nuxt.js. И Gatsby, и Gridsome, и Quasar и т. д.

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

Чтобы помочь вам стать мастером front-end, я собрал девять проектов, каждый из которых посвящен определенной теме и различным фреймворкам или библиотекам JavaScript в качестве технологического стека, который вы можете создать и добавить в свое портфолио. Помните, ничто не поможет вам больше, чем реальные проекты, так что вперед, отточите свой ум и сделайте это.

Создание приложения для поиска фильмов с помощью React (с крючками)

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

-2

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

Создавая это приложение, вы улучшите свои навыки работы с React при помощи относительно нового API Hooks. В примере проекта используются компоненты React, множество хуков, внешний API и, конечно, некоторые стилизации с помощью CSS.

Технологический стек и возможности

  • React с крючками
  • Create-react-app
  • JSX
  • CSS

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

Пример проекта вы можете найти здесь. Следуйте этому руководству или сделайте его по своему вкусу.

Создание приложения для чата с помощью Vue

Еще один замечательный проект – это создание приложения для чата с помощью моей любимой библиотеки JavaScript: VueJS.

Приложение будет выглядеть примерно так:

-3

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

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

Технологический стек и возможности

  • Vue
  • Vuex
  • Vue Router
  • Vue CLI
  • Pusher
  • CSS

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

Создание красивого погодного приложения с помощью Angular 8

Этот пример поможет вам создать красивое погодное приложение с помощью Angular 8 от Google:

-4

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

Этот проект научит вас ценным навыкам при создании приложения с нуля, начиная с проектирования и заканчивая разработкой.

Технологический стек и возможности

  • Angular 8
  • Firebase
  • Рендеринг на стороне сервера
  • CSS с Grid Layout и Flexbox
  • Удобство для мобильных устройств и отзывчивость
  • Темный режим
  • Красивый пользовательский интерфейс

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

Создание приложения для выполнения дел с помощью Svelte

Svelte – новичок на рынке, по крайней мере, по сравнению с React, Vue и Angular. Тем не менее, он является одним из самых популярных в 2023 году.

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

-5

Что вы узнаете

В этом уроке вы узнаете, как создать приложение с помощью Svelte 3 от начала до конца. В нем используются компоненты, стилизация и обработчики событий.

Технологический стек и особенности

  • Svelte 3
  • Компоненты
  • Стилизация с помощью CSS
  • Синтаксис ES 6

Существует не так много хороших стартовых проектов по Svelte, поэтому я считаю этот неплохим для начала.

И, кто знает, может быть, именно вы создадите другой, более полный урок по Svelte, который будет представлен в следующей версии этого поста?

Создание корзины для электронной коммерции с помощью Next.js

Next.js – это самый популярный фреймворк для создания приложений React, которые поддерживают рендеринг на стороне сервера.

Этот проект покажет вам, как разработать корзину для электронной коммерции, которая выглядит следующим образом:

-6

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

В этом проекте вы узнаете, как настроить среду разработки Next.js – создание новых страниц и компонентов, получение данных, стилизация и развертывание приложения Next.

Технологический стек и возможности

  • Next.js
  • Компоненты и страницы
  • Сбор данных
  • Стилизация
  • Развертывание
  • SSR и SPA

Было бы хорошо иметь реальный пример, такой как витрина электронной коммерции, чтобы узнать что-то новое.

Создание полноценного мультиязычного сайта-блога с помощью Nuxt.js

Nuxt.js для Vue – то же самое, что Next.js для React: отличный фреймворк для объединения возможностей рендеринга на стороне сервера и одностраничных приложений.

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

-7

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

Этот проект научит вас создавать полноценный веб-сайт с помощью Nuxt.js от начальной настройки до окончательного развертывания.

В нем используются многие возможности Nuxt, такие как страницы и компоненты, а также стилизация с помощью SCSS.

Технологический стек и возможности

  • Nuxt.js
  • Компоненты и страницы
  • Модуль Storyblok
  • Миксины
  • Vuex для управления состояниями
  • SCSS для стилизации
  • Промежуточные модули Nuxt

Это действительно классный пример, который охватывает многие из замечательных возможностей Nuxt.js. Мне лично нравится работать с Nuxt, поэтому вам стоит попробовать этот проект. Он сделает вас лучшим разработчиком Vue.

Создайте блог с помощью Gatsby

Gatsby – это отличный генератор статических сайтов, который использует React и GraphQL. Вот результат этого проекта:

-8

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

В этом руководстве вы узнаете, как использовать Gatsby для создания выдающегося блога, который вы будете использовать для написания своих статей, используя при этом React и GraphQL.

Технологический стек и возможности

  • Gatsby
  • React
  • GraphQL
  • Плагины и темы
  • MDX/Markdown
  • Bootstrap CSS
  • Шаблоны

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

Я не говорю, что WordPress – плохой выбор, но с Gatsby вы можете создавать высокопроизводительные сайты, используя React – а это потрясающая комбинация.

Создание блога с помощью Gridsome

Gridsome – это Vue ... Ок, мы уже использовали его в Next/Nuxt.

Но то же самое верно и для Gridsome и Gatsby. Оба используют GraphQL в качестве слоя данных, но Gridsome использует VueJS. Это также потрясающий генератор статических сайтов, который поможет вам создавать отличные блоги:

-9

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

Этот проект научит вас создавать простой блог для начала работы с Gridsome, GraphQL и Markdown.

В нем также рассказывается о том, как развернуть приложение с помощью Netlify.

Технологический стек и возможности

  • Gridsome
  • Vue
  • GraphQL
  • Markdown
  • Netlify

Это, конечно, не самый полный урок, но он охватывает основные концепции Gridsome и Markdown и может стать хорошей отправной точкой.

Создание аудиоплеера, подобного SoundCloud, с помощью Quasar

Quasar – это еще один фреймворк Vue, который также можно использовать для разработки мобильных приложений.

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

-10

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

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

У вас уже должна быть рабочая установка Cordova с настроенным Android Studio/Xcode. Если нет, то в учебнике есть ссылка на сайт Quasar, где показано, как это настроить.

Технологический стек и возможности

  • Quasar
  • Vue
  • Cordova
  • WaveSurfer
  • Компоненты пользовательского интерфейса

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

Заключение

В этой статье я показал вам девять проектов, которые вы можете создать. Каждый из них сосредоточен на одном фреймворке или библиотеке JavaScript.

Теперь выбор за вами: Попробуете ли вы что-то новое при помощи фреймворка, который вы раньше не использовали? Или вы хотите укрепить свои навыки, выполнив проект, в котором вы уже немного разбираетесь? Или вы будете полагаться на свой любимый фреймворк/библиотеку и делать все проекты в 2023 году с его помощью?

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