BestellApp
Увесь шлях, який проходить покупець, щоб зробити замовлення: меню, кошик, що рахує на ходу, вартість доставки, яка змінюється разом із сумою, оформлення й підтвердження. Каркас, що лежить під кожним магазином і службою доставки.
- Моя роль
- Повне переписування — архітектура, дизайн, код
- Обсяг
- ~2 000 рядків, 20 позицій меню
- Стек
- React 18, Vite, Tailwind
- Статус
- Живий, дві мови
Чому шлях замовлення варто робити акуратно
Усе до кошика — це дизайн. Усе після нього — це гроші. Відвідувач, який не бачить поточної суми, губить кошик після перезавантаження сторінки або впирається у форму, що двічі питає одне й те саме, не скаржиться — він іде, і жодна аналітика не скаже вам чому.
Тому цей проєкт свідомо про непоказну середину: що таке кошик, де він живе і що відбувається між «хочу оце» і «замовлення прийнято».
Рішення про кошик, яке рятує згодом
Кошик зберігається як звичайна відповідність «номер позиції → кількість», і більше нічого. Не копія товару, не його ціна, не місце в меню — лише { id: кількість }, збережене в браузері між візитами.
Звучить як дрібниця, а поводиться як страховка. Ціни змінюються, страви перейменовують, меню переставляють — а кошик, збережений учора, сьогодні все одно розкривається правильно, бо він ніколи не зберігав знімок того, що може змінитися. Кошики, які копіюють товар цілком, — це саме те, через що покупець на оформленні бачить ціну минулого місяця.
Зберігай посилання, а решту діставай у момент показу. Поки будуєш, це не коштує нічого, — зате рятує від незручної розмови, коли ціни почнуть рухатися.
Суми теж не зберігаються, а обчислюються. Кількість, проміжна сума й кількість позицій виводяться з тієї самої однієї відповідності, тож немає другого джерела правди, яке могло б розійтися з першим.
Доставка, яка заохочує більше замовлення
Доставка коштує 3,90 €, а від 25 € — безкоштовна. Обидва числа лежать в одному місці коду, поруч, тож клієнт може їх змінити, і нікому не доведеться нишпорити по компонентах.
Цікаве тут не сама сума, а те, що покупець бачить, скільки йому лишилося до порогу, ще поки вибирає. Це найстаріший важіль в онлайн-замовленнях, і працює він з простої причини: «додайте ще на 4 € — і доставка безкоштовна» — краща пропозиція, ніж «заплатіть 3,90 €», причому у виграші обидві сторони.
Дві мови, вирішені на старті
Інтерфейс працює німецькою та англійською, і кожен рядок живе в одному файлі перекладів, а не всередині компонентів. Назви страв лежать окремо, у даних меню, бо належать до контенту клієнта, а не до інтерфейсу.
Робити так із першого дня варто заради вартості. Додавати другу мову заднім числом означає відкрити в проєкті кожен компонент і вручну витягти з нього текст; вирішене наперед — це один файл. Будь-який клієнт, який колись продаватиме за кордон, зрештою про це попросить, і до запуску це в рази дешевше, ніж після.
Форматування теж іде за мовою — ціни виводяться за правилами локалі, а не склеюються з прибитим символом валюти.
Що тут справжнє, а що демонстрація
Бути точним тут важливіше, ніж мати гарний скріншот:
- Оплати немає. Оформлення збирає замовлення й обраний спосіб оплати, а тоді завершується підтвердженням. Приймати справжні гроші — це платіжний провайдер і сервер: свідомий наступний крок, а не щось, на що тут натякають.
- Меню — це файл, а не система. Двадцять позицій лежать у коді. Робочому закладу треба редагувати меню самому, а це вже адмінка або CMS позаду. Дані вже мають придатну для цього форму — замінити файл на API буде невеликою правкою.
- Замовлення нікуди не йдуть. Нічого не відправляється ні на кухню, ні на пошту. Для справжнього клієнта я будував би це першим — і чесно сказати, що тут цього немає.