Зверстати покрокову форму на React + Chakra UI + react-hook-forms
Вітання!
Необхідно зверстати «створювач» рахунків (далі «білдер»), фактично - складну покрокову форму, для проєкту Next.js + Chakra UI + react-hook-forms відповідно до Figma дизайну (в загальних рисах).
- Використовуватимуться або готові Chakra UI, або деякі вже написані кастомні компоненти (наприклад, DataPicker, базовий Input + Autocomplete).
- Дизайн буде надано в Figma. Форма має 4 кроки-сторінки з різними типами полів. Надаю скін одного з кроків - найбільш складного з-поміж усіх. Решта переважно прості input’и.
- Білдер досить окремий від решти проєкту, але деякі поля мають дропдауни з даними з бекенду (потрібен лише виклик функції - TS клієнт до бекенду уже написаний).
- Результат білдера (on submit) має бути у об’єкті визначеної форми (буде надано TS interface).
- Текст/лейбли/placeholder’и мають бути винесені до i18n файлу (просто виклик функції: «Service details» -> t('incomes.invoices.builder.step2.name‘)).
Важливе про проєкт:
- Next.js 14 (App Router) без Redux
- Chakra UI 3.0.0-next.20
- Увага: це -next версія та їх документація ще у сирому вигляді, інколи доводиться дивитися у код компонентів для прикладів
- react-hook-forms, react-table
- next-intl
- REST backend
Ідеальний кандидат/-тка буде:
- Готовий/-а працювати у режимі пул-реквестів у проєкті на GitHub та враховувати зворотній зв’язок.
- Приділяти увагу якості коду та відповідності його загальній структурі проєкту.
- Враховувати нинішню структуру проєкту, загальні конвенції, не використовувати кардинально нові бібліотеки і т.д.
- Вітається посилання на профіль GitHub з прикладами робіт або contributions.
Після завершення цього конкретного завдання можна розглянути тривалу співпрацю. Знання (чи навіть просто бажання розібратися) просунутих концептів як от SSR/RSC/Server Actions/Dynamic Routes/Parallel Routes/Slots і т.д. вітається.
Якщо така співпраця цікавить, у пропозиції (ставці) прошу вказати ваш досвід з Next.js та концептуально (коротко 2-3 речення, без коду), а також описати як б ви вирішили проблему виконання фронтендом на Next.js запитів по дані зі стороннього серверу, який вимагає API KEY для авторизації у запиті, так, щоб цей API KEY ніколи не був доступний / переданий у браузері користувача? Яким чином реалізувати у запропонованому рішенні фільтрування даних відповідно до запиту користувача?
Додатки 1
-
890 6 0 Вітаю,
* По технологіях що ви написали: мав досвід із всім окрмі react-table.
* Скрін не виглядає складним. можна все зробити. Тільки десктоп версія? На скріні є кнопка "add service item", але немає "remove" ;)
* по вимогах із секції "Ідеальний кандидат/-тка буде": там все ок. за можл отримати фідбек треба дякувати
https://github.com/ZuBB
Було кілька проектів на базі next. 2 великі/складні. решта простенькі. Сумарно десь 2.5р.
…
По вашому питанню: якщо для запиту потрібен токен, то значить запит треба робити на беці. тим більше що 3rd party service може мати обмеження по cors. Судячи з того що користувач може ще додатково "фільтрувати" рез-ти запитів, то значить це буде відбуватись вже по загрузці сторінки то вихід один API Routes в нексті.
-
1447 20 1 Доброго вечора,
Я - досвідчений Next.js розробник з досвідом понад 4 роки із вражаючим портфоліо та бажанням досягати якісних результатів швидко та точно. Я переглянув ваше завдання і можу його якісно і швидко виконати, так мене цікавить довготривала співпраця і дослідження нового функціоналу в Next.js. Проблему можна вирішити, якщо зробити запрос до бекенд частини Next.js(fullstack фреймворк), і вже на беку взяти апі ключ з .env(бажано це зробити) і зробити запрос на другий сервер. Можна це реалізувати через створення backend ендпоінта на Next.js або написанням серверної функції
Портфоліо
Freelancehunt
Я пропоную повний спектр послуг, щоб ваш проект став успішним і легким у подальшому розвитку. Моє завдання – забезпечити якісну розробку, яка не лише виконає ваші вимоги, але й перевершить очікування. Я займаюся всім: від розробки, тестування до деплою всіх необхідних компонентів. Ви отримаєте готовий проект "під ключ", і вам не потрібно буде шукати додаткових фахівців.
… Крім того, я надаю повну підтримку на кожному етапі. Разом з вами ми обговоримо всі важливі моменти, я допоможу продумати логіку та функціональність вашого проекту, щоб він був зручним і інтуїтивно зрозумілим для користувача.
Співпрацюючи зі мною, ви отримуєте не лише розробника, а й надійного партнера, який зацікавлений у вашому успіху. Готові створити щось особливе разом? Давайте обговоримо ваш проект детальніше!
Моє завдання - забезпечити надійну підтримку протягом всього проекту та після його завершення. Не сумнівайтеся, що я завжди на зв'язку, готовий відповісти на ваші запитання та вирішити будь-які завдання у реальному часі.
Я відкритий для нових захоплюючих проектів та готовий внести свій внесок в їх успішне втілення. З нетерпінням чекаю можливості обговорити подробиці та розпочати співпрацю.
-
285 Добрій день. Задача зрозуміла. Працююсь с next.js, в формах використовував shadcn/cli, react-hook-forms та богато іншого.
-
31 Добрий день!
Мене звати Андрій. Дуже зацікавив ваш проект, готовий його виконати. В лс можу відправити списки моїх робіт та CV
-
15075 32 0 1 Добрий день!
Мене звати Валентин, і я представляю Arctic Web Agency. Ми - команда досвідчених веб-розробників, які спеціалізуються на створенні сучасних та ефективних веб-рішень для бізнесу.В особисті повідомлення зможу надати приклади наших схожих робіт. Готові взяти ваш проєкт до роботи!
З повагою
Arctic Web Team
Freelancehunt
-
530 4 0 Привіт!
Дуже зацікавив Ваш проєкт. Готовий допомогти. 4 роки досвіду з Next.js
Мій GitHub: https://github.com/virus231
Linkedin: https://www.linkedin.com/in/vladyslav-prodan-4865891a0/
Рейт за годину: 450грн.
Мої роботи:
1. https://churchonline.com.ua/
… 2. https://app.dovira.uk/en/videos/military
3. https://talentvisa.co.uk/
4. https://numfin.com/
1. Використання серверних функцій/actions Next.js
2. Фільтрування даних на сервері. Фільтрування можна виконати в server actions. Додати store для цих фільтрів а потім передавати їх в API.
Звертайтесь!
-
9004 69 0 Доброго дня.
Починав працювати з некстом 3 роки тому, з 12 версії, зараз покращую свої знання з 14 версією.
В ідеалі було б також використовувати tailwinds - допоможе швидше розробити верстку.
1) використання серверних компонентів
2) передаємо фільтри в query, дальше через пропс(params) дістаємо ці значення і викликаємо апішку з цими значеннями
Актуальні фриланс-проєкти в категорії Javascript та Typescript
Розробка інтерактивної карти Palworld для сайтуПотрібно розробити інтерактивну карту Palworld за прикладом: https://palworld.gg/map Нам потрібна не просто статична картинка, а повноцінна інтерактивна карта, де користувач може дивитися локації, вмикати / вимикати категорії об’єктів, шукати потрібні точки та взаємодіяти з… HTML та CSS верстання, Javascript та Typescript ∙ 17 годин 59 хвилин тому ∙ 22 ставки |
Розробка платформи AM Mobility (автосервіс, парковка, страхування, оренда автомобілів)
259 296 UAH
Шукаємо команду або досвідченого Full Stack розробника для створення MVP платформи AM Mobility. AM Mobility — це єдина цифрова екосистема для автомобілістів, що об'єднує в одному додатку та веб-платформі: парковку; автосервіс; шиномонтаж; автомийку; оренду автомобілів;… Javascript та Typescript, Веб-програмування ∙ 6 днів тому ∙ 116 ставок |
Gsap анімації
1000 UAH
Доброго дня. Треба внести правки в поточному проєкті. Потрібен фахівець, який добре працює на gsap/lenis Треба зробити анімацію карточок. Детально ТЗ тут: https://www.figma.com/design/5bLEJudN5LPpB9ZSoJa2Eb/Untitled?m=auto&t=qwyluUctL1lrMNvh-6 Треба проявити креатив та… Javascript та Typescript, Веб-програмування ∙ 6 днів 6 годин тому ∙ 21 ставка |
Шукаю наставника з Claude Code для запуску веб-проєкту з нуля**Коротко про завдання:** Я новачок без досвіду в програмуванні. Є готове ТЗ на розробку сайту (42 сторінки, Next.js, PostgreSQL). Хочу реалізувати його самостійно за допомогою Claude Code - потрібен спеціаліст, який налаштує середовище і навчить мене працювати з інструментом.… Javascript та Typescript, Навчання ∙ 8 днів 5 годин тому ∙ 21 ставка |
Оновлення дизайну на сайтіПотрібно оновити дизайн існуючого сайту, використовуючи HTML, CSS, JS: освіжити зовнішній вигляд, зробити його сучасним і адаптивним під мобільні пристрої. Потрібно додати плавні анімації та інтерактивні елементи. HTML та CSS верстання, Javascript та Typescript ∙ 8 днів 22 години тому ∙ 97 ставок |