Front end

• Vite (bun)
  • React (react-router)
  • TypeScript

Использовать FSD (Feature-Sliced-Design) Разделение на: (Layers | Slices | Segments)

Layers

Стандартный набор слоёв, который структурирует основные элементы проекта. Нижележащие слои могут находиться в вышестоящих слоях, но не могут содержать вышестоящих.

• app (все для запуска, обычно не имеет доп. сегментов) | не содержит Slice
  • основа проекта, роутинг, базовые стили, точка входа в проект
• pages (примеры: профиль пользователя, отображение списка постов, отображение поста) нужны для структурирования проекта
  • полные страницы или большие их части
• widgets (примеры: для профиля пользователя: аватар, отображение имени, кнопка настроект) большие составные блоки pages состоит из набора widgets
  • большие самодостаточные куски функциональности или интерфейса
• features (примеры фич: лайкнуть, оставить коментарий, изменить профиль | Вопрос: Что сделать?) работа с различными сценариями
  • повторно используемые реализации фич продукта
• entities (примеры: аватар пользователя, отображение поста, отображение комментария | Вопрос: Что это?) и работа с api тут
  • бизнес-сущности, с которыми работает проект
• shared (примеры: кнопка, селекторы и тп) что-то универсальное и различные ui объекты | не содержит Slice
  • переиспользуемый код отделённый от бизнес логики

Slices

Находяться внутри слоев (Layears). Группировка кода по его значению для приложения. (доменная область)

• <тут всегда свое название>
• Примеры:
  • user
  • payment
  • post
  • product
  • auth

Каждый Slice должен иметь отдельный api (index.ts для импортирования, только нужного)

Segments

Группировка кода по его назначению

• ui (визуал)
• models (схемы, интерфейсы, хранилища и бизнес-логика)
• api (для взаимодействия с бэкендом)
• lib (библиотечный код) опционально
• config (конфигурационные файлы) опционально

---

React

Написание функций:

import { Header } from '@/widgets';

export function Home() {
	return (
		<>
			<Header />
			{} - внутри можно писать обычный typescript код
			<div className="">test</div>
		</>
	);
}

Замена if в одну строчку

{a ? (...) : (...)}

export function Home() {
	const a: number = 10;
	return (
		<>
			<Header />
			{a == 10 ? <p>Yes</p> : <p>No</p>}
			<div className="">test</div>
		</>
	);
}