Note-app

Сайт разработан на ReactJs используя библиотеку Ant Design.

Описание

Веб-приложение заметок «NoteMe». По дизайну похожее на Apple Notes. В нем можно создавать, редактирвать и удалять заметки. Все сихронизируется с localStorage.

Структура

• src/redux - настройка Redux Store
• src/components/ListNotes.js - оторбажается слева, поле отображающее все сохранненные заметки
• src/components/EditNote.js - отображается справа от списка ListNotes, Поле в котором полностью можно изменить заметку. не надо нажимать никаких кнопок для входа в режим редактирования, просто вводишь текс и все.
• src/components/Body.js - оболочка для предыдущих двух элементов.
• src/components/Navbar.js - шапка сайта.
• src/components/Footer.js - футер сайта.
• src/note.js - определение типа "Note" и нужных функций для работы с ним.

Важные моменты:

• Было решено не добавлять форматирования текста. Я знаю что последние 3 пункта может решить react-quill полностью и подчистую, однако в нем дизайн не красив и я не смог(либо не успел) его настроить так чтобы он мне нравился. Помимо этого reactmardown мог бы тоже чуть-чуть решить, однако я не хотел играться со входом-выходом в режим редактирования, мне это показалось излишним для самого пользователя.
• Загрузка даных в прилодение происходит в Body.js.
• Загрузка данных из приложения происходит при каждом из действий: удалени, изменение заголовка и/или описания. При создании данные не синхронизируются !
• Была выбрана загрузка данных в localStorage, т.к без бэкенда список алтернатив очень невелик. Данный способ показался лучшим.
• При создании заметки, невозможно создать более одной пустой заметки.
• Нельзя удалять все заметки, кнопка становится некликабельной если осталось менее 2х заметок.
• LisNotes и EditNotes отображаются не в категории full-height, в какойто момент там появляются scrollbars.
• Дата в LisNotes отображается, если день создания не сегодня, иначе - только время создания.
• При входе в приложение создаются defaultNotes.

Как запустить

npm install

Загрузка всех зависимостей необходимых для запуска.

npm start

Запускает проект на локалхосте. Нажми http://localhost:3000 чтобы открыть сайт.