Персональная система управления заметками с возможностями организации и редактирования контента.

WOOJ - это веб-приложение для создания, организации и управления личными заметками ("вуджами"). Система позволяет структурировать информацию через систему топиков, поддерживает rich-text редактирование и предоставляет интуитивный интерфейс для работы с контентом.

• Создание и редактирование заметок с rich-text редактором (TipTap)
• Топики для организации контента
• Закрепление важных заметок
• Drag & Drop для изменения порядка заметок
• Корзина с возможностью восстановления
• Система аутентификации с верификацией email
• Загрузка аватаров пользователей
• Адаптивный дизайн для всех устройств

(блин, надо же было что-то написать... 🙃😇)

Проект построен на архитектуре с разделением на frontend и backend:

• API: RESTful API с Laravel Sanctum для аутентификации
• Модели: User, Wooj, Topic, WoojTopic
• База данных: PostgreSQL с миграциями
• Сервисы: WoojService, TopicService, UserService (бизнес-логика)

• Состояние: Pinia stores для управления состоянием
• Роутинг: Vue Router с защищенными маршрутами
• UI: Кастомные компоненты и стили
• Редактор: TipTap для rich-text редактирования

• Framework: Laravel 12.x
• PHP: 8.4
• Database: PostgreSQL
• Authentication: Laravel Sanctum
• Package: Compoships для составных ключей

• Framework: Vue.js 3.5
• Build Tool: Vite 6.x
• State Management: Pinia 3.x
• Routing: Vue Router 4.x
• Editor: TipTap 2.x
• Styles: SCSS
• Icons: Font Awesome
• Additional: Swiper.js, Lodash, Advanced Cropper, Draggable

• Containerization: Docker & Docker Compose
• Web Server: Nginx
• Mail: MailHog для разработки

• Docker
• Docker Compose
• Git

# Клонировать репозиторий
git clone https://github.com/scottwalker87/wooj.git
cd wooj

# Создать .env файл на основе .env.example
cp api/.env.example api/.env

# Настроить переменные окружения в .env
vim api/.env

# Запустить контейнеры
docker-compose up -d

# Установить зависимости backend
docker-compose exec api composer install

# Выполнить миграции
docker-compose exec api php artisan migrate

# Установить зависимости frontend
docker-compose exec front npm install

# Запустить dev сервер frontend
docker-compose exec front npm run dev

• Frontend (dev): http://localhost:5173
• Frontend (build): http://localhost:8080
• API: http://localhost:7070
• MailHog: http://localhost:8025
• Database: localhost:5432

• users: Пользователи системы
• woojs: Заметки (вуджи)
• topics: Топики для организации
• woojs_topics: Связь заметок и топиков

• pinned - Закрепленные заметки
• public - Публичные заметки
• custom - Пользовательские топики

POST /api/register    # Регистрация
POST /api/login       # Вход
POST /api/logout      # Выход
GET  /api/check       # Проверка авторизации
POST /api/resend      # Повторная отправка письма

GET    /api/woojs              # Список заметок
POST   /api/woojs              # Создание заметки
GET    /api/woojs/{id}         # Получение заметки
PUT    /api/woojs/{id}         # Обновление заметки
DELETE /api/woojs/{id}         # Удаление в корзину
PUT    /api/woojs/{id}/restore # Восстановление
PUT    /api/woojs/{id}/pin     # Закрепление
PUT    /api/woojs/{id}/unpin   # Открепление

GET    /api/topics           # Список топиков
POST   /api/topics           # Создание топика
PUT    /api/topics/{id}      # Обновление топика
DELETE /api/topics/{id}      # Удаление топика
PUT    /api/topics/{id}/sort # Сортировка заметок

• Минималистичный интерфейс
• Адаптивная верстка для мобильных устройств
• Анимации и плавные переходы

• Перетаскивание заметок между топиками
• Изменение порядка заметок внутри топика
• Визуальная обратная связь при перетаскивании

# Войти в контейнер API
docker-compose exec api bash

# Artisan команды
php artisan migrate
php artisan tinker
php artisan make:model ModelName
php artisan make:controller ControllerName

# Composer
composer install
composer update

# Войти в контейнер Frontend
docker-compose exec front bash

# NPM команды
npm run dev          # Запуск dev сервера
npm run build        # Сборка для продакшена
npm run preview      # Предварительный просмотр сборки
npm run format       # Форматирование кода

• Laravel Documentation
• Laravel Sanctum

• Vue.js
• Vue Router
• Pinia

• Font Awesome
• Google Fonts

• TipTap Editor
• Swiper.js
• Vue Advanced Cropper
• Draggable
• Lodash

Проект распространяется под MIT License.