NoteJS - Приложение для быстрых заметок

Простое веб-приложение для создания и управления заметками с поддержкой Markdown форматирования и системой аутентификации.

Особенности

• 🚀 Создано на Node.js + Express
• 🔐 Система регистрации и авторизации по логину и паролю
• 🔒 Безопасное хранение паролей с bcrypt хешированием
• 💾 Хранение данных в SQLite базе данных
• 👥 Изолированные заметки - каждый пользователь видит только свои заметки
• 👤 Личный кабинет с возможностью загрузки аватарки (NEW!)
• 🖼️ Управление аватаркой: загрузка, удаление, предварительный просмотр (NEW!)
• 📝 Поддержка Markdown форматирования
• 🏷️ Система тегов с автоматическим извлечением из заметок (NEW!)
• 🔍 Поиск по заметкам с подсветкой результатов (NEW!)
• 📅 Мини-календарь для навигации по датам заметок (NEW!)
• 📱 Адаптивный дизайн с боковым слайдером на мобильных (NEW!)
• ☰ Мобильный боковой слайдер с календарём, поиском и тегами (NEW!)
• 🎨 Простой и интуитивный интерфейс
• 📱 Адаптивный дизайн

Установка и запуск

Предварительные требования

• Node.js (версия 14 или выше)
• npm

Установка

1. Клонируйте репозиторий:

git clone <repository-url>
cd NoteJS

2. Установите зависимости:

npm install

3. Настройте переменные окружения:
   • Откройте файл .env
   • Установите секрет сессии в переменной SESSION_SECRET
   • Установите порт в переменной PORT (по умолчанию 3000)

Пример файла .env:

SESSION_SECRET=your_session_secret_here
PORT=3000

4. Запустите сервер:

npm start

5. Откройте браузер и перейдите по адресу http://localhost:3000

Использование

Регистрация

1. Нажмите на ссылку "Зарегистрируйтесь" на странице входа
2. Заполните форму регистрации:
   • Логин: минимум 3 символа
   • Пароль: минимум 6 символов
   • Подтвердите пароль: повторите пароль
3. Нажмите кнопку "Зарегистрироваться"
4. Вы будете автоматически залогинены и перенаправлены на страницу заметок

Вход в систему

1. Введите ваш логин
2. Введите ваш пароль
3. Нажмите кнопку "Войти"
4. После успешного входа вы попадете в интерфейс заметок

Создание заметок

1. Введите текст заметки в поле ввода
2. Используйте кнопки форматирования для добавления Markdown элементов:
   • B - жирный текст
   • I - курсив
   • H - заголовок
   • 📋 - элемент списка
   • " - цитата
   • </> - код
   • 🔗 - ссылка
3. Нажмите кнопку "Сохранить"

Редактирование заметок

1. Нажмите кнопку "Редактировать" рядом с заметкой
2. Отредактируйте текст в появившемся поле ввода
3. Нажмите кнопку "Сохранить"

Удаление заметок

1. Нажмите кнопку "Удалить" рядом с заметкой
2. Подтвердите удаление в появившемся диалоговом окне

Личный кабинет

1. Нажмите на ваше имя пользователя в верхней части страницы заметок
2. В личном кабинете вы можете:
   • Загрузить аватарку: нажмите "Загрузить аватар" и выберите изображение (JPG, PNG, GIF до 5 МБ)
   • Удалить аватарку: нажмите кнопку "Удалить" рядом с аватаркой
   • Изменить данные профиля: отредактируйте логин и email
   • Изменить пароль: введите текущий пароль и новый пароль

Поиск и фильтрация

1. Поиск по заметкам: используйте поле поиска в левой панели для поиска по содержимому заметок
2. Фильтрация по тегам: кликайте на теги в левой панели для фильтрации заметок
3. Навигация по календарю: кликайте на даты в мини-календаре для просмотра заметок за определенный день

Теги

• Теги автоматически извлекаются из заметок при использовании символа # (например: #важное)
• Теги отображаются в левой панели с количеством заметок
• Кликабельные теги в заметках позволяют быстро фильтровать контент

Выход из системы

Нажмите кнопку "🚪 Выйти" в верхней части страницы заметок

Мобильная версия

Боковой слайдер на мобильных устройствах

На мобильных устройствах (ширина экрана до 768 пикселей) вместо постоянной левой панели появляется удобный боковой слайдер с кнопкой "☰" в левом верхнем углу.

Функциональность мобильного слайдера:

1. Кнопка открытия - нажмите на кнопку "☰" в левом верхнем углу экрана
2. Содержимое слайдера включает все основные инструменты:
   • 📅 Календарь - полностью функциональный календарь месяца с навигацией
   • 🔍 Поле поиска - синхронизировано с основным полем поиска
   • 🏷️ Теги - все теги с количеством заметок
3. Закрытие слайдера:
   • Нажмите кнопку ✕ в верхнем правом углу слайдера
   • Нажмите на серую область (оверлей) справа
4. Синхронизация - изменения в слайдере (выбор даты, ввод текста, клик на тег) автоматически синхронизируются с основной ПК версией

Преимущества мобильного слайдера:

• ✅ Полная функциональность как в ПК версии
• ✅ Экономия места на экране мобильного устройства
• ✅ Легкое открытие/закрытие
• ✅ Удобная навигация по заметкам
• ✅ Не блокирует контент при открытии (использует оверлей)

Структура проекта

NoteJS/
├── public/                  # Статические файлы (клиентская часть)
│   ├── index.html          # Страница входа
│   ├── register.html       # Страница регистрации
│   ├── notes.html          # Страница заметок
│   ├── profile.html        # Страница личного кабинета (NEW!)
│   ├── login.js            # Логика входа
│   ├── register.js         # Логика регистрации
│   ├── profile.js          # Логика личного кабинета (NEW!)
│   ├── app.js              # Клиентский JavaScript (обновлен)
│   ├── style.css           # Стили (обновлены)
│   └── uploads/            # Загруженные аватарки пользователей (NEW!)
├── server.js               # Express сервер (обновлен)
├── .env                    # Конфигурация (не включать в git!)
├── .gitignore              # Исключения для git (обновлен)
├── package.json            # Зависимости проекта
├── notes.db                # SQLite база данных (создается автоматически)
└── README.md               # Документация

API Endpoints

Аутентификация

• GET / - страница входа
• GET /register - страница регистрации
• POST /api/register - регистрация нового пользователя
• POST /api/login - вход в систему
• POST /logout - выход из системы
• GET /api/user - получить информацию о текущем пользователе (требует аутентификации)

Профиль пользователя (требует аутентификации)

• GET /profile - страница личного кабинета
• PUT /api/user/profile - обновить данные профиля или пароль
• POST /api/user/avatar - загрузить аватарку
• DELETE /api/user/avatar - удалить аватарку

Заметки (требуют аутентификации)

• GET /notes - страница заметок
• GET /api/notes - получить все заметки пользователя
• POST /api/notes - создать новую заметку
• PUT /api/notes/:id - обновить заметку
• DELETE /api/notes/:id - удалить заметку

Безопасность

• Bcrypt хеширование паролей при сохранении
• Сессионная аутентификация с express-session
• Helmet для защиты от распространенных уязвимостей
• CORS конфигурация
• Body Parser для безопасной обработки запросов
• Multer для безопасной загрузки файлов с валидацией
• Защищенные маршруты с проверкой аутентификации
• Валидация загружаемых файлов: проверка типа, размера и формата
• Изоляция данных: каждый пользователь видит только свои заметки и файлы

Требования к паролям

• Минимум 6 символов при регистрации
• Пароли хешируются с использованием bcrypt (стандарт раундов: 10)
• Пароли не могут быть восстановлены из БД

Требования к логину

• Минимум 3 символа
• Должен быть уникальным (нельзя создать два аккаунта с одинаковым логином)

Требования к аватаркам

• Максимальный размер: 5 МБ
• Поддерживаемые форматы: JPG, PNG, GIF
• Автоматическое изменение размера: изображения автоматически обрезаются до квадратного формата
• Безопасность: проверка типа файла и размера перед загрузкой

Разработка

Для разработки используйте:

npm run dev

Этот скрипт использует nodemon для автоматической перезагрузки сервера при изменении файлов. Больше не нужно вручную перезапускать сервер при каждом изменении кода!

Лицензия

Этот проект создан Fovway.

Календарь

На странице заметок слева расположен интерактивный календарь, который позволяет:

• 📅 Просмотреть текущий месяц с выделением сегодняшней даты
• ◀️ Переключаться между месяцами с помощью кнопок навигации
• 🔗 Выбирать даты для фильтрации заметок (функция может быть расширена)
• 📱 Адаптивность - на мобильных устройствах календарь располагается на всю ширину выше формы

Характеристики календаря

• Сегодняшний день выделен синим цветом
• Выбранный день отмечен зелёным цветом
• Дни из соседних месяцев отображаются серым цветом
• Календарь использует русские названия месяцев и дней недели
• Полностью функционален без необходимости в дополнительных библиотеках