Від теорії до практики: чому pet-проєкти важливі для новачків

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Не бійтеся зробити помилку. Бійтесь зробити те ж саме й нічому не навчитися" — Теодор Рузвельт

Ви освоїли HTML, CSS, JavaScript і навіть React, але відчуваєте, що чогось не вистачає? Не хвилюйтеся, ви не одні! Тисячі початківців стикаються з цим моментом, коли теорія вже зрозуміла, а практики ще не вистачає. І ось тут на сцену виходять пет-проєкти — найкращий спосіб перейти від навчання до реальної розробки.

Я такий самий новачок і з самого початку вивчення розробки розуміла, що без практики та пет-проєктів шансів навчитися вирішувати різні задачі майже немає. Саме тому я і почала писати пет проєкти щойно вивчала нову технологію. Так і з’явилися 3 мої прості проекти з версткою та один серйозніший, про який в цій статті саме і піде мова.

Секрет у тому, що немає кращого способу закріпити теорію, ніж зробити щось самотужки.

Чому варто починати свій pet-project

1. Навчитесь на своїх помилках. Поки ви не змусите себе розбиратися з проблемами на практиці, ваші знання будуть теоретичними.

2. Покажете світу свою роботу. Немає кращої візитівки, ніж власний GitHub з реальними проєктами. У вас дійсно буде більше шансів отримати бажаний офер, якщо у вас в порівнянні з іншими буде видно результат вашого навчання.

3. Підготуєтесь до реальних завдань. Розробка вимагає розв’язку проблем — чим раніше ви почнете розв’язувати проблему різного типу, тим краще.

Lover Flower — мій шлях від ідеї до реального продукту

Lover Flower — це онлайн-магазин квітів, який я почала розробляти як pet-проєкт, щоб закріпити знання з фронтенду, зокрема React, курс з якого тільки закінчила. Я хотіла покращити навички роботи з компонентами, навчитися ефективно використовувати Redux для керування станом і розібратися з налаштуванням маршрутизації в React Router.

Головною метою було створити зручний та естетично приємний вебсайт, де користувачі могли б легко обрати та замовити квіти. В мене був перелік певних завдань, які я мала вирішити в ході роботи над цим проєктом, і звісно, можливість спробувати реальні виклики, з якими стикається кожен розробник.

Отже, спершу я обрала дизайн, який мені сподобався, благо в інтернеті повно макетів для практики. Я знайшла макет в одному із телеграм каналів з макетами, де є багато безкоштовних варіантів для тренування навичок верстки.

І далі почався процес переносу дизайну у функціональний веб-сервіс. Стеком я обрала React.js, так як саме його і вивчала, і для його закріплення, на ньому і писала. Лише потім, коли почала вчити Next.js, зрозуміла, що він би був доцільніше, але то вже буде для іншого проєкту.

Були використані такі технології:

• React.js для побудови інтерфесу
• Для глобального керування станом використала React Redux
• Для стилізації застосувала styled-components, що дозволило створювати гнучкі та реюзабельні стилі без прив’язки до окремих CSS-файлів
• Щоб реалізувати бекенд, я використала Node.js/Express для створення API-сервера з квітами, що дозволило легко керувати каталогом товарів. Це було не обов’язково, так як можна було використати вже готові Fake API, але мені хотілося щоб було гарно, тому і вирішила створити власну API-шку під проєкт, яку до речі задеплоїла за допомогою Railway-дуже зручний та легкий сервіс

Я не використовувала у цьому проєкті TypeScript, хоча це б було дуже доречно, але виправилась вже у іншому проєкті. І на майбутнє краще ним не нехтувати.

Отже, проєкт видався великим, місцями складним, тому в ході розробки я звісно ж стикалася з великою кількістю проблем. Для новачка, вони були майже на кожному кроці, бо все вперше!

Проблеми та їх вирішення

• Складний дизайн

Я навмисно обрала цікавий, та складний, як на мене дизайн. І в процесі його реалізації вивчала різні нові для себе фішки, гралася із позиціонуванням та order’ом. І впоравшись із цим, як на той момент мені здавалось складним викликом, далі вже процес йшов більш впевнено. Бо головне зрозуміти, що все реально! Будь-які завдання мають рішення!

• Проблема з глобальним станом

Спочатку я використовувала useState, але швидко зрозуміла, що для масштабування потрібно щось ефективніше. Перехід на Redux допоміг централізовано керувати даними та полегшив передачу стану між компонентами. Плюсом до цього, зрозуміла краще різницю між просто редюсерами та екстра редюсерами.

• Стилізація компонентів

Використання styled-components спочатку вимагало звикання, але згодом дозволило уникнути конфліктів стилів і зробити код чистішим. Також можливість створювати теми значно полегшила цей процес.

• Підключення API

Як я і писала вище, я хотіла свій власний API, через що мені довелося трохи зануритись в Node.js/Express для його реалізації, і безперешкодного підключення до Redux store, за допомогою асинхронних запитів axios.

• Обробка помилок у запитах

На ранніх етапах я не додавала обробку помилок у запитах до API, що призводило до некоректного рендеру компонентів при збої серверу. Після виправлення я впровадила try/catch і створила fallback UI для відображення повідомлень про помилки.

Також, думала над тим, як правильно структурвати проєкт; довго розбиралася із сортування товарів, намаючись зрозуміти що до чого; стикнулась із проблемою створення каруселі товарів, хоча і існує багато готових рішень, вони в мене всі чомусь не працювали, і я створила потрібну мені карусель сама; реалізація пошуку та показ лише релевантних товарів також була не безперешкодною.

Звичайно, що це не всі проблеми, які ставали на шляху реалізації, але саме вирішення їх дало мені віру в свої дії та натхнення продовжувати далі. Найскладнішим для мене було якраз таки створення власного API та його інтеграція з Redux store. Це вимагало занурення в серверну логіку, асинхронну обробку даних та взаємодію з клієнтською частиною. Долаючи ці труднощі, я не тільки навчилася працювати з Node.js/Express, але й краще зрозуміла, як працюють API та як ефективно обробляти запити на фронтенді.

Саме в цьому і є суть створення пет-проєктів, практика вирішення проблем.

Розробка Lover Flower навчила мене багатьох важливих речей: як працювати з React та Redux, як створювати API на Node.js/Express, про існування createPortal в ReactDOM, для зручної реалізації модального вікна, як правильно керувати станом додатку, як оптимізувати сайт для швидшого завантаження. Це був не просто код, а реальний досвід розв’язання проблем.

Тому, не бійтеся починати свій pet-проєкт, бо це лише вам на користь і дасть вам більше впевненості у тому, що завдання, які ви вирішите під час нього, потім зможете вже краще реалізувати в реальних проєктах.

Також не прагніть зробити все ідеально, ідеальності не існує, завжди є і буде щось краще, завжди є до чого рости. Тому, просто робіть, робіть і робіть!

За посиланням, ви маєте змогу побачити та оцінити мій перший проєкт на React, та, якщо будуть слушні поради на майбутнє, по створенню подібних робіт, буду рада почитати.

Посилання на проєкт: Lover Flower

Посилання на репозиторій: github.com/...​siia-hrekova/lover-flower

P.S: На адаптацію всіх сторінок у мене не вистачило часу, але я це вмію, чесно. Планую допрацювати адаптацію найближчим часом, особливо для мобільних пристроїв, щоб сайт виглядав зручно та привабливо на будь-яких екранах.