Home

📘 ProgressHub — Документація

🔍 Опис

ProgressHub — веб‑застосунок для відстеження прогресу над проектами. Створений у межах курсу (3 курс, 2 семестр, 2024 р.) з метою розробки диплому.

Vlad The Goat

---

🛠 Технології

• Next.js (App router, TypeScript)

• Prisma для роботи з базою даних

• Tailwind CSS — утиліта для стилів

• next/font ‑ оптимізація шрифтів (Inter)

• next-auth — аутентифікація

• Tiptap — редактор rich text

• Shadcn‑UI, Storybook — інтерфейс компонування

• WebSocket — реальне оновлення даних

• Dockerfile‑nextjs — контейнерний запуск

---

🚀 Початок роботи

Крок 1. Клонування репозиторію

git clone https://github.com/FullmetalBober/ProgressHub.git cd ProgressHub 

Крок 2. Інсталяція залежностей

npm install 
# або 
yarn install 
# або
pnpm install 
# або 
bun install

Крок 3. Запуск бази даних (через Prisma)

npx prisma migrate deploy 
# або під час розробки: 
:contentReference[oaicite:11]{index=11} 

Крок 4. Запуск у режимі розробки

npm run dev
yarn dev
pnpm dev 
bun dev 

Відкрий у браузері: http://localhost:3000

---

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

.github/           — CI/CD конфігурації 
app/               — сторінки та layout (App Router) 
components/        — UI компоненти 
context/           — контексти React 
hooks/             — власні хуки 
lib/               — утиліти 
prisma/            — схема країни і міграції 
public/            — статичні ресурси 
storybook/         — налаштування редактора 
websocket/         — WebSocket-логіка 
Dockerfile-nextjs  — Docker-образ для продакшн-запуску 

---

🛣 Маршрути та сторінки

Маршрути визначаються через App Router:

• app/page.tsx — головна сторінка

• Інші сторінки пишуться у app/... відповідно до шляху

• Зони layout та глобальні компоненти (напр., навігація) — у app/layout.tsx

---

🛡 Авторизація

Імплементація на основі next-auth. Налаштування — у config/, likely з файлами .env (докладніше — див витік в .env.example).

---

💬 WebSocket

У папці websocket/ знаходиться реалізація бекенд-сокетів для стрімінгу оновлень прогресу у реальному часі.

---

🐳 Докер

Проєкт містить Dockerfile-nextjs для створення образу контейнера:

Dockerfile

---

🧩 Практичне застосування

• Створюєш акаунт (через Next‑Auth)

• Робиш проєкт/ціль — додаєш прогрес (через Tiptap UI)

• Відстежуєш процес — UI працює через WebSocket

• Перегляд через Storybook компонентів — корисно для UI‑аналізу

---

✅ Рекомендовані команди

	КомандаПризначення
npm run dev	Запуск у режимі dev
npm run build	Білд проекту
npm run start	Старт продакшн
npm run storybook	Запуск Storybook
npx prisma migrate dev	Міграції бази
npx prisma studio	UI для бази даних
docker build . -f Dockerfile-nextjs -t progresshub:latest	Створення Docker-образу

---

🤝 Співпраця

1. Клон → нова гілка (feature/...)

2. Написання коду + тести

3. Migrations через Prisma

4. Pull request на main