Бюджет: 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. Специализируюсь на продвинутой архитектуре фронтенда и Web3 приложениях.
## Идеальное соответствие вашим требованиям
**Next.js & Экспертиза в архитектуре:**
- **Проекты уровня Enterprise на Next.js** с продвинутой оптимизацией производительности
- **Реализация Atomic Design** - точно в соответствии с вашей архитектурой UI
- **Разработка на основе компонентов** с Storybook и модульными системами
- **Идеальная точность Figma-to-code** - пиксельно точные реализации
**Разработка Web3 & Blockchain:**
- **Frontend разработка DApp** с Web3.js и Ethers.js
- **Взаимодействия с Blockchain** - безопасные и стабильные интеграции
- **Опыт работы с крипто-трейдинг платформами** с данными в реальном времени
- **Интеграция смарт-контрактов** для сложной бизнес-логики
**Canvas & Визуализация данных:**
- **Высокопроизводительные интерактивные графики** с Canvas API
- **Финансовые панели** с визуализацией данных в реальном времени
- **Экспертиза в Three.js** для продвинутых 3D визуализаций
- **Реализации WebGL** для сложной графики
## Соответствие техническому стеку
**Идеальное соответствие архитектуре:**
- **Мастерство в Tailwind CSS** с компонентами Headless UI
- **Методология Atomic Design** - структура ui/ и компонентов/
- **Разделение Smart/Dumb компонентов**
- **Пользовательские React Hooks** для инкапсуляции бизнес-логики
- **Оптимизация производительности** - экспертиза в Core Web Vitals
**Продвинутые возможности:**
- **Настройка Monorepo** для общих библиотек компонентов
- **Тестирование компонентов** с Jest и React Testing Library
- **Экспертиза в TypeScript** для безопасной разработки типов
- **CI/CD пайплайны** для автоматизированного тестирования и развертывания
## Доказанный опыт
**Проекты Web3:**
- **DeFi платформы** со сложными торговыми интерфейсами
- **NFT маркетплейсы** с интеграциями blockchain
- **Панели крипто-аналитики** с графиками в реальном времени
**Enterprise Frontend:**
- **Масштабируемые системы компонентов** для крупных приложений
- **Оптимизация производительности** для приложений с высоким трафиком
- **Кросс-платформенная совместимость** и соответствие требованиям доступности
## Дополнительная ценность
**Вклад в Open Source:** Активный участник сообществ React и Web3
**Техническое написание:** Опыт в документации и технических блогах
**Лидерство в команде:** Опыт управления фронтенд командами и архитектурными решениями
**Готов предоставить пиксельно точный, высокопроизводительный Web3 фронтенд в соответствии с вашей продвинутой архитектурой.**
Могу начать
Бюджет: 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 для создания интерактивных, высокопроизводительных графиков и аналитических дашбордов, включая интерфейсы финансового уровня.
– Headless 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 и разработкой высокопроизводительных пользовательских интерфейсов, я уверен в своей способности вести архитектуру фронтенда, реализовывать дизайны с идеальной точностью и оптимизировать взаимодействие с блокчейном для ваших проектов.
Пожалуйста, напишите в личные сообщения, если вы считаете, что я подхожу
Необходимо, используя функционал, сделать - 1. визуализацию скидки на карточке товара: красиво отформатировать размещение оптовых цен от количества, а после выбора количества по оптовой цене нужно отобразить - текст типа "Вы экономите .....» на карточке товара и в корзине Пример как сейчас https://plusminus7.com.ua/index.php?route=product/product&product_id=7097 Переходим в корзину, также не видим, сколько было, сколько стало. Обычный маркетинг. - массовое редактирование скидок через экспорт/импорт файла (выгрузили → поправили → залили назад) Сейчас скидки от количества задаются непосредственно в карточках товаров на вкладке Скидка, для того чтобы была возможность редактировать массово, нужно сделать экспорт/импорт товаров в Excel Добавил скрины образцы, как мы примерно видим визуализацию оптовых цен Следующим этапом будет еще ТЗ с регулированием ценообразования и округления.
Название задания: Специалист WordPress / Elementor для внесения правок на сайтах Описание: Ищем специалиста по WordPress и Elementor для работы с уже готовыми сайтами. Основные задачи: внесение изменений в соответствии с нашими рекомендациями; замена и редактирование контента; добавление, удаление и корректировка блоков; исправление отображения страниц на компьютерах и мобильных устройствах; небольшие изменения дизайна и структуры страниц. Сайт уже разработан и сверстан. Создавать их с нуля не нужно. Работа предполагает выполнение конкретных задач по мере их появления. Важно внимание, соблюдение технического задания и опыт работы с WordPress и Elementor.
О проекте:Требуется создать продающий лендинг для авторского онлайн-интенсива на действующем корпоративном сайте юридической фирмы. Платформа сайта: WordPress. Ожидаемый URL страницы: сайт/online_intensive1. Дизайн и структура:Есть готовый прототип в виде чистого HTML/CSS кода (включает тексты, структуру, цветовую гамму, адаптивность и вертикальные видеоотзывы 9:16). Код будет передан исполнителю.Задача по дизайну:Взять этот код за основу, но не просто скопировать. Приветствуется доработка UX/UI, добавление аккуратных микроанимаций, теней, современных эффектов (фич), которые сделают страницу более привлекательной и продающей, сохраняя строгий корпоративный стиль.2. Интеграция с CMS (Редактируемость):Критически важно:Лендинг не должен висеть на сайте как «голый» HTML-код. Страницу необходимо собрать с помощью визуального конструктора (Elementor) или реализовать через гибкие поля (ACF).У заказчика должна быть возможность легко менять любые тексты, ссылки, тарифы и фотографии прямо из админ-панели WordPress без вмешательства в код.3. Технические требования и адаптивность:Полная адаптивность кроссбраузерной верстки: Desktop, Tablet, Mobile. Страница должна корректно отображаться на всех типах устройств (в том числе пропорции 3 вертикальных видеоотзывов).Высокая производительность:Обязательна базовая оптимизация скорости загрузки (Google PageSpeed). Изображения должны быть сжаты и конвертированы в формат WebP, скрипты и стили минифицированы.4. Форма обратной связи (Лидогенерация):На лендинге есть форма заявки (Имя, Телефон). Ее нужно сделать полностью рабочей.Все заявки должны моментально отправляться на корпоративный email: info@сайт.Необходимо настроить отправку через SMTP-сервер или использовать надежный плагин (WPForms / Contact Form 7), чтобы заявки гарантированно не попадали в папку «Спам».5. Мультиязычность:Текущий сайт подразумевает наличие трех языков (РУС, КАЗ, АНГЛ).В рамках проекта исполнитель должен настроить мультиязычность для нового лендинга (с помощью встроенного на сайте плагина).В процессе выполнения задачи заказчик предоставит готовые переводы текста на казахский и английский языки. Исполнитель должен создать и оформить эти дополнительные языковые версии страницы.6. Интеграция с главным сайтом:Настроить переход на лендинг с основного сайта.В главном меню (в хедере) действующего сайта salyk.net необходимо добавить новую кнопку или пункт меню (например, «Онлайн-интенсив»), которая будет вести на адрес /online_intensive.Дополнительно: сделать функцию переключения между языкамиrus/eng/kazв стиле сайта.
Вирус в настоящее время проник на сайт. Сайт не функционирует должным образом. В частности, главная страница работает некорректно. Нам нужен разработчик, который сможет исправить эту ошибку как можно скорее.
Есть сайт, который функционирует, нужно изменить структуру главного меню и создать несколько новых страниц (уже по тому шаблону, что есть, с тем же дизайном) Что есть: Структура меню: Главная О нас Услуги: йога с щенками, йога + звуковая ванна + церемония с какао, звуковая ванна, йога с ламами Подарочная карта Блог Контакты Что нужно сделать: 1. Изменить структуру меню на следующую: Главная О нас Еженедельные мероприятия Сезонные мероприятия Частные мероприятия Подарочная карта Блог Контакты 2. Создать новые страницы (каталог услуг) Еженедельные мероприятия Сезонные мероприятия (на этой странице сделать разделение Осень-Зима, Весна-Лето (или сделать пометки рядом с каждой карточкой продукта, когда он доступен) Частные мероприятия Эти страницы сделать на основе существующей страницы - то есть скопировать существующую страницу и привязать к ней страницы услуг, они должны отображаться там автоматически, если поставить галочку 3. Добавить следующие услуги на страницу еженедельных мероприятий: Йога с щенками Звуковая ванна 4. Добавить следующие услуги на страницу сезонных мероприятий: Звуковая ванна Bloom Frequency Йога с ламами Первый свет - Счастливый рассвет Церемония чая урожая и звуковая ванна Йога, церемония с какао и звуковая ванна Зимняя звуковая ванна при свечах Церемония с какао для установки намерений на Новый год и ароматерапия и звуковая ванна 5. Добавить услуги на страницу частных мероприятий: Частная йога с щенками в студии Частная йога с щенками на вашем месте Частная звуковая ванна для одного Частная групповая звуковая ванна Частные звуковые ванны и чайные церемонии для команд, лидеров и корпоративных мероприятий 6. Привязать календарь системы simplybookme к страницам: Первый свет - Счастливый рассвет Церемония чая урожая и звуковая ванна Зимняя звуковая ванна при свечах Церемония с какао для установки намерений на Новый год и ароматерапия и звуковая ванна Эта система бронирования уже настроена на сайте, нужно по такому же принципу, как и сейчас, привязать календарь к перечисленным страницам. 6.1. Добавить кнопку “в списке ожидания” на страницы: Первый свет - Счастливый рассвет Церемония чая урожая и звуковая ванна Зимняя звуковая ванна при свечах Церемония с какао для установки намерений на Новый год и ароматерапия и звуковая ванна После того как человек нажимает на кнопку - должна появиться форма, где человек оставляет свой email, имя и отправляет эту форму. С нашей стороны клиенту должно приходить письмо, что он попал в список ожидания, и нам должно приходить уведомление, что кто-то добавился в список ожидания. Через simplybook не получится, нужно, наверное, делать через формы shopify, или можете предложить другое решение