Проект ENIC представляет собой современную образовательную веб-платформу, разработанную для конкурса. Мы создали комплексное решение, объединяющее контент-менеджмент систему с мощными возможностями многоязычности и интерактивными компонентами для улучшения пользовательского опыта.
Почему мы выбрали Next.js:
- Производительность: Server-Side Rendering (SSR) и Static Site Generation (SSG) обеспечивают быстрое время загрузки
- SEO-оптимизация: Встроенные возможности для поисковой оптимизации критически важны для образовательной платформы
- Современная архитектура: App Router с React Server Components для максимальной производительности
- Turbopack: Ускоренная разработка благодаря новому сборщику
Почему мы выбрали Payload CMS:
- TypeScript-first: Полная типизация обеспечивает надежность и удобство разработки
- Headless архитектура: Гибкость в создании любых пользовательских интерфейсов
- Мощная админ-панель: Интуитивно понятный интерфейс для управления контентом
- Расширяемость: Система плагинов для добавления функциональности
- Локализация: Встроенная поддержка многоязычности (русский, казахский, английский)
Почему мы выбрали PostgreSQL:
- Надежность: Проверенная годами СУБД для критически важных данных
- Масштабируемость: Возможность обработки больших объемов образовательного контента
- JSON поддержка: Гибкое хранение структурированных данных
- Neon: Serverless PostgreSQL для упрощения деплоя и масштабирования
Почему мы выбрали эту комбинацию:
- Современный дизайн: Utility-first подход для быстрого создания интерфейсов
- Доступность: Radix UI обеспечивает полную accessibility из коробки
- Консистентность: Единая дизайн-система на всей платформе
- Производительность: CSS-классы генерируются только для используемых стилей
Почему мы интегрировали hCaptcha:
- Защита от спама: Критически важно для образовательной платформы с формами
- Приватность: Более этичная альтернатива Google reCAPTCHA
- GDPR совместимость: Соответствие европейским стандартам защиты данных
- Надежность: Высокий уровень защиты при минимальном влиянии на UX
Почему мы выбрали Lexical:
- Современный подход: Facebook's next-gen rich text editor
- Extensibility: Возможность создания кастомных блоков контента
- Производительность: Оптимизированная работа с большими документами
- Accessibility: Встроенная поддержка assistive technologies
Мы реализовали комплексную систему локализации:
- Next-intl: Для интернационализации фронтенда
- Payload локализация: Для многоязычного контента
- Поддерживаемые языки: Русский (по умолчанию), Казахский, Английский
Использованные Payload плагины:
- SEO Plugin: Автоматическая оптимизация для поисковых систем
- Form Builder: Конструктор форм для интерактивных элементов
- Search Plugin: Полнотекстовый поиск по контенту
- Redirects Plugin: Управление редиректами для SEO
- Nested Docs: Иерархическая структура документов
Основные коллекции:
- Pages: Статические страницы сайта
- Posts: Новости и статьи с локализацией
- Questions: FAQ система с защитой от спама
- Media: Оптимизированное управление медиафайлами
- Categories: Категоризация контента
- Users: Система пользователей с ролями
- Sharp: Оптимизация изображений для веба
- CORS настройки: Безопасные API вызовы
- Environment variables: Защищенное хранение конфиденциальных данных
- TypeScript: Статическая типизация для предотвращения ошибок
- Мобильно-ориентированный подход
- Адаптивные компоненты с Tailwind CSS
- Оптимизация для различных устройств
- Next.js App Router для оптимальной загрузки
- Image optimization с Sharp
- Lazy loading компонентов
- Static generation для статического контента
- Современный dark theme в админ-панели
- Intuitive navigation с хлебными крошками
- Interactive components с Radix UI
- Smooth animations с Tailwind CSS
Мы создали современную, масштабируемую и безопасную образовательную платформу, используя лучшие практики веб-разработки. Каждая технология была выбрана с учетом специфики образовательного контента и требований к производительности, доступности и многоязычности.
Наш технологический стек обеспечивает:
- Быструю разработку благодаря TypeScript и современным фреймворкам
- Высокую производительность через SSR и оптимизацию ресурсов
- Отличный пользовательский опыт с адаптивным дизайном и доступностью
- Простоту управления контентом через интуитивную CMS
- Готовность к масштабированию благодаря современной архитектуре
- Клонирование репозитория:
git clone https://github.com/Rnbsov/enic.git
cd enic- Установка зависимостей:
pnpm install- Настройка окружения:
cp .env.example .envОтредактируйте .env файл, добавив ваши данные для базы данных и hCaptcha.
- Запуск в режиме разработки:
pnpm dev- Откройте приложение:
Перейдите по адресу
http://localhost:3000
# Payload CMS
PAYLOAD_SECRET=your-secret-here
NEXT_PUBLIC_SERVER_URL=http://localhost:3000
# База данных PostgreSQL
DATABASE_URL=your-postgres-connection-string
# hCaptcha (для защиты форм)
NEXT_PUBLIC_HCAPTCHA_SITE_KEY=your-site-key
HCAPTCHA_SECRET=your-secret-key# Запуск в режиме разработки с Turbopack
pnpm dev
# Сборка для продакшена
pnpm build
# Запуск продакшен сервера
pnpm start
# Генерация типов Payload
pnpm generate:types
# Линтинг кода
pnpm lint