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

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

Особенности

• 🚀 Создано на Node.js + Express
• 🔐 Система регистрации и авторизации по логину и паролю
• 🔒 Безопасное хранение паролей с bcrypt хешированием
• 💾 Хранение данных в SQLite базе данных
• 👥 Изолированные заметки - каждый пользователь видит только свои заметки
• 👤 Личный кабинет с возможностью загрузки аватарки (NEW!)
• 🖼️ Управление аватаркой: загрузка, удаление, предварительный просмотр (NEW!)
• 📝 Поддержка Markdown форматирования
• 🏷️ Система тегов с автоматическим извлечением из заметок (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. Навигация по календарю: кликайте на даты в мини-календаре для просмотра заметок за определенный день

Теги

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

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

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

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

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.