Библиотека заклинаний для нейросетей. Магия — в правильных словах. Мы просто помогаем их найти.
MagikBook — русскоязычное сообщество и каталог промптов для Midjourney, ChatGPT, Kandinsky, Stable Diffusion и других ИИ-моделей.
Здесь авторы публикуют проверенные формулировки с примерами результатов, а зрители находят готовые «заклинания» и копируют их в один клик. Для создателей — портфолио и битвы, для искателей — быстрый путь от идеи до генерации, без бесконечных поисков по чатам и документации.
- 📚 Лента и категории — masonry-сетка промптов, фильтры по типу (текст / изображение / видео), популярности и новизне.
- ⚔️ Битва промптов — голосуйте за лучший вариант из двух и смотрите рейтинг ELO.
- 🪄 Гримуар — сохраняйте любимые промпты в личную коллекцию.
- 🧑🎨 Профиль и портфолио — публичная страница автора (
/u/[username]) со всеми публикациями. - 🤖 Генерация через SSE — живой поток сгенерированного результата прямо в интерфейсе.
- 🔐 Авторизация — Telegram, VK, Google или email OTP через HttpOnly-cookie.
- 🌗 Светлая и тёмная тема — design tokens, переключение в шапке, запоминается в
magikbook-theme. - 🐳 Docker-ready — собранный образ под Node.js 20 для деплоя за Nginx.
# 1. Клонировать репозиторий
git clone git@github.com:Shugar86/magikbook.git
cd magikbook
# 2. Установить зависимости
npm install
# 3. Подготовить окружение
cp .env.example .env
# Для локальной разработки оставьте BACKEND_URL=http://127.0.0.1:8000
# Укажите NEXT_PUBLIC_VK_APP_ID, если планируете вход через VK.
# 4. Запустить dev-сервер (Turbopack)
npm run devОткройте http://localhost:3000.
# Проверка типов
npx tsc --noEmit
# Сборка
npm run build
# Запуск на production-порту 3002
npm start -- -p 3002📋 Полный чеклист деплоя API + фронта находится в репозитории
magikbook-api, файлPRODUCTION_CHECKLIST.md. Чеклист по фронтенду — вdocs/PRODUCTION.md.
Этот репозиторий — Next.js-фронтенд. Вся бизнес-логика, база данных и ML-инфраструктура живут в отдельном бэкенде magikbook-api (FastAPI).
| Область | Технология | Назначение |
|---|---|---|
| Язык | TypeScript 5.8 | Строгая типизация фронтенда и единый доменный контракт |
| Фреймворк | Next.js 15 (App Router) | SSR, RSC, Route Handlers, прокси на API |
| UI | React 18 | Компонентный интерфейс |
| Стили | Tailwind CSS 3 + tailwindcss-animate |
Утилитарные стили и анимации |
| Motion | Framer Motion | Переходы и интерактив |
| Иконки / тосты | lucide-react, sonner | UX-детали |
| Темы | next-themes | Светлая / тёмная тема |
| Качество | ESLint, Biome, Playwright | Линт, форматирование, e2e |
| Инфра | Docker, Nginx, GitHub Actions | Контейнеризация, прокси, CI |
| Бэкенд | FastAPI (magikbook-api) |
Данные, авторизация, генерация |
Клиент → Next.js → FastAPI:
Browser → /api/* → Next.js rewrites → BACKEND_URL + /api/* → FastAPI
SSR / RSC:
Next.js Server → fetch(BACKEND_URL + "/api/...") → FastAPI
⚠️ Железное правило: клиентский JS всегда использует относительные/api/*, а сервер Next.js —BACKEND_URL. Никогда не используйтеNEXT_PUBLIC_*с Docker-hostname в серверном коде.
magikbook/
├── .github/workflows/ # CI: type-check + build
├── docs/ # Дополнительная документация
│ └── PRODUCTION.md # Чеклист деплоя фронтенда
├── public/ # Статика: шрифты, иконки, OG-изображения
├── src/
│ ├── app/ # App Router: страницы, layout, модалки, API-роуты
│ │ ├── api/ # Next.js Route Handlers (прокси / адаптеры)
│ │ ├── admin/ # Админ-панель (модерация)
│ │ ├── cabinet/ # Личный кабинет автора
│ │ ├── feed/ # Лента промптов
│ │ ├── prompt/ # Страница промпта
│ │ ├── submit/ # Публикация нового промпта
│ │ ├── u/ # Публичные профили / портфолио
│ │ └── ... # Остальные маршруты
│ ├── components/ # React-компоненты
│ │ ├── cabinet/ # Компоненты кабинета
│ │ └── portfolio/ # Компоненты портфолио
│ ├── lib/ # Утилиты: auth, сессия, VK-видео, плюрализация
│ └── types/ # Единый доменный контракт TypeScript
├── .env.example # Шаблон переменных окружения
├── Dockerfile # Production-образ
├── next.config.js # Rewrites на бэкенд, image domains, serverActions
├── tailwind.config.ts # Тема и design tokens
└── tsconfig.json # Конфигурация TypeScript
Чтобы разобраться в проекте за ~15 минут, читай в таком порядке:
next.config.js— железное правило архитектуры: браузер ходит на/api/*, Next.js проксирует наBACKEND_URL. Понять это — понять весь фронт.src/app/— роуты App Router:feed,generate,grimoire, профиль. Server Components по умолчанию.src/app/feed/page.tsx— типовой серверный компонент: как страница тянет данные с бэкенда и рендерит ленту.
// src/app/api/example/route.ts
import { NextResponse } from 'next/server';
export async function GET() {
const backendUrl = process.env.BACKEND_URL || 'http://127.0.0.1:8000';
const res = await fetch(`${backendUrl}/api/example`, {
cache: 'no-store',
});
if (!res.ok) {
return NextResponse.json(
{ error: 'Backend unavailable' },
{ status: res.status }
);
}
const data = await res.json();
return NextResponse.json(data);
}import type { Prompt } from '@/types';
function copyToClipboard(prompt: Prompt) {
navigator.clipboard.writeText(prompt.prompt_text);
}npm run lint # TypeScript + ESLint
npm run format # BiomeВайб: playful-magic — «магия в правильных словах, мы помогаем их найти».
- Волшебство, но полезное. Гримуар, битвы, заклинания — игровой язык поверх честного каталога промптов.
- Путь в один клик. От найденного промпта до копии — минимум трения, без блужданий по чатам.
- Уважение к глазам. Светлая и тёмная тема переключаются в шапке и запоминаются между визитами.
См. CHANGELOG.md.
Хотите помочь? См. CONTRIBUTING.md. Мы используем ветки feature/* / fix/*, Pull Request в main и зелёный CI.
MIT © 2026 Shugar86