Доделать front end модуля бронирования (React.js)
67 USDВ основном модуль уже готов, нужно сверстать календарь (согласно готовому дизайну), добавить одну функцию и ряд мелких исправлений. Обязательно все должно быть сделано с помощью 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 параметры которые ввел человек и приложение должно их подхватить) (дополнительно это объясним позже)
Скину позже все материалы что есть, которые должны помочь в работе, но сейчас думаю достаточно информации чтоб понять суть работы.
Applications 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?
-
Current freelance projects in the category Javascript and Typescript
Fix the CSS/DOM layout of cards in the Chrome extension for localizing D&D BeyondThere is a Chrome extension Manifest V3 that localizes the D&D Beyond website into Ukrainian. The project is written in TypeScript + WXT. The extension works through a content script: it finds English text on D&D Beyond pages and replaces it with the Ukrainian translation. The… HTML & CSS, Javascript and Typescript ∙ 15 hours 53 minutes back ∙ 33 proposals |
Development of the AM Mobility platform (car service, parking, insurance, car rental)
5770 USD
We are looking for a team or an experienced Full Stack developer to create the MVP of the AM Mobility platform. AM Mobility is a unified digital ecosystem for motorists, combining in one application and web platform: parking; car service; tire fitting; car wash; car rental;… Javascript and Typescript, Web Programming ∙ 1 day back ∙ 93 proposals |
Gsap animations
22 USD
Good day. Corrections need to be made in the current project. A specialist is needed who works well with gsap/lenis. Animation of cards needs to be done. Detailed specifications here:… Javascript and Typescript, Web Programming ∙ 1 day 6 hours back ∙ 18 proposals |
Commercial on-premise video communication platform "ViM"It is required to develop an on-premise video conferencing system with a basic calculation for 100 simultaneous connections (10 isolated rooms of 10 people each). The platform should have a built-in architecture for future horizontal scaling up to 1000 users by adding new media… Javascript and Typescript, Web Programming ∙ 2 days 1 hour back ∙ 29 proposals |
I am looking for a mentor with Claude Code to launch a web project from scratch.Brief about the task: I am a beginner with no programming experience. I have a ready specification for website development (42 pages, Next.js, PostgreSQL). I want to implement it myself using Claude Code - I need a specialist who will set up the environment and teach me how to… Javascript and Typescript, Tuition ∙ 3 days 5 hours back ∙ 18 proposals |