Привет, Хабр! Сегодня расскажу, как сделал несколько десятков пет-проектов, научился работать с другими программистами, решать конфликты на GitHub и даже попробовал себя в роли тимлида.
Меня зовут Абузар Мамедов, я студент курса «Фронтенд-разработчик» в Яндекс Практикуме, а этими проектами я занимался во время учёбы. Текст может быть полезен новичкам, которые хотят больше практиковаться и найти идеи для собственных проектов.
В статье я подробнее расскажу о трёх проектах: генератор резюме с динамическим заполнением и SPA-приложение интернет-магазина и ещё одно приложение на React для поиска GIF. Чтобы понять, что можно улучшить, наставник курса Алексей Гмитрон оценил их качество и поделился мыслями.
Пет-проект как дополнительная практика
За время обучения я сделал 20 пет-проектов. Моей главной мотивацией была дополнительная практика — я понял, что задачи, которые я ставлю себе сам, помогают быстрее усваивать знания. Если заниматься только изучением синтаксиса, просмотром туториалов и решением задач, времени на понимание темы понадобится гораздо больше.
До Практикума я самостоятельно изучал Python — проходил курсы, смотрел туториалы и делал ставку на теоретическую часть — синтаксис и работу функций. Тогда я думал, что чем больше узнаю о возможностях языка, тем больше смогу сделать на практике. Этот путь оказался ошибочным — когда пришло время решать задачи, я не мог сделать даже самых простых упражнений и понял, что так программистом стать не получится. Спустя время я решил перейти на фронтенд и поменять фокус с теории на практику.
Собственные проекты шире задач — в них нужно решать несколько проблем одновременно и сталкиваться с теми же сложностями, что и на работе. А еще из них можно собрать портфолио и показать работодателю.
Пет-проекты — не то же самое, что учебные. Они не обязательно должны выглядеть совершенными или полностью завершёнными. Для меня они стали песочницей, в которой можно экспериментировать, делать ошибки и учиться на них, — а потом рассказать о своем опыте на собеседовании.
Где взять идеи
Часто можно услышать рекомендацию автоматизировать процессы или решить проблемы, с которыми приходится сталкиваться каждый день. Но на практике поиск идеи для проекта может оказаться не самой простой задачей. Я решил пойти по другому пути:
За основу брал материал, который мы проходили на курсе, а работы других программистов использовал как источники для вдохновения, чтобы его закрепить.
Все мои проекты строятся на учебных модулях. Я старался проходить спринты быстрее и выделять время на освоение темы на практике. Например, после модуля про адаптивную вёрстку сделал простой лендинг и адаптировал его под мобильные устройства. А когда немного изучил React, сделал с однокурсниками командный проект, в котором отвечал за внешний вид и функционал форм, поп-апов и баннеров.
Когда опыта самостоятельной разработки немного, нужны примеры работ, на которые можно ориентироваться
После каждого модуля я заходил на The Odin Project, FreeCodeCamp и Scrimba. Это опенсорс-сервисы, где можно учиться и оттачивать свои навыки. А ещё это библиотеки готовых проектов по разным направлениям с лучшими работами. Проектам можно ставить лайки — так формируется топ из трех-четырех работ по каждой категории.
На этих сайтах нет готовых макетов на Figma или чек-листов, по которым можно написать проект, — только готовые сайты и приложения. Их можно использовать как источники для вдохновения: например, аналог CV APP я нашел на The Odin Project. Я взял идею, референс вёрстки и собрал свой сервис, расширив его функционал: добавил возможность сохранять резюме в PDF для печати.
Примеры моих проектов
На каждый из проектов, которые я делал, уходило от трех до семи дней в зависимости от сложности и количества участников. Вот три примера с исходным кодом и реализацией.
CV APP
Мой первый проект, написанный на React, — генератор резюме с динамическим заполнением. На тот момент это была сложная задача — нужно было на практике разобраться в том, как пользоваться фреймворком, как подключать библиотеки. Тогда я не так хорошо знал верстку, поэтому сделал фокус на функционал, а заодно потренировался с созданием простых макетов.
В CV APP можно добавить фотографию, контактную информацию, опыт работы, описание и основные навыки. После того как резюме готово, его можно сохранить в PDF для рассылки или печати.
Список технологий, которые я использовал, выглядит так:
JavaScript
React
TailwindCSS
PostCSS
HTML5
CSS3
Git
Vite
→ Код проекта на Github
→ Реализация
Проект классный! Что можно сделать лучше: вычисления, которые используются в проекте, лучше оборачивать в useMemo, поскольку в текущем виде они будут происходить при каждом рендере. Это сильно повлияет на производительность. С useMemo они будут производиться повторно только в случае, если какая-либо из зависимостей поменяется — в остальных значения будут браться из кэша.
Алексей Гмитрон
Фулстек-разработчик и наставник на курсе «Фронтенд-разработчик»
FakeStore
Это SPA-приложение (Single Page Application) — макет интернет-магазина с корзиной, страницей товаров и формой оплаты. На подобный проект я наткнулся на FreeCodeCamp, после того как мы прошли модуль по маршрутизации в React Router.
Это был первый опыт деплоя проекта на GitHub Pages. К сожалению, он плохо поддерживает React Router и на некоторых страницах (например, при переходе в корзину или при перезагрузке страницы) появляется ошибка 404. В этом случае я тренировался в реализации перехода без обновления страниц, поэтому искать пути решения проблемы не стал.
Список технологий, которые я использовал, выглядит так:
React
React router 6
Vite
TailwindCSS
PostCSS (cssNano, autoprefixer)
gh-pages
eslint
→ Код проекта на GitHub
→ Реализация
Замечательный проект, было бы здорово дать пользователям возможность добавить больше одного экземпляра товара в корзину. Кроме того, стоит оптимизировать картинки — пока они загружаются долго, и это влияет на впечатление от продукта.
Отдельно стоит добавить, что устанавливать значение в localStorage лучше внутри useEffect, чтобы этого не происходило при каждом рендере компонента. В противном случае это может приводить к возникновению ошибок и логически неправильно.
Алексей Гмитрон
Фулстек-разработчик и наставник на курсе «Фронтенд-разработчик»
Gifs App
Самый сложный и последний проект, который я сделал во время обучения. Он представляет собой SPA (Single Page Application) на React для поиска gif.
На сайте есть топ популярных gif, их можно искать по определенной тематике или использовать генератор рандомных картинок.
Это второй в моей практике опыт командной работы: Gifs App мы делали вместе с однокурсником. В этом проекте я почувствовал себя тимлидом: у меня в голове была архитектура приложения, и я брал на себя больше ответственности за основной функционал. Напарник кроме учебы работал и не мог мог тратить на проект много времени, поэтому я взял на себя функцию распределения задач. Этот проект научил меня брать на себя ответственность и распределять задачи.
Проект работает на следующих технологиях:
HTML5
Grid
REACT
JSX разметка
REDUX;
REDUX/Toolkit
API
Vite
→ Код проекта на GitHub
→ Реализация
Вместо выводов
Проекты держали меня в тонусе на протяжении всего обучения: я решал прикладные задачи, сталкивался с проблемами, занимался практической разработкой, тренировал навыки GitHub и решал конфликты. Эти проекты помогли не утратить навыки, полученные во время обучения.
Кроме того, проекты помогли мне собрать портфолио и чувствовать себя увереннее на собеседовании. Коммерческий разработчик постоянно сталкивается с проектами — чем больше написано во время обучения, тем проще будет встроиться в рабочий ритм и комфортнее будет на первой работе.
