Profter — інтернет-магазин професійного обладнання
Інтернет-магазин для майстрів і будівельних компаній: пошук фарбувального, оздоблювального та прибирального обладнання, перегляд характеристик і вибір товарів зі смартфона.
Мета проєкту
Допомогти орієнтуватися у широкому каталозі обладнання та поєднати вибір товару з потрібною перед замовленням інформацією: характеристиками, наявністю, доставкою і сервісом.
Рішення та архітектура
Адаптивна вітрина Next.js взаємодіє з торговельним бекендом Magento через GraphQL. Категорії та картки товарів структурують асортимент, а модулі кабінету передбачають обране, порівняння та історію замовлень. Окремий клієнт адміністрування на React містить інтерфейси керування каталогом, замовленнями й контентом сайту. Кейс показує публічну вітрину; можливості кабінету й адміністрування описані за кодом і не перевірялися з виробничим доступом.
Екрани Profter
Реальні скриншоти profter.com.ua: головна сторінка, каталог фарбувального обладнання, картка товару та її адаптивна мобільна вебверсія.
Екрани містять публічні дані каталогу profter.com.ua, зафіксовані 10 жовтня 2026 року. Назви, ціни й наявність відповідають цьому знімку. Вигадані записи клієнтів і виробничу базу даних не копіювали. Вхід у кабінет, адміністрування, оформлення замовлення, оплату та інтеграції доставки не перевіряли. Згенеровані обкладинки відокремлені від документальних скриншотів.
Переваги
- 🛠️ Вибір за типом обладнання — категорії допомагають майстрам почати пошук.
- 🔎 Звуження вибору — категорії та сортування допомагають знаходити товари.
- 📋 Знайомство з товаром — фотографії та характеристики допомагають оцінити обладнання.
- 📱 Перегляд зі смартфона — вітрина адаптується до невеликого екрана.
- 🚚 Інформація перед покупкою — сторінки доставки, оплати й сервісу доступні з вітрини.
Технології
Підтверджено вихідним кодом: Next.js 14, React 18, TypeScript і SCSS для вітрини; Magento Open Source 2.4.6 і PHP для торговельної частини; GraphQL для даних вітрини. Окрема адміністративна програма використовує React 18, Vite 5, Redux Toolkit і Tailwind CSS.
Розробка інтернет-магазину професійного обладнання
Profter (PROF): інтернет-магазин професійного обладнання з адаптивною вітриною Next.js, бекендом Magento та окремою програмою адміністрування React.
Від широкого асортименту до змістовної картки товару
Майстру, який обирає фарбувальний апарат, потрібна не лише назва товару. Категорії обладнання, сортування, фотографії та технічні характеристики допомагають орієнтуватися в асортименті. Profter поєднує навігацію каталогом із детальною інформацією про товари для будівництва й оздоблення.
Архітектура Magento з окремою вітриною
Вітрина й торговельний бекенд мають окремі завдання. Next.js і React формують інтерфейс покупця, а Magento надає торговельні дані через GraphQL. Окремий клієнт React містить робочі інтерфейси товарів, замовлень і контенту. Така структура поєднує різні інтерфейси навколо спільної торговельної моделі.
Адаптивний перегляд і межі перевірки
Кейс показує реальні публічні сторінки на комп’ютері та екрані розміру смартфона. Знімки підтверджують видиму структуру й контент вітрини, але не доводять завершені покупки чи зростання продажів. Для подібного проєкту варто заздалегідь визначити атрибути каталогу, шляхи покупців і робочі інтеграції.