Предисловие

Привет Хабр! Эта публикация написана джуном для джунов (но возможно и специалисты более высокого уровня что-то найдут для себя / своих падаванов).

Зачем нужны pet проекты?

Для саморазвития как разработчика и закрепления изученного материала.

Если Вы днями на пролёт "штурмуете" теорию: читаете посты, смотрите туториалы, но при этом не применяете изученное на практике, то времени на освоение выбранной Вами темы понадобится в разы больше.

Для работающего разработчика pet проект отличная возможность абстрагироваться от рабочих задач и погрузиться в интересную тему. Чаще всего на разработку домашних проектов нет много времени из-за чего код нужно писать быстро и много, а информацию искать по существу не отвлекаясь на лишнее.

Для джуна без постоянного места работы, pet проект заменяет тут самую работу (со стороны разработки). Вы ставите себе задачу/цель и делаете всё возможное что бы её выполнить. При разработке Вы ещё глубже погружаетесь в тему, а иногда находите новые объекты для изучения.

Суммируя pet проекты нам нужны для:

  • изучения / закрепления нового материала;

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

  • пополнения своего портфолио;

  • (bonus) есть шанс что Ваш pet проект может кому-то приглянуться и тогда из этого можно получить финансовую выгоду.

Как выбрать и на что обратить внимание?

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

Самое главное — разработка должна приносить удовольствие. Технологии, дизайн или что-то ещё не должны вызывать у Вас отвращение, иначе такой pet проект может остановиться на этапе первого коммита.

Технологии

Раз Вы выбрали определенные технологии для своего домашнего проекта, то скорее всего они Вас интересуют и проблема приведенная выше Вас не касается. (Или же Вас заставляют писать на том что Вам отвратно?)

Дизайн

Тут все зависит от человека и ситуации. Есть два варианта:

  1. Запариться и сделать крутейший дизайн.

    Плюсы:

    • lvl up как дизайнера;

    • обычно свой дизайн очень приятен;

    • так как это собственный макет Вы в нём хорошо ориентируетесь и ещё на этапе дизайна продумываете некоторые фичи.

    Минусы:

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

  2. Найти готовый дизайн и работать с ним.

    Плюсы:

    • быстро (хотя поиск может затянуться, об этом ниже);

    • не нужно отвлекаться на дизайн.

    Минусы:

    • не всегда можно найти дизайн для Вашей задумки, особенно если она не типичная;

    • готовые бесплатные макеты не всегда красивые.

Идея

Если авторские идеи не Ваше то на просторах интернета существуют множество тем проектов в которых можно использовать любые нужные Вам технологии.

Вот пару вечно актуальных примеров:

  • список задач;

  • менеджер покупок;

  • сайт портфолио;

  • кино сайт;

  • калькулятор;

  • блог;

  • магазин чего-либо.

Личный опыт

В этом блоке я раcскажу как придумывались / создавались мои pet проекты.

Начало (AniList)

Шёл июль 2020 года. Спустя семестр изучения JavaScript'а в колледже я решил изучить какой-то фреймворк. Выбор пал на React. Через пару дней ознакомления с фреймворком я наткнулся на серию видеороликов по разработке веб-приложения пиццерии на ютуб канале Archakov Blog. И решил сразу же применять изученное в видео на реальном проекте, но просто переписывать код из видео в IDE было не интересно. По этому я решил делать аниме список.

Выше я писал про два варианта получения дизайна для проекта. Какой же из вариантов выбрал я при создании макета? Оба. Для начала я зашёл на уже существующие сайты с такой-же тематикой потом пролистал Behance и собрал своего "франкенштейна" из собственных идей и кусков уже готовых дизайнов.

Скриншот проекта из Figma
Скриншот проекта из Figma

По готовому макету я понял что мне нужно будет где-то брать информацию об аниме (API, AJAX), где-то хранить её (Redux), а также как-то организовать авторизацию и хранение информации о пользователях (Firebase) + работа с версиями файлов(GIT, GitHub). В итоге мне предстояло ознакомиться как минимум с 5 новыми технологиями помимо React.

И в этом я считаю один из плюсов pet проектов. Начиная учить что-то одно, а в конце осваиваешь намного больше чем ожидал.

ToDo list

Дизайн ToDo app
Дизайн ToDo app

Следующим проектом должен был стать todo list. Мой одногруппник (тоже начинающий фронтендер) должен был делать frontend на Angular, а я (неожиданно) backend. Тут мне пристояло погрузиться в мир backend'а и может не изучить, но хорошо так ознакомиться с NodeJS, Express, MongoDB, mongoose, cors, dotenv, способами авторизации, деплоем на Heroku и ещё глубже понять работу API.

По итогу вышло так что и я и мой товарищ каждый для себя писали back и front end.

Остальное

Потом было ещё пару проектов. Вкратце напишу что для себя я вынес из них.

Приложение погоды:

  • рисование на canvas'е;

  • работа с геолокацией;

  • анимация React компонентов.

Shedaily (front & back end) - приложение которое парсило расписание из сайта колледжа где я учусь и приводило его в приятный вид:

  • парсинг информации из сайта;

  • работа с Excel таблицами в NodeJS.

Terminal website - вдохновившись сайтом dodo.dev создал сайт с контактами:

  • SCSS;

  • Gulp.

Менеджер подписок:

  • MobX;

  • переключение темы.

Магазин аксесcуаров (backend) (в разработке):

  • более глубоко познал MongoDB + mongoose;

  • GraphQL.

Портфолио (на стадии дизайна):

  • JAM stack;

  • Gatsby;

  • создание кастомного курсора.

Заключение

Недавно меня постигла идея переписать свой первый pet project (Аниме список), но теперь с новыми навыками: backend на NodeJS, Express, GraphQl вместо Firebase, и frontend React + Apollo Client, ну и дизайн по красивше сделать. Эта мысль является результатом моего прогресcа который я постиг благодаря pet проектам.

«Всякое дело совершенствуется овладением техники. Всякий навык достигается упражнением.» - Гиппократ