Astro Redi

Монорепозиторий образовательной платформы Redi с курсами и материалами для обучения.

Описание проекта

Проект представляет собой полнофункциональное веб-приложение с разделением на frontend и backend части:

• Frontend: Современное SSR-приложение на Astro с интеграцией SolidJS для интерактивных компонентов
• Backend: PocketBase — легковесная backend-платформа для управления данными и аутентификации

Технологический стек

Frontend

• Astro 6 — фреймворк для генерации статических и серверных сайтов
• SolidJS — реактивная библиотека для интерактивных компонентов
• Tailwind CSS — утилитарный CSS-фреймворк
• TypeScript — строгая типизация без использования any
• PocketBase SDK — клиент для взаимодействия с backend
• Astro Icon — работа с иконками
• Nanostores — легковесное управление состоянием
• Sharp — обработка изображений

Backend

• PocketBase — backend-решение с реальной базой данных и API

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

astro_redi/
├── backend/                    # Backend на PocketBase
│   ├── pb_data/               # Данные PocketBase (БД, файлы)
│   └── pb_migrations/         # Миграции схемы базы данных
│
├── frontend/                  # Frontend на Astro
│   ├── public/                # Статические файлы
│   ├── src/
│   │   ├── assets/           # Изображения, шрифты и другие ассеты
│   │   ├── components/       # UI-компоненты
│   │   │   ├── about/        # Компоненты страницы "О компании"
│   │   │   ├── base/         # Базовые компоненты
│   │   │   ├── blog/         # Компоненты блога
│   │   │   ├── courses/      # Компоненты курсов
│   │   │   ├── home/         # Компоненты главной страницы
│   │   │   ├── layout/       # Компоненты макета (header, footer)
│   │   │   └── projects/     # Компоненты проектов
│   │   ├── icons/            # Иконки приложения
│   │   ├── layouts/          # Макеты страниц
│   │   ├── lib/              # Утилиты и вспомогательные функции
│   │   ├── pages/            # Страницы приложения
│   │   │   ├── api/          # API endpoints
│   │   │   ├── blog/         # Страницы блога
│   │   │   ├── courses/      # Страницы курсов
│   │   │   └── projects/     # Страницы проектов
│   │   ├── stores/           # Хранилища состояния (Nanostores)
│   │   ├── env.d.ts          # TypeScript декларации для окружения
│   │   └── globalInterfaces.ts # Глобальные TypeScript интерфейсы
│   ├── astro.config.mjs      # Конфигурация Astro
│   ├── tailwind.config.mjs   # Конфигурация Tailwind CSS
│   └── tsconfig.json         # Конфигурация TypeScript
│
├── scripts/                   # Скрипты для разработки и сборки
│   ├── dev-server.js         # Скрипт запуска frontend и backend
│   └── stop-server.js        # Скрипт остановки серверов
│
├── package.json              # Корневой package.json
└── QWEN.md                   # Правила разработки проекта

Страницы приложения

• Главная (/) — основная страница с информацией о платформе
• О компании (/about) — информация о платформе Redi
• Курсы (/courses) — каталог образовательных курсов
  • Страница курса (/courses/[slug]) — детальная информация о курсе
• Проекты (/projects) — выполненные проекты
• Блог (/blog) — статьи и публикации

Архитектурные особенности

• SSR (Server-Side Rendering) — рендеринг на стороне сервера через Node.js adapter
• Компонентный подход — разделение компонентов по функциональным областям
• Строгая типизация — TypeScript без использования any, все интерфейсы в globalInterfaces.ts
• Модульность — алиасы импортов для удобной навигации по коду
• SEO-оптимизация — интеграция @astrojs/sitemap для индексации
• Обработка контента — утилита processHtmlContent для обработки HTML-контента из PocketBase
• Адаптивная верстка — Tailwind CSS с типографикой

Установка и запуск

Требования

• Bun — пакетный менеджер и рантайм
• PocketBase — для запуска backend

Установка зависимостей

bun run install:all

Запуск в режиме разработки

# Запуск обоих серверов (frontend + backend)
bun run dev

# Или раздельно:
bun run frontend    # Только frontend
bun run backend     # Только backend

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

bun run build

Форматирование и линтинг

bun run format    # Форматирование кода через Biome
bun run lint      # Проверка кода через Biome
bun run lint:fix  # Автоматическое исправление ошибок

Инфраструктура

• Bun — пакетный менеджер и рантайм
• Biome — линтер и форматтер кода
• Git — система контроля версий
• Node.js adapter — для запуска SSR в режиме standalone

Переменные окружения

Основная переменная окружения:

• PUBLIC_SITE_URL — URL сайта для sitemap (по умолчанию https://redib.ru)

Ссылки

• Документация Astro
• Документация PocketBase
• Документация SolidJS
• Документация Astro Icon