Усі проєкти04Замовлення онлайн

BestellApp.

Увесь шлях, який проходить покупець, щоб зробити замовлення: меню, кошик, що рахує на ходу, вартість доставки, яка змінюється разом із сумою, оформлення й підтвердження. Каркас, що лежить під кожним магазином і службою доставки.

Моя роль
Повне переписування — архітектура, дизайн, код
Обсяг
~2000 рядків, 20 позицій меню
Стек
React 18, Vite, Tailwind, Framer Motion
Статус
Живий, дві мови
Меню BestellApp із відкритим кошиком

Чому шлях замовлення варто робити акуратно

Усе до кошика — це дизайн. Усе після нього — це гроші. Відвідувач, який не бачить поточної суми, губить кошик після перезавантаження сторінки або впирається у форму, що двічі питає одне й те саме, не скаржиться — він іде, і жодна аналітика не скаже вам чому.

Тому цей проєкт свідомо про непоказну середину: що таке кошик, де він живе і що відбувається між «хочу оце» і «замовлення прийнято».

Рішення про кошик, яке рятує згодом

Кошик зберігається як звичайна відповідність «номер позиції → кількість», і більше нічого. Не копія товару, не його ціна, не місце в меню — лише { id: кількість }, збережене в браузері між візитами.

Звучить як дрібниця, а поводиться як страховка. Ціни змінюються, страви перейменовують, меню переставляють — а кошик, збережений учора, сьогодні все одно розкривається правильно, бо він ніколи не зберігав знімок того, що може змінитися. Кошики, які копіюють товар цілком, — це саме те, через що покупець на оформленні бачить ціну минулого місяця.

Зберігай посилання, а решту діставай у момент показу. Поки будуєш, це не коштує нічого, — зате рятує від незручної розмови, коли ціни почнуть рухатися.

Суми теж не зберігаються, а обчислюються. Кількість, проміжна сума й кількість позицій виводяться з тієї самої однієї відповідності, тож немає другого джерела правди, яке могло б розійтися з першим.

Доставка, яка заохочує більше замовлення

Доставка коштує 3,90 €, а від 25 € — безкоштовна. Обидва числа лежать в одному місці коду, поруч, тож клієнт може їх змінити, і нікому не доведеться нишпорити по компонентах.

Цікаве тут не сама сума, а те, що покупець бачить, скільки йому лишилося до порога, ще поки вибирає. Це найстаріший важіль в онлайн-замовленнях, і працює він з простої причини: «додайте ще на 4 € — і доставка безкоштовна» — краща пропозиція, ніж «заплатіть 3,90 €», причому у виграші обидві сторони.

Дві мови, вирішені на старті

Інтерфейс працює німецькою та англійською, і кожен рядок живе в одному файлі перекладів, а не всередині компонентів. Назви страв лежать окремо, у даних меню, бо належать до контенту клієнта, а не до інтерфейсу.

Робити так із першого дня варто заради вартості. Додавати другу мову заднім числом означає відкрити в проєкті кожен компонент і вручну витягти з нього текст; вирішене наперед — це один файл. Будь-який клієнт, який колись продаватиме за кордон, зрештою про це попросить, і до запуску це в кілька разів дешевше, ніж після.

Форматування теж іде за мовою — ціни виводяться за правилами локалі, а не склеюються з прибитим символом валюти.

Що тут справжнє, а що демонстрація

Бути точним тут важливіше, ніж мати гарний скриншот:

  • Оплати немає. Оформлення збирає замовлення й обраний спосіб оплати, а тоді завершується підтвердженням. Приймати справжні гроші — це платіжний провайдер і сервер: свідомий наступний крок, а не щось, на що тут натякають.
  • Меню — це файл, а не система. Двадцять позицій лежать у коді. Робочому закладу треба редагувати меню самому, а це вже адмінка або CMS позаду. Дані вже мають придатну для цього форму — замінити файл на API буде невеликою правкою.
  • Замовлення нікуди не йдуть. Нічого не відправляється ні на кухню, ні на пошту. Для справжнього клієнта я будував би це першим — і чесно кажу: тут цього немає.