microdao-daarion/apps/web/README_WEB.md

DAARION Web Frontend

Графічний інтерфейс для DAARION MVP на базі Next.js 15 з glassmorphism дизайном.

🚀 Швидкий старт

Локальна розробка

cd apps/web

# Встановити залежності
npm install

# Запустити dev сервер
npm run dev

Відкрийте http://localhost:3000

Змінні середовища

Створіть .env.local:

# URL бекенду (для розробки)
NEXT_PUBLIC_API_BASE_URL=http://localhost:8080

# Для продакшену залиште порожнім (same-origin)
# NEXT_PUBLIC_API_BASE_URL=

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

apps/web/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── page.tsx           # Landing / Home
│   │   ├── layout.tsx         # Root layout
│   │   ├── globals.css        # Global styles
│   │   ├── city/
│   │   │   ├── page.tsx       # City rooms list
│   │   │   └── [slug]/
│   │   │       └── page.tsx   # Individual room
│   │   └── secondme/
│   │       └── page.tsx       # Second Me profile
│   ├── components/
│   │   ├── Navigation.tsx     # Header navigation
│   │   ├── StatusIndicator.tsx # API health indicator
│   │   └── Skeleton.tsx       # Loading skeletons
│   └── lib/
│       ├── api.ts             # API client
│       └── utils.ts           # Utility functions
├── public/                     # Static assets
├── Dockerfile                  # Production container
├── next.config.ts             # Next.js config
├── tailwind.config.ts         # Tailwind config
└── package.json

🎨 Дизайн

Glassmorphism стиль

• Темна тема за замовчуванням (bg-slate-950)
• Напівпрозорі панелі з backdrop-blur
• Градієнтні акценти (cyan → blue)
• Анімовані hover-ефекти

CSS класи

.glass-panel       /* Базова скляна панель */
.glass-panel-hover /* Панель з hover ефектом */
.glass-card        /* Картка з тінню */
.text-gradient     /* Градієнтний текст */
.glow-accent       /* Світіння акценту */

🛣️ Роути

Шлях	Опис
/	Landing page з features
/city	Список кімнат міста
/city/[slug]	Окрема кімната
/secondme	Профіль Second Me

🔌 API інтеграція

Всі виклики до API проходять через /api/*:

import { api } from '@/lib/api'

// Отримати кімнати
const rooms = await api.getCityRooms()

// Отримати профіль Second Me
const profile = await api.getSecondMeProfile()

// Перевірка здоров'я API
const isHealthy = await api.checkHealth()

🐳 Docker

Збірка образу

cd apps/web
docker build -t daarion-web .

Запуск контейнера

docker run -p 3000:3000 \
  -e NEXT_PUBLIC_API_BASE_URL= \
  daarion-web

Docker Compose

services:
  web:
    build: ./apps/web
    ports:
      - "3000:3000"
    environment:
      - NEXT_PUBLIC_API_BASE_URL=

📱 Мобільна адаптація

• Responsive breakpoints: sm:640px, md:768px, lg:1024px
• Mobile-first підхід
• Бургер-меню для навігації на мобільних
• Оптимізовані розміри тексту та відступів

🔧 Команди

npm run dev      # Development server
npm run build    # Production build
npm run start    # Start production server
npm run lint     # Run ESLint

🔜 Roadmap

• Matrix/WebSocket інтеграція для чату
• Авторизація (Passkey/OAuth)
• Agent Console
• Wallet/Governance екрани
• PWA support
• Dark/Light theme toggle