Как правильно разработать todolist?

Question

[dotatello63]

Всем добрый день!
Потихоньку оттачиваю свои навыки и решил написать простенький todolist но со всеми элементами настоящего веб-приложения чтобы понять что к чему, какие элементы должны присутствовать, и собственно провернуть полный цикл разработки.
Frontend - React, Backend - .Net Core (шаблон в Visual Studio), DB - Postgres

И так, вопросы:

1)Аутентификация/авторизация. Приложение у меня многопользовательское, значит нужна аутентификация/авторизация. Реализовал с помощью JWT. Запрос, если не авторизован redirect на логин, после логина с бэкенда высылаем jwt, приклеиваем его в sessionStorage, дальше по нему ходим к API. В общем что то в таком духе. Достаточно ли этого для подобного приложения, делают ли что то еще?

2)fetch запросы при каждом изменении. Записи пользователя должны изменяться, и подтягиваться в свежем виде, так? Я сделал следующее, при каждом изменении отсылаем id записи на сервер, меняем ее, по успешному ответу обновляем state и происходит render. Вопрос, правильный ли это подход? Пока я один выглядит здорово и то вызывает сомнения а не будет ли сильной нагрузкой постоянные нажатия на чекбокс? А что будет если приложением будет пользоваться множество людей? А что если сущность моей записи станет жирной например как в todoist добавиться календарь, заметки, подзадачи, комментарии, общий доступ и т.д. все это при изменении фигачить fetch запросом? или есть более адекватные решения? В общем этот момент тоже хотелось бы прояснить.

3)Идентифицируем пользователя по jwt. Когда получаю запрос, я достаю из jwt id пользователя и работаю с его данными, вроде это делается так, просто для уточнения)

4)React при ошибке белый экран. Это больше вопрос для тех кто пользовался шаблоном из VS о котором писал выше, думаю дело в нем. Все же я скачал все возможные npm пакеты которые в теории должны отображать ошибку, но так и не получилось это настроить.

Приложение маленькое по этому особо нечего больше спросить, если я что то упустил, или вам есть что добавить, буду рад выслушать и почитать комментарии, заранее спасибо!

Answer 1

[Роман]

2. Читаем, что такое WebAPI. Ему есть альтернативы, например gRPC, GraphQL.
скажу наперед, добавятся данные к заметке, не обязательно на сервер слать заметку и все сущности связанные с ней, отсылаем только изменения.

Answer 2

[Владимир Коротенко]

1,3 просто забудьте https://docs.duendesoftware.com/identityserver/v6/...
Используйте готовое решение
Хотя лучше вот это https://docs.duendesoftware.com/identityserver/v6/...
А потом подтянуть до предыдущего совета.
И да все можно сделать в 1 приложении

4. реакт ругается как в консоль так и в браузер, а когда белый экран откройте f12 и все там будет
2. Ничего не мешает вам сравнить то что пришло и то что есть и послать дельту.
Например пришло 700кб Вы в конец добавили 100 символов. По итогу вы вызываете что то типа

const data = { text: 'append text' };

fetch('https://example.com/post/42/append', {
  method: 'POST', 
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then((response) => response.json())
  .then((data) => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });