Бюджет: 10000 USD Термін: 1 день
Вітаю.Є великий досвід з Next.js/Node.js.Готовий до співпраці.
Обов'язки
Вести проектування архітектури та високоякісну реалізацію основних фронтенд проектів, забезпечуючи продуктивність, стабільність та підтримуваність.
Точно відтворювати дизайни Figma до пікселя, забезпечуючи виняткові деталі взаємодії та візуалізації.
Проектувати та реалізовувати масштабовану систему компонентів UI та модульної розробки для підвищення ефективності та повторного використання коду.
Розробляти та оптимізувати функції, пов'язані з Web3, забезпечуючи безпечні та стабільні взаємодії з блокчейном.
Створювати інтерактивні, високопродуктивні графіки та візуалізації даних за допомогою Canvas.
Тісно співпрацювати з менеджерами продуктів, дизайнерами та бекенд-інженерами для реалізації проектів від концепції до запуску.
Вимоги
Володіння Next.js або Nuxt.js, з практичним досвідом у великих проектах.
Знайомство з Web3.js, Ethers.js або подібними фреймворками, з досвідом у розробці DApp або фронтенд блокчейну.
Сильна експертиза в компонентізації UI та модульній розробці, з досвідом у проектуванні архітектури фронтенду.
Вміння працювати з Tailwind CSS з хорошим розумінням модульних та підтримуваних практик стилізації.
Володіння CSS та техніками макетування, здатність досягати піксельної точності реалізації з дизайнів Figma.
Володіння Canvas розробкою, здатність самостійно створювати високопродуктивні інтерактивні графіки та візуалізації даних.
Сильна обізнаність про якість коду, навички оптимізації продуктивності та досвід адаптації для різних платформ.
Бажані навички
Внески в проекти з відкритим кодом або технічні блоги.
Знайомство з Three.js, WebGL або іншими передовими технологіями візуалізації.
Досвід у складних графіках, інформаційних панелях або фінансових фронтенд проектах.
Архітектура фронтенд UI
Структура папок компонентів
Розмістіть базові компоненти UI, такі як Button, Input, Select та Dropdown, у спеціальній директорії ui/. Вони представляють найосновніші візуальні елементи програми. Компоненти, специфічні для бізнесу або складні, повинні бути розміщені в директорії components/. Ці компоненти вищого рівня створюються шляхом комбінування базових елементів UI з папки ui/ і можуть включати додаткові стилі, поведінку або бізнес-логіку. Це розділення чітко відрізняє повторно використовувані примітиви UI від реалізацій, специфічних для функцій, покращуючи організацію коду та підтримуваність.
Методологія атомарного дизайну
Прийміть методологію атомарного дизайну для структурування інтерфейсу користувача в ієрархічний та масштабований спосіб. Вона розбиває UI на п'ять рівнів гранулярності:
Атоми — це найменші будівельні блоки — базові HTML елементи або примітивні компоненти, такі як Button, Input або Icon.
Молекули формуються шляхом комбінування кількох атомів в функціональну одиницю, наприклад, SearchBar, що складається з Input та Button.
Організми — це більш складні секції UI, що складаються з молекул та/або атомів, такі як Header, Sidebar або UserCard.
Шаблони визначають макети на рівні сторінки, окреслюючи структуру та розміщення компонентів.
Сторінки — це конкретні екземпляри шаблонів, заповнені реальними даними, що представляють фактичні перегляди користувачів.
У цьому проекті директорія ui/ відповідає рівню Атомів, тоді як директорія components/ зазвичай представляє Молекули або Організми.
Дизайн-система та бібліотека компонентів
Папка ui/ слугує внутрішньою, приватною дизайн-системою або бібліотекою компонентів проекту. Вона забезпечує послідовну основу для всього розвитку UI в додатку. Стандартизуючи базові елементи, вона забезпечує візуальну узгодженість, зменшує дублювання та прискорює розробку. Усі компоненти вищого рівня створюються на основі цієї спільної бібліотеки, що сприяє повторному використанню та довгостроковій масштабованості.
Презентаційні та контейнерні компоненти
Застосовуйте розділення між презентаційними та контейнерними компонентами для підтримки чистої архітектури.
Презентаційні компоненти відповідають лише за рендеринг UI та застосування стилів. Вони отримують дані через props і мають мало або зовсім не мають внутрішньої логіки. Компоненти в папці ui/ потрапляють до цієї категорії.
Контейнерні компоненти займаються отриманням даних, управлінням станом та бізнес-логікою. Вони комбінують презентаційні компоненти для створення функціональних, багатофункціональних частин програми. Це розділення обов'язків забезпечує, що UI та логіка не пов'язані, що робить компоненти легшими для тестування, повторного використання та підтримки.
Шаблон розумних та нерозумних компонентів
Цей шаблон тісно пов'язаний з вищезгаданою концепцією.
Розумні компоненти управляють станом, взаємодіють з API або глобальними сховищами (наприклад, Redux) та використовують React Hooks для обробки логіки. Вони зазвичай пов'язані з даними та поведінкою.
Нерозумні компоненти не мають стану, є чисто візуальними елементами, які рендеряться виключно на основі props. Вони можуть бути повторно використані в різних контекстах і спрощують тестування та налагодження.
Hooks та розділення UI
Використовуйте власні React Hooks (наприклад, useForm, usePagination, useAuth) для інкапсуляції бізнес-логіки, стану та побічних ефектів. Залиште шар UI зосередженим виключно на презентації. Цей підхід дозволяє розробникам повторно використовувати логіку в різних компонентах, зберігаючи шар перегляду простим і передбачуваним.
Розробка на основі Storybook
Використовуйте Storybook для розробки, тестування та документування компонентів UI в ізоляції. Пишіть історії для кожного компонента, щоб продемонструвати різні стани, props та варіації. Це дозволяє фронтенд-розробникам створювати та налагоджувати компоненти незалежно від повного додатку. Переваги включають швидшу ітерацію, кращу співпрацю з дизайнерами, покращену документацію та підтримку візуального тестування.
Розробка на основі компонентів (CDD)
Дотримуйтесь робочого процесу, орієнтованого на компоненти, будуючи ієрархію UI знизу вгору. Почніть з атомів, комбінуйте їх у молекули, збирайте організми, а потім створюйте шаблони та сторінки. Цей метод забезпечує узгодженість, зменшує повторну роботу та узгоджує розробку з дизайн-системами, особливо при роботі з Figma або подібними інструментами.
Tailwind CSS та шаблон Headless UI
Використовуйте нестильовані, логічні бібліотеки компонентів, такі як Headless UI або Radix UI для інтерактивних елементів, таких як випадаючі списки, модальні вікна та вкладки. Застосовуйте стилізацію за допомогою Tailwind CSS, щоб зберегти повний контроль над дизайном без написання власного CSS. Цей шаблон повністю відокремлює логіку взаємодії від візуальної презентації, що дозволяє швидку, гнучку та узгоджену розробку UI, зберігаючи доступність та навігацію з клавіатури.
Резюме
Прийміть модульну, масштабовану архітектуру фронтенду на основі наступних принципів:
- Використовуйте атомарний дизайн для структурування компонентів UI за рівнем складності.
- Підтримуйте приватну бібліотеку компонентів у папці ui/ для основних елементів.
- Розділіть презентаційні та контейнерні компоненти для забезпечення чистої архітектури.
- Застосовуйте шаблон розумних та нерозумних компонентів для кращого управління логікою та UI.
- Інкапсулюйте логіку за допомогою React Hooks.
- Розробляйте компоненти UI в ізоляції за допомогою Storybook.
- Дотримуйтесь процесу розробки на основі компонентів (CDD).
- Поєднуйте бібліотеки Headless UI з Tailwind CSS для гнучкої, підтримуваної стилізації.
- За бажанням, використовуйте налаштування Monorepo для спільного використання компонентів між кількома проектами.
Цей підхід сприяє повторному використанню, узгодженості та довгостроковій підтримуваності, що робить його ідеальним для середніх та великих додатків.
Бюджет: 10000 USD Термін: 1 день
Вітаю.Є великий досвід з Next.js/Node.js.Готовий до співпраці.
Бюджет: 1200 USD Термін: 5 днів
# Пропозиція - Старший Frontend Розробник (Web3 & Canvas)
**Привіт!**
Я Денис Грицянов, старший fullstack розробник з 15-річним досвідом та роллю Head of AI Transformation у Deloitte. Спеціалізуюсь на advanced frontend architecture та Web3 applications.
## Ідеальне Відповідність Вашим Вимогам
**Next.js & Експертиза в Архітектурі:**
- **Enterprise-level Next.js** проекти з advanced performance optimization
- **Atomic Design implementation** - точно відповідно до Вашої архітектури UI
- **Component-driven development** з Storybook та модульними системами
- **Perfect Figma-to-code** точність - pixel-perfect реалізації
**Web3 & Розробка Блокчейн:**
- **DApp frontend development** з Web3.js та Ethers.js
- **Blockchain interactions** - безпечні та стабільні інтеграції
- **Crypto trading platforms** досвід з real-time data
- **Smart contract integration** для складної бізнес-логіки
**Canvas & Візуалізація Даних:**
- **High-performance interactive charts** з Canvas API
- **Financial dashboards** з real-time data visualization
- **Three.js expertise** для advanced 3D visualizations
- **WebGL implementations** для складної графіки
## Відповідність Технічного Стеку
**Ідеальне Відповідність Архітектури:**
- **Tailwind CSS mastery** з Headless UI компонентами
- **Atomic Design methodology** - ui/ та components/ структура
- **Smart/Dumb components** розділення
- **Custom React Hooks** для інкапсуляції бізнес-логіки
- **Performance optimization** - експертиза Core Web Vitals
**Розширені Можливості:**
- **Monorepo setup** для спільних бібліотек компонентів
- **Component testing** з Jest та React Testing Library
- **TypeScript expertise** для type-safe development
- **CI/CD pipelines** для автоматизованого тестування та розгортання
## Доведений Досвід
**Web3 Проекти:**
- **DeFi platforms** з складними торговими інтерфейсами
- **NFT marketplaces** з інтеграціями блокчейн
- **Crypto analytics dashboards** з real-time charts
**Enterprise Frontend:**
- **Scalable component systems** для великих додатків
- **Performance optimization** для high-traffic applications
- **Cross-platform compatibility** та відповідність доступності
## Додаткова Цінність
**Open Source Contributions:** Активний учасник спільнот React та Web3
**Technical Writing:** Досвід з документацією та технічними блогами
**Team Leadership:** Досвід управління frontend командами та архітектурними рішеннями
**Готовий надати pixel-perfect, high-performance Web3 frontend відповідно до Вашої advanced architecture.**
Можу почати
Бюджет: 1200 USD Термін: 22 дні
Привіт!
Я побачив ваш проект, і він мені цікавий. У мене є досвід як в аутсорсингу, так і в продуктовій розробці, і я чудово працюю в команді.
🔥 Мої ключові навички:
✅ Розробка SPA та веб-додатків
✅ Оптимізація продуктивності
✅ Ведення та підтримка проектів
✅ Якісний та чистий код
💻 Технології: HTML, CSS, JavaScript, React, Vue, Git
Якщо вам важливе якісне та надійне рішення – готовий обговорити деталі. Можна зв'язатися тут або в зручному для вас форматі.
Бюджет: 3290 USD Термін: 29 днів
Добрий день!
Мене звати Валентин, і я представляю Arctic Web Agency. Ми - команда досвідчених веб-розробників, які спеціалізуються на створенні сучасних та ефективних веб-рішень для бізнесу.В особисті повідомлення зможу надати приклади наших схожих робіт. Готові взяти ваш проєкт до роботи!
З повагою
Arctic Web Team
Freelancehunt
Бюджет: 1500 USD Термін: 30 днів
Привіт!
Мене зацікавив ваш проєкт — маю відповідний досвід і готовий взятися за виконання. Працюю швидко, відповідально та з увагою до деталей.
🔹 Коротко про мене: маю понад 3 роки досвіду в розробці.
Маю досвід у .NET Core, C#, ASP.NET MVC, Web API, JavaScript/CSS/HTML, React.js, Next.js, MS SQL, Git.
🔹 Готовий: почати одразу, узгодити дедлайн і бюджет, внести правки за потреби.
Бюджет: 1500 USD Термін: 30 днів
Привіт!
Мене зацікавив ваш проєкт — маю відповідний досвід і готова взятися за виконання. Працюю швидко, відповідально та з увагою до деталей.
🔹 Коротко про мене: маю понад 3 роки досвіду в розробці.
Маю досвід у .NET Core, C#, ASP.NET MVC, Web API, JavaScript/CSS/HTML, React.js, Next.js, MS SQL, Git.
🔹 Готова: почати одразу, узгодити дедлайн і бюджет, внести правки за потреби.
Бюджет: 1201 USD Термін: 30 днів
Доброго дня!
Радий допомогти.
Маю великий досвід у веб та мобільній розробці.
Бюджет: 1200 USD Термін: 14 днів
Привіт!
Мене звуть Олексій, я представляю групу розробників – NC-1.
У нашій команді є спеціаліст (full stack, senior) з необхідним для Вас досвідом і знаннями. Ставка за годину – 23 usd
Стек: PHP, Symfony, Laravel, Yii2, Codeigniter. MySQL, OOP. LAMP stack, Javascript, Unit testing, oAuth, Docker, HTML, CSS, TailWind CSS, Javasscript, Vue.js/Nuxt.js, React.js/Next.js. API development.GIT
Кейси - https://1drv.ms/b/c/b7a0d31a9dae1bc5/EeH6JPdpBbpKtrkA1zFQOIMBAmqUcd_Ptx5tt5p9hBNG-g?e=wXDGHh
Портфоліо – https://nc-one.com/case-studies
З повагою, Олексій М.
Бюджет: 1200 USD Термін: 30 днів
Ми в The Dev Company раді подати нашу заявку на позицію Архітектора Frontend/UI. Наша команда має великий досвід у проектуванні та впровадженні масштабованих, високопродуктивних фронтенд архітектур для складних Web3 додатків, включаючи інформаційні панелі на основі блокчейну, DApps та інтерактивні платформи візуалізації даних.
Ми спеціалізуємося на:
– Next.js / React з акцентом на масштабовану архітектуру компонентів, використовуючи Atomic Design, CDD та розділення презентаційних і контейнерних компонентів.
– Ідеальні реалізації Figma з майстерністю в Tailwind CSS та модульних практиках стилізації.
– Інтеграції Web3 через Ethers.js та Web3.js, включаючи безпечні з'єднання гаманців, взаємодії з блокчейном та відстеження транзакцій.
– Візуалізаціях на основі Canvas для створення інтерактивних, високопродуктивних графіків та аналітичних панелей, включаючи фінансові інтерфейси.
– Безголових шаблонах UI (Radix UI, Headless UI), поєднаних з Tailwind CSS для гнучкості та підтримуваності.
– Розробці на основі Storybook для ізольованого створення компонентів, документації та візуального тестування.
Відповідний минулий досвід
Ми розробили дизайн для платформи DeFi, побудували повний фронтенд для проекту NFT Web-3 гри та аналітичних інструментів — завжди підкреслюючи продуктивність, модульність та безпеку. Це включає створення повторно використовуваних систем UI, оптимізацію рендерингу для великих наборів даних та забезпечення безперебійної інтеграції зі смарт-контрактами та API блокчейну.
Наш підхід
– Архітектура UI — Atomic Design + приватна бібліотека UI в ui/ для основних елементів.
– Розробка на основі компонентів — побудова від атомів до сторінок з робочими процесами Storybook.
– Продуктивність — розділення коду, ліниве завантаження, мемоізація та оптимізація Canvas.
– Безпека — безпечне оброблення взаємодій з блокчейном, валідація транзакцій та обмеження швидкості.
– Співпраця — тісна узгодженість з командами дизайну для забезпечення бездоганного відтворення специфікацій Figma.
Ми вважаємо, що наша комбінація технічної експертизи, досвіду в Web3 та найкращих практик архітектури UI ідеально відповідає вашим вимогам, і ми впевнені у своїй здатності забезпечити високоякісний, масштабований та підтримуваний фронтенд для вашої платформи.
Ми будемо раді обговорити ваш проект більш детально.
З найкращими побажаннями,
The Dev Company
Бюджет: 1200 USD Термін: 30 днів
Привіт, Дхе,
Я радий подати свою пропозицію на посаду старшого фронтенд-інженера в [Назва компанії]. Маючи великий досвід роботи з Next.js/Nuxt.js, Web3.js/Ethers.js та розробкою високопродуктивного інтерфейсу, я впевнений у своїй здатності керувати архітектурою фронтенду, реалізовувати дизайни з точністю до пікселя та оптимізувати взаємодію з блокчейном для ваших проектів.
Будь ласка, напишіть мені в особисті повідомлення, якщо вважаєте, що я підходжу
Потрібно внести зміни у 3(три) різних форми, калькулятори та сторінки внесення даних на сайті згідно з ТЗ. Реалізація калькуляторів та сторінок потрібна на двох мовах. Можливо доопрацювати існуючі форми та калькулятори або зробити нові, якщо так буде простіше для виконання. ТЗ надаємо. В процесі виконання завдання можуть бути внесені невеликі доповнення або уточнення щодо змін за калькуляторами або за формами (шаблонами).
Доброго дня! Маємо проєкт на Next.js, React, Node.js та Strapi. Наразі зверстана головна сторінка, а дві другорядні потребують доопрацювання. Також необхідно зверстати ще 4–5 сторінок з адаптацією і складними анімаціями під різні пристрої та підключити їх до адмін-панелі Strapi. Через зміну завантаженості попереднього розробника шукаємо нового спеціаліста для завершення проєкту. Шукаємо відповідального розробника з практичним досвідом роботи з цим стеком. У відгуку, будь ласка, додайте приклади схожих проєктів. Бюджет звісно обговоримо.
Э недопрацьований плагін для After Effects:https://drive.google.com/drive/u/0/folders/1Nq9a672OK6ep9Com1lqelUhZxbx3_3f1 це, якщо я правильно розумію, CEP-плагін (Adobe Extension) для After Effects. Це HTML/JavaScript-панель через Adobe CSXS, яка взаємодіє з After Effects через ExtendScript. На меті було автоматизувати процес створення відео в "maze challenge" стилі, референс на ютубіGOALRUSH-f8x або аналог. Відео ручного монтажу: https://drive.google.com/file/d/1Ylzvax6w2JGDwaBqeCdbD49jh5wB5buY/view?usp=sharing Файл одного з проекту: https://drive.google.com/file/d/15vKd1L9VfHtDqK2wtLQdYEmDpH1d8Jvy/view?usp=sharing Окрім "багованості" системи через вайбкодинг (тому вайбкодери мимо), не влаштовували накприлад такі деталі (реальні правки): https://docs.google.com/spreadsheets/d/18Svc6GoQ34PgLe1HY7gNX5tPLH0Cpv9E4mfjCRBCMFU/edit?gid=0#gid=0 Треба зробити систему яка буде генерувати проекти в After Effects зі всіма необхідними компонентами відео які написані в База.pdf, більш детальна логіка у вигляді фото, тектсового документу, та mind map для розуміння всіх можливих варіацій на диску: https://drive.google.com/drive/folders/1Uf4Pnw3SKmwpmhL7sjPZFnfAbN0arUjr?usp=sharing Ще більш детально (з більш поглибленою описовою частиною, та силками на таймкоди в референсах) тз буде фікусуватись в робочій області проекта Кінцевий результат це система яка створює відео: від 40 секунд до 1 хвилини, повністю унікальний контент кожне створення, без метаданих ШІ в фійлі відео, в ньому повинен бути зрозумілий сюжет (ловушки, тупіки, різні емоції песронажів-знаменитостей в результаті якихось сюжетних поворотів в відео), саунд дизайн під сюжет (крики та інші емоції, вибухи і тд), стилістично не відрізнялись від відео референса з каналу
Потребується доопрацювання робочого лендінгу -конфігуратора створеного в ШІ Створені майже всі візуалізації та опції. Передамо архів. Потрібно щоб все гарно працювало , показувалось і адапитивність під моб і ПК. Прикріплено скріншот лендінгу
ТЕХНІЧНЕ ЗАВДАННЯ НА РОЗРОБКУ ЛЕНДИНГУ НА БАЗІ WORDPRESSПро проєкт: Потрібно створити продаючий лендинг для авторського онлайн-інтенсиву на діючому корпоративному сайті юридичної фірми. Платформа сайту: WordPress. Очікувана URL-адреса сторінки: salyk.net/online_intensiveОплата: Проєкт оплачується з резервуванням грошей на депозиті сайту. Без жодних «спочатку зроблю роботу, потім затверджую проєкт і ви проводите оплату». 1. Дизайн і структура:Є готовий прототип у вигляді чистого HTML/CSS коду (включає тексти, структуру, кольорову гаму, адаптивність і вертикальні відеовідгуки 9:16). Код додається до цього ТЗ у файлі «код». Можете його вставити тут https://htmledit.squarefree.com/ і подивитися попередній дизайн. Завдання по дизайну: Взяти цей код за основу, але не просто скопіювати. Вітається доопрацювання UX/UI, додавання акуратних мікроанімованих елементів, тіней, сучасних ефектів (фіч), які зроблять сторінку більш привабливою і продаючою, зберігаючи строгий корпоративний стиль.Фотографії: поки додаються тільки 3 шт., згенеровані ІІ. Після затвердження проєкту надішлю свої особисті фотографії для інтеграції на лендингу.2. Інтеграція з CMS (Редагованість):Критично важливо: Лендинг не повинен висіти на сайті як «голий» HTML-код. Сторінку необхідно зібрати за допомогою візуального конструктора (Elementor) або реалізувати через гнучкі поля (ACF).У замовника повинна бути можливість легко змінювати будь-які тексти, посилання, тарифи, фотографії та відеовідгуки прямо з адмін-панелі WordPress без втручання в код.3. Технічні вимоги та адаптивність:Повна адаптивність кросбраузерної верстки: Desktop, Tablet, Mobile. Сторінка повинна коректно відображатися на всіх типах пристроїв (в тому числі пропорції 3 вертикальних відеовідгуків).Висока продуктивність: Обов'язкова базова оптимізація швидкості завантаження (Google PageSpeed). Зображення повинні бути стиснуті та конвертовані у формат WebP, скрипти та стилі мініфіковані.4. Форма зворотного зв'язку (Лідогенерація):На лендингу є форма заявки (Ім'я, Телефон). Її потрібно зробити повністю робочою.Всі заявки повинні миттєво надсилатися на корпоративний email: info@сайт.net.Необхідно налаштувати відправку через SMTP-сервер або використовувати надійний плагін (WPForms / Contact Form 7), щоб заявки гарантовано не потрапляли в папку «Спам».5. Мультимовність:Поточний сайт передбачає наявність трьох мов (РУС, КАЗ, АНГЛ).В рамках проєкту виконавець повинен налаштувати мультимовність для нового лендингу (за допомогою плагінів Polylang, WPML або аналогів).В процесі виконання завдання замовник надасть готові переклади тексту на казахську та англійську мови. Виконавець повинен створити та оформити ці додаткові мовні версії сторінки.6. Інтеграція з головним сайтом:Налаштувати перехід на лендинг з основного сайту.В головному меню (в хедері) діючого сайту salyk.net необхідно додати нову кнопку або пункт меню (наприклад, «Онлайн-інтенсив»), яка буде вести на адресу /online_intensive.Додатково: зробити функцію на всьому сайті перемикання між мовами rus/eng/kaz в стилі сайту.