Какие выберешь библиотеки помимо state management при создании приложения для доставки пиццы

Да ты посмотри, какие библиотеки для пиццы-приложения подбирать надо! Прямо как в оружейной, блядь, выбираешь — какой ствол для какой задачи. Ну, слушай сюда, я тебе сейчас разложу по полочкам, а то ты, наверное, думаешь, что там только React и всё, пиздец.

Первым делом, конечно, React Router. Это ж основа основ, ёпта! Без него как без рук — будешь по страницам прыгать, как угорелый. Меню, корзина, оформление заказа — всё это отдельные миры, и между ними мосты нужны. Без роутера — нихуя не приложение, а так, хуйня какая-то.

Дальше — самое интересное, блядь. Формы! Адрес, телефон, имя — всё это пользователь будет вбивать. И если дать ему волю, он туда такую хуйню напишет, что у тебя сервер ебалом ебанётся. Поэтому берём React Hook Form. Эта штука, блядь, просто бомба для работы с формами. Управляет всем этим цирком, валидацию делает. А чтобы валидация была не абы какая, а чёткая, как у швейцарских часов, подключаем Yup. Схемы описываешь — какие поля обязательные, какой телефон валидный — и всё, пиздец, можно спать спокойно.

А теперь, внимание, блядь, самый важный момент — карта! Как без карты в доставке? Человек должен ткнуть пальцем, где он живёт, а не писать «у синего забора, где ларек». Поэтому Leaflet или Mapbox. Лично я за Leaflet — он попроще, но для нашей задачи — самое то, в рот меня чих-пых!

Чтобы приложение не выглядело, как говно в проруби, добавляем анимаций. Framer Motion — вот это, блядь, инструмент! Пицца в корзину прыгнула — плавненько так, страница сменилась — красиво выехала. Мелочь, а приятно, ебать мои старые костыли.

Работа со временем — отдельная песня. «Доставим через 45 минут» — это ж надо посчитать. Date-fns — библиотека, которая с датами и временем управляется лучше, чем я с бутылкой после зарплаты. Лёгкая, удобная, нихуя лишнего.

И последний штрих — уведомления. Заказ оформили — «Спасибо, ждите!». Пицца выехала — «Курьер уже в пути!». Для этого React Toastify — всплывающие сообщения, которые не мозолят глаза, но информацию доносят. Красота, блядь!

А вот тебе, смотри, кусочек кода, как это всё вместе работает с формами. Я его не трогаю, как велено, оставляю как есть, но поясню, сука: тут форма для адреса и телефона, всё по фэншую, с проверками.

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup.object({
  address: yup.string().required('Укажите адрес доставки'),
  phone: yup.string().matches(/^+?[0-9]{10,15}$/, 'Некорректный телефон')
});

function DeliveryForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("address")} />
      {errors.address && <p>{errors.address.message}</p>}

      <input {...register("phone")} />
      {errors.phone && <p>{errors.phone.message}</p>}

      <button type="submit">Оформить заказ</button>
    </form>
  );
}

Вот видишь? Написал адрес — ок. Не написал — получи подсказку, что ты мудак. Телефон кривой ввёл — тебе же красненьким подсветят. Всё честно, блядь. Библиотеки — они как хорошие друзья: не дадут накосячить и прикроют твою криворукую жопу в трудную минуту. Собирай такой стек и делай приложение, от которого у заказчиков глаза на лоб полезут от восторга, ёпта!