FSD App

??????????, ??????????? ?? ??????????? Feature-Sliced Design (FSD) ? ?????????????? React, TypeScript, Tailwind CSS ? React Router.

??????????? FSD

?????? ??????????? ?? ??????????? Feature-Sliced Design ?? ?????????? ??????:

src/
 app/              # ???? ?????????? (?????????????)
    providers/    # ?????????? (???????, ???????????)
    styles/       # ?????????? ?????
    App.tsx       # ???????? ?????????

 pages/            # ???? ???????
    login/        # ???????? ?????
    home/         # ??????? ????????
    profile/      # ???????? ???????
    settings/     # ???????? ????????
    users/        # ???????? ?????????????

 widgets/          # ???? ????????
    sidebar/      # ??????? ???? ? ??????????

 features/         # ???? ???
    auth/         # ??????????? (LoginForm, AuthContext)

 entities/         # ???? ?????????
    user/         # ???????? ???????????? (UserCard)

 shared/           # ????? ????
     api/          # API ??????
     lib/          # ??????? (cn)
     types/        # TypeScript ????
     ui/           # UI ?????????? (Button, Input, Card)

?????? ???????

????????? ????????????

pnpm install

????? ??????????

pnpm dev

?????? ??? ??????????

pnpm build

??????????????? ???????? ??????

pnpm preview

????-???????????

??????????? ????????? ?????? ??? ?????:

• Email: admin@example.com
• Password: password123

???????? ??????????

• React 19 - UI ??????????
• TypeScript - ?????????
• Vite - ???????
• React Router - ???????
• Tailwind CSS - ??????????
• Lucide React - ??????

???????? ???????????

• ??????????? ? ??????????? ???????
• ?????????? ??????? ???? (sidebar)
• ???????? ??????? ????????????
• ???????? ????????
• ?????? ?????????????
• API ?????? ? ??????????
• ?????????? UI (Button, Input, Card)

????????????

?????????? ?????????

???????? ???? .env ?? ?????? .env.example:

VITE_API_URL=http://localhost:3000/api

???? (Path Aliases)

?????? ?????????? ????????? ?????? ??? ????????:

• @app/* ./src/app/*
• @pages/* ./src/pages/*
• @widgets/* ./src/widgets/*
• @features/* ./src/features/*
• @entities/* ./src/entities/*
• @shared/* ./src/shared/*

??????? ?????????????

?????? ???????????

import { Button, Input, Card } from '@shared/ui';
import { useAuth } from '@features/auth';
import { UserCard } from '@entities/user';
import { Sidebar } from '@widgets/sidebar';

API ???????

import { usersApi, authApi } from '@shared/api';

// ???????? ?????????????
const users = await usersApi.getUsers();

// ???????????
const { user, token } = await authApi.login(email, password);

????????

MIT