Доделать front end модуля бронирования (React.js)
3000 UAHВ основном модуль уже готов, нужно сверстать календарь (согласно готовому дизайну), добавить одну функцию и ряд мелких исправлений. Обязательно все должно быть сделано с помощью React.js (с помощью функций и хуков).
Теперь подробнее.
Речь о модуле бронирования на сайте san-utes.ru (сам сайт трогать не надо)
Новый модуль заменит существующий. Ссылка на старый модуль: san-utes.ru/booking
Back end уже готов (во всяком случае мы делать его не будем), все новые изменения должны быть связаны с существующим API, для понимая его работы существует тестовый букинг: booking.san-utes.ru/index.html конечно же дадим доступ к его админке.
Но нюанс, технического описания API нет, доступа к исходному коду нет. Нужно будет понимать как работает API на примере тестовой системы (еще раз ссылка, такая же как выше) booking.san-utes.ru/index.html (используя DevTools). Можно задавать вопросы по поводу API, они будут переадресовываться разработчикам. В целом неудобно да, задали много вопросов клиенту по этому поводу. Клиент ссылается на то что он сам ничего не понимает, говорит про бюрократию, и что бэкендом занимается сторонняя контора которая доступ к API давать не хочет, но она предоставила тестовое приложение. Ничего страшного в целом, основная работа уже сделана, так что много копаться не придется!:)
Готовый дизайн:
https://www.figma.com/file/JuAbxyUcY8jtizWDTKK0xo/booking-hotel?node-id=0%3A1
Ссылка на то что готово по фронтэнду (с тестовыми данными):
(прикрепил тот же файл к проекту)
Что нужно доделать конкретно:
Выбор дат (это схематическое название раздела, к которому относится список правок ниже)
1. Сверстать календарь как в дизайне
2. Заменить иконки календарей, на иконки как в дизайне
3. При выборе количества взрослых, сделать так чтоб при повторном выборе из списка не пропадал вариант который уже выбрали
4. В датах писать месяца прописью: 11 сентября, 23 мая, сейчас там непривычное для нас порядок: "месяц, дата, год", так быть не должно, только дата цифрой и месяц прописью
5. Сделать так, чтоб нельзя было днем выезда выбрать тот же день, что и день заезда, только день после дня заезда и дальше.
Выбор номеров
1. Заменить знак рубля на знак без засечек, как в дизайне, здесь и дальше где появляется знак рубля, он должен выглядеть одинаково
2. В превью номера, есть место с тремя вещами которыми оснащается номер: Фен, Кондиционер, Двуспальная кровать к примеру, если третий пункт не помещается, то он должен размываться, как это показано в дизайне
Выбор тарифа
1. В "условиях отмены" сделать шрифт и размер таким же как в описании под названием тарифа, добавить немного воздуха внутри плашки вокруг текста, выровнять текст по левому краю
2. Сделать кнопку "к номерам" так же как в дизайне
Заполнение данных
1. Сделать так, чтоб номер форматировался при вводе, "+" должен сразу быть, код страны, код оператора и сам номер должны разделятся. Количество вводимых знаков нужно ограничить, сейчас там бесконечно цифры вводить можно.
2. Вместо кнопки "к номерам" там должна быть кнопка "выбрать еще один номер" как в дизайне, она должна возвращать нас к выбору номеров, где будут забиты те же данные и то же кол-во гостей, что и в первом номере, но при желании их должно быть возможно поменять, и когда мы выберем номер, в разделе заполнения данных будет уже два номера (Это функция есть в тестовом букинге, но еще не реализована в нашем приложении)
3. Заменить:
"Фактом бронирования вы соглашаетесь с обработкой персональных данных и политикой конфиденциальности и пользовательским соглашением"
На:
"Фактом бронирования вы соглашаетесь на обработку предоставленных вами персональных данных. Согласно Федеральному закону "О персональных данных" от 27.07.2006 N 152-ФЗ"
и ссылок не надо
Общие моменты:
1. Проверить все ли данные номера можно форматировать через админку, если что-то нет, то это нужно исправить (речь идет о том, чтоб через админку можно было добавлять новые номера (апартаменты) и они корректно отображались в приложении, можно будет в админке создать тестовый номер, чтоб было проще в этом разобраться (напоминаю доступ к админке конечно же дадим)
2. Проверить реагирует ли приложение на данные из URL (В том случае если человек зашел в букинг через главную страницу сайта, тогда оно должно отображать в URL параметры которые ввел человек и приложение должно их подхватить) (дополнительно это объясним позже)
Скину позже все материалы что есть, которые должны помочь в работе, но сейчас думаю достаточно информации чтоб понять суть работы.
Додатки 1
-
68 Добрый день, готов взяться за ваш проект, есть опыт работы с ReactJS, а так же в верстке сайтов, решим вашу проблему в кратчайшие сроки. Цену готовы немного уменьшить
-
728 15 1 Здравствуйте!
Заинтересовало Ваше предложение, я и моя команда будем очень рады взять данный проект в работу. Меня зовут Сергей, я разработчик и основатель ІТ-компании Devloop. Мы находимся в Украине.
Я не буду тратить ваше время длинными отступлениями или тем, почему Вам нужно выбрать именно нас.
Мы имеем опыт разработки более 3 лет. В нашей работе мы используем такие технологии React Native, React, Laravel, Node.js, PHP, jQuery, HTML5 / CSS3, Git, Vue.js, MySQL, JavaScript, SaaS, API.
Мы имеет опыт разработки проектов разного плана и типа.
Буду надеяться, что мы сможем сотрудничать в ближайшее время.
Спасибо, что нашли время прочитать мою заявку!
С наилучшими пожеланиями,
Сергей
-
367 Здравствуйте!
Очень охотно обсудим с Вами все нюансы с помощью любого удобного сервиса: viber, skype, slack, whatsapp.
Смогу показать работы, которые по ряду причин не могу выставить! Обращайтесь и приятного вам дня!
-
Что используется в качестве BLL? Redux?
-
Актуальні фриланс-проєкти в категорії Javascript та Typescript
Виправити CSS/DOM-верстку карток у Chrome extension для локалізації D&D BeyondЄ Chrome extension Manifest V3, який локалізує сайт D&D Beyond українською. Проєкт написаний на TypeScript + WXT. Розширення працює через content script: знаходить англійський текст на сторінках D&D Beyond і замінює його українським перекладом. Проблема виникла на сторінці:… HTML та CSS верстання, Javascript та Typescript ∙ 18 годин 11 хвилин тому ∙ 36 ставок |
Розробка платформи AM Mobility (автосервіс, парковка, страхування, оренда автомобілів)
259 473 UAH
Шукаємо команду або досвідченого Full Stack розробника для створення MVP платформи AM Mobility. AM Mobility — це єдина цифрова екосистема для автомобілістів, що об'єднує в одному додатку та веб-платформі: парковку; автосервіс; шиномонтаж; автомийку; оренду автомобілів;… Javascript та Typescript, Веб-програмування ∙ 1 день 3 години тому ∙ 94 ставки |
Gsap анімації
1000 UAH
Доброго дня. Треба внести правки в поточному проєкті. Потрібен фахівець, який добре працює на gsap/lenis Треба зробити анімацію карточок. Детально ТЗ тут: https://www.figma.com/design/5bLEJudN5LPpB9ZSoJa2Eb/Untitled?m=auto&t=qwyluUctL1lrMNvh-6 Треба проявити креатив та… Javascript та Typescript, Веб-програмування ∙ 1 день 8 годин тому ∙ 18 ставок |
Комерційна on-premise платформа відеозв'язку «ViM»Требуется разработати on-premise систему відеозв'язку з базовим розрахунком на 100 одночасних підключень (10 ізольованих кімнат по 10 осіб). Платформа повинна мати закладену архітектуру для майбутнього горизонтального масштабування до 1000 користувачів шляхом додавання нових… Javascript та Typescript, Веб-програмування ∙ 2 дні 4 години тому ∙ 30 ставок |
Шукаю наставника з Claude Code для запуску веб-проєкту з нуля**Коротко про завдання:** Я новачок без досвіду в програмуванні. Є готове ТЗ на розробку сайту (42 сторінки, Next.js, PostgreSQL). Хочу реалізувати його самостійно за допомогою Claude Code - потрібен спеціаліст, який налаштує середовище і навчить мене працювати з інструментом.… Javascript та Typescript, Навчання ∙ 3 дні 7 годин тому ∙ 18 ставок |