Alexey

Загугли криптографические библиотеки под JS, они есть. Шифруешь тело запроса в браузере, расшифровываешь на сервере. Может пригодится, если используйте http, а вот для https это излишне.

Движок wiki.js хранит все данные в Postgresql и в данном случае лучше не париться по поводу volume, а просто сделать дамп с помощью pg_dump и восстановить его на новом сервере до запуска контейнера с движком. То есть сделать docker compose up -d db, восстановить дамп, а потом запустить все - docker compose up -d

На каком языке писать UI

Вопрос некорректен.
Пишут либо на xml, либо на java/kotlin/compose. Это неотделимо от андроида

Перейдя на реакт вы будете страдать. Реакт - это тупо даунгрейд. Всё то же самое, но хуже и местами отсутствует. Есть ли в нём хоть какие-то преимущества перед vue? Не знаю таких.
Что за проблемы у вас с библиотеками?

Если сами добавляете класс, то, очевидно, дёргать метод start в момент добавления. Если не сами, тогда следите за элементом с помощью MutationObserver:

new MutationObserver((mutations, observer) => {
  if (mutations[0].target.classList.contains('интересующий-вас-класс')) {
    observer.disconnect();
    typed.start();
  }
}).observe(элементНаличиеКлассаУКоторогоНадоОтследить, { attributes: true });

как вернуть к первоначальному состоянию когда unchecked не понимаю

Очевидно, устанавливать в качестве результата фильтрации не его текущее значение, а полные данные.

Ну и ещё неплохо бы сделать так, чтобы фильтрация по введённой строке не отменяла фильтрацию по чекбоксу - унесите их в один общий эффект, чтобы они работали совместно:

function Posts() {
  const [ posts, setPosts ] = useState([]);
  const [ filteredPosts, setFilteredPosts ] = useState([]);
  const [ search, setSearch ] = useState('');
  const [ checkbox, setCheckbox ] = useState(false);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(r => setPosts(r.data));
  }, []);

  useEffect(() => {
    let filtered = posts;

    if (search) {
      const s = search.toLowerCase();
      filtered = filtered.filter(n => n.title.toLowerCase().includes(s));
    }

    if (checkbox) {
      filtered = filtered.filter(n => n.userId === 10);
    }

    setFilteredPosts(filtered);
  }, [ posts, search, checkbox ]);

  return (
    <>
      <input
        type="text"
        placeholder="Search for article..."
        value={search}
        onChange={e => setSearch(e.target.value)}
      />
      <label>
        User Id 10
        <input
          type="checkbox"
          checked={checkbox}
          onChange={e => setCheckbox(e.target.checked)}
        />
      </label>

      <ul>
        {filteredPosts.map(n => (
          <li key={n.id}>
            <div>{n.userId}</div>
            <div>{n.title}</div>
            <div>{n.body}</div>
          </li>
        ))}
      </ul>
    </>
  );
}

http не поддерживает скачивание папок.
Поэтому простой ответ - никак. Более сложный

Вариант 1
Пройтись по всем папкам, получить список всех файлов и скачивать каждый отдельно.

Вариант 2
На стороне сервера создать архив со всеми файлами и папками и скачать его

Вариант 3
Настроить не web сервер, а что-то другое, ftp/ssh/nfs/samba и воспользоваться клиентом, который умеет работать со структурой директорий (filezilla, rsync, FAR с ftp/ssh плагинами, проводник)

Готовых решений тонны. Только одна беда с ними. Коммерческие дорогие. А вся эта фряфриопенсоусщассваяем ... обычно не тянет на уровень "выставим в интернет .. пусть сами регятся и меня не ломанут". Ломанут =). Не ломанут так нагнут. Не нагнут так постучатся. Не постучатся ... так люди поумнели и не будут на левом сервисе своё личное оставлять. Чуть позже ресурсы иссякнут. А потом беда придет в виде "винт погорел". Короче беда с этими почтовиками =)

с чего начать?

На мой взгляд, начать стоит с детального продумывания вопроса о том, как вы будете отправлять почту.
При использовании даже "чистого" единственного IP вашего сервера очень высока вероятность того, что сервисы наподобие Gmail будут по умолчанию отправлять письма от вас в спам, либо вообще молча дропать. И это при том, что Gmail ещё не самый "привередливый" в этом плане.

По-хорошему, вам потребуется сеть IP-адресов (релеев), которые вы сначала будете постепенно "прогревать", накапливая репутацию, а затем очень тщательно за той репутацией следить.

Если сервис, который вы хотите создать, будет бесплатным, я с трудом представляю как это можно будет сделать. Общедоступность же дополнительно усложнит задачу.

useLocation работает, если компонент с ним прямо или косвенно находится внутри Router.
Как известно, Router получает в пропсы экземпляр history, кладет его в контекст, а useLocation достает из контекста.
Возможно, в сторибуке ты забыл обернуть всё в Router

Вы передаете атрибут path в компонент Router, но нужно передавать этот атрибут в компонент Route

https://v5.reactrouter.com/web/api/Route - по доке есть атрибут path
https://v5.reactrouter.com/web/api/Router - по доке нет атрибута path

также используйте базовый пример из доки:
https://v5.reactrouter.com/web/example/basic

Тайпскрипт правильно ругается потому что таргет события не обязательно должен быть дом элементом. События могут так же порождаться, например XHR запросами.

Я бы на вашем месте сделал так называемую type guard функцию, в которой убеждался бы что таргет действительно элемент дом. Все элементы дом наследуются от объекта HTMLElement. Это можно использовать для проверки:

const isHtmlElement = (v: any): v is HTMLElement => v instanceof HTMLElement;

далее мы можем использовать эту функцию для проверки нашего таргета:

const eventHandler = (e: Event) => {
  if (!isHtmlElement(e.target)) {
    return;
  }
  // Вот здесь мы можем смело работать с таргетом как с ДОМ Элементом
  e.target.classList.toggle('active');
}

УПД

Еще информация к размышлению.

Финальный код, сгенерированный тайпскриптом, не содержит информации о типах. В рантайме нельзя узнать тип интерфейса, выполнив, например `peremennaya instanceof VashInterfeis`. Но всегда можно создать type guard функию, которая будет определять что объект именно нужного типа по каким-то косвенным признакам (например по наличию определённых полей в объекте). Так как код guard функции невозможно провертить статическим анализватором, тайпскрипт не может гарантировать того что ваша guard фунция верна и не пропускает всё подряд. Поэтому, хорошим тоном является писать такой код, который не нуждается в подобных проверках. Это возможно. Код при таком подходе становится стройнее и легче для осмысления.

https://github.com/watsondg/sniffer

https://github.com/faisalman/ua-parser-js