О проекте

Это проект на Next.js (App Router), использующий UI-компоненты shadcn/ui, утилитарную CSS-библиотеку Tailwind CSS и библиотеку анимаций framer-motion.

Стек и роль технологий

• Next.js: фреймворк для React с рендерингом на сервере, маршрутизацией и API-роутами.
  • Документация: nextjs.org/docs
• shadcn/ui: коллекция доступных и настраиваемых компонентов на базе Radix UI и Tailwind.
  • Документация: ui.shadcn.com
• Tailwind CSS: утилитарные классы для быстрой стилизации интерфейсов.
  • Документация: tailwindcss.com/docs
• framer-motion: мощная библиотека для анимаций в React-компонентах.
  • Документация: www.framer.com/motion

Быстрый старт

1. Установите зависимости:

   pnpm install
   

2. Запустите дев-сервер:

   pnpm dev
   

3. Откройте http://localhost:3000 в браузере.

Структура проекта (основное)

• src/app/(frontend): публичные страницы, глобальные стили (globals.css), макеты и корневые компоненты фронтенда.
• src/shared/ui: библиотека переиспользуемых UI-компонентов на базе shadcn/ui.
• src/shared/lib: утилиты и вспомогательные функции.

Архитектура: Feature‑Sliced Design (FSD)

Проект следует принципам Feature‑Sliced Design для масштабируемой фронтенд-архитектуры. Подробнее: feature-sliced.design/docs.

• app: инициализация приложения, провайдеры, глобальные стили и макеты (в проекте — src/app, в т.ч. src/app/(frontend)).
• processes: долгоживущие бизнес-процессы (слой появится при необходимости).
• pages: страницы и маршруты. В Next.js App Router это структурируется через src/app и сегменты маршрутов.
• widgets: составные блоки из нескольких features/entities (см. src/widgets).
• features: пользовательские сценарии и их логика/компоненты (см. src/features).
• entities: бизнес-сущности и их представления/модели (см. src/entities).
• shared: переиспользуемые модули, UI, утилиты, конфиги (см. src/shared).

Рекомендации:

• Импорты направлены сверху вниз: shared → entities → shared → widgets → features → pages/app.
• Публичный API каждого слайса/модуля экспортируется через index-файлы.
• Избегайте циклических зависимостей между слоями.

Соглашения по наименованию

• Имена файлов компонентов: kebab-case.
  • Примеры: date-picker.tsx, user-card.tsx, navigation-menu.tsx.
• Имена React-компонентов (идентификаторы): PascalCase.
  • Примеры: DatePicker, UserCard, NavigationMenu.

UI на базе shadcn/ui

Компоненты интерфейса собраны и переиспользуются в каталоге src/shared/ui. Они основаны на Tailwind и Radix UI, легко настраиваются через классы и токены дизайна. Рекомендуется ориентироваться на официальные примеры и паттерны из документации:

• Руководство и примеры: ui.shadcn.com

Стилизация: Tailwind CSS

Проект использует Tailwind для быстрой и согласованной стилизации. Ключевые ресурсы:

• Документация: tailwindcss.com/docs
• Руководства по best practices: tailwindcss.com/blog

Анимации: framer-motion

Для анимаций используется framer-motion. Это мощная библиотека для создания плавных и производительных анимаций в React-компонентах.

Пример использования:

import { motion } from 'framer-motion';

function AnimatedComponent() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      Анимированный контент
    </motion.div>
  );
}

Документация: www.framer.com/motion

Команды

# Запуск дев-сервера
pnpm dev

# Билд продакшн-версии
pnpm build

# Предпросмотр продакшн-сборки
pnpm start

# Линтинг
pnpm lint

Полезные ссылки

• Next.js: nextjs.org/docs
• shadcn/ui: ui.shadcn.com
• Tailwind CSS: tailwindcss.com/docs
• framer-motion: www.framer.com/motion