@t1ep1l0t/create-fsd 1.0.0

package/README.md

@@ -0,0 +1,161 @@
+# create-fsd
+
+CLI tool to create React projects with Feature-Sliced Design (FSD) architecture.
+
+## Features
+
+- Feature-Sliced Design architecture
+- React 18 with Vite
+- Pre-configured libraries:
+  - React Router DOM (routing)
+  - Zustand (state management)
+  - Axios (HTTP client with interceptors)
+  - React Query (server state management)
+  - i18next (internationalization)
+  - TailwindCSS v4 (styling)
+- Example code for all libraries
+- Path aliases configured (@app, @pages, @widgets, @features, @entities, @shared)
+- ESLint configured
+
+## Usage
+
+### Using npm
+
+```bash
+npm create fsd my-app -- --template react
+cd my-app
+npm run dev
+```
+
+### Using npx
+
+```bash
+npx create-fsd my-app --template react
+cd my-app
+npm run dev
+```
+
+### Local testing
+
+```bash
+node bin/cli.js my-app --template react
+cd my-app
+npm run dev
+```
+
+## Command Line Options
+
+```bash
+create-fsd <project-name> [options]
+```
+
+### Options
+
+- `-t, --template <template>` - Template to use (default: "react")
+
+### Examples
+
+```bash
+# Create a new React project with FSD architecture
+create-fsd my-awesome-app --template react
+
+# Short form
+create-fsd my-awesome-app -t react
+```
+
+## Project Structure
+
+The generated project follows FSD architecture:
+
+```
+src/
+├── app/              # Application initialization
+│   ├── providers/    # Providers (router, i18n, etc.)
+│   ├── styles/       # Global styles
+│   └── App.jsx       # Root component
+├── pages/            # Application pages
+│   ├── home/
+│   └── about/
+├── widgets/          # Composite UI components
+│   ├── Header/
+│   └── layouts/
+├── features/         # Business features (empty, ready for your code)
+├── entities/         # Business entities (empty, ready for your code)
+└── shared/           # Shared code
+    ├── api/          # API client & query configuration
+    ├── store/        # Zustand stores
+    └── ui/           # Reusable UI components
+```
+
+## Publishing to npm
+
+### 1. Login to npm
+
+```bash
+npm login
+```
+
+### 2. Update package.json
+
+Make sure your package.json has:
+- Unique package name
+- Correct version
+- Valid author information
+
+### 3. Publish
+
+```bash
+npm publish
+```
+
+### 4. Test published package
+
+```bash
+npm create fsd test-app -- --template react
+```
+
+## Development
+
+### Install dependencies
+
+```bash
+npm install
+```
+
+### Test locally
+
+```bash
+npm test
+# or
+node bin/cli.js test-project --template react
+```
+
+### Add new templates
+
+1. Create a new folder in `templates/` directory
+2. Add all necessary files for the template
+3. Update CLI help text if needed
+
+## Adding More Libraries
+
+To add more libraries to the template:
+
+1. Add the library to `templates/react/package.json`
+2. Create example usage in the appropriate FSD layer
+3. Add configuration if needed (e.g., in `src/app/providers/`)
+4. Update the template README with the new library
+
+### Example: Adding React Hook Form
+
+1. Add to dependencies:
+```json
+"react-hook-form": "^7.50.0"
+```
+
+2. Create example in `src/features/auth/LoginForm.jsx`
+
+3. Update documentation
+
+## License
+
+MIT

package/bin/cli.js

@@ -0,0 +1,84 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import chalk from 'chalk';
+import ora from 'ora';
+import fs from 'fs-extra';
+import path from 'path';
+import { execSync } from 'child_process';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const program = new Command();
+
+program
+  .name('create-fsd')
+  .description('CLI to create React projects with FSD architecture')
+  .version('1.0.0')
+  .argument('<project-name>', 'name of the project')
+  .option('-t, --template <template>', 'template to use', 'react')
+  .action(async (projectName, options) => {
+    const { template } = options;
+
+    console.log(chalk.blue.bold(`\n🚀 Creating ${projectName} with ${template} template...\n`));
+
+    const targetDir = path.join(process.cwd(), projectName);
+
+    // Check if directory exists
+    if (fs.existsSync(targetDir)) {
+      console.log(chalk.red(`❌ Directory ${projectName} already exists!`));
+      process.exit(1);
+    }
+
+    // Create project directory
+    fs.mkdirSync(targetDir, { recursive: true });
+
+    const templateDir = path.join(__dirname, '..', 'templates', template);
+
+    if (!fs.existsSync(templateDir)) {
+      console.log(chalk.red(`❌ Template ${template} not found!`));
+      process.exit(1);
+    }
+
+    // Copy template files
+    const spinner = ora('Copying template files...').start();
+    try {
+      fs.copySync(templateDir, targetDir);
+      spinner.succeed('Template files copied!');
+    } catch (error) {
+      spinner.fail('Failed to copy template files');
+      console.error(error);
+      process.exit(1);
+    }
+
+    // Update package.json with project name
+    const packageJsonPath = path.join(targetDir, 'package.json');
+    if (fs.existsSync(packageJsonPath)) {
+      const packageJson = fs.readJsonSync(packageJsonPath);
+      packageJson.name = projectName;
+      fs.writeJsonSync(packageJsonPath, packageJson, { spaces: 2 });
+    }
+
+    // Install dependencies
+    const installSpinner = ora('Installing dependencies...').start();
+    try {
+      process.chdir(targetDir);
+      execSync('npm install', { stdio: 'inherit' });
+      installSpinner.succeed('Dependencies installed!');
+    } catch (error) {
+      installSpinner.fail('Failed to install dependencies');
+      console.error(error);
+      process.exit(1);
+    }
+
+    // Success message
+    console.log(chalk.green.bold('\n✅ Project created successfully!\n'));
+    console.log(chalk.cyan('Next steps:'));
+    console.log(chalk.white(`  cd ${projectName}`));
+    console.log(chalk.white('  npm run dev'));
+    console.log();
+  });
+
+program.parse();

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@t1ep1l0t/create-fsd",
+  "version": "1.0.0",
+  "description": "CLI tool to create React projects with FSD architecture",
+  "type": "module",
+  "bin": {
+    "create-fsd": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "templates",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "node bin/cli.js test-project --template react"
+  },
+  "keywords": [
+    "cli",
+    "fsd",
+    "feature-sliced-design",
+    "react",
+    "vite",
+    "template"
+  ],
+  "author": "t1ep1l0t",
+  "license": "MIT",
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "dependencies": {
+    "commander": "^11.1.0",
+    "chalk": "^5.3.0",
+    "ora": "^8.0.1",
+    "fs-extra": "^11.2.0"
+  }
+}

package/templates/react/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=https://api.example.com

package/templates/react/README.md

@@ -0,0 +1,70 @@
+# FSD React Application
+
+A modern React application built with Feature-Sliced Design architecture.
+
+## Technologies
+
+- **React 18** - UI library
+- **Vite** - Build tool and dev server
+- **React Router DOM** - Client-side routing
+- **Zustand** - State management
+- **Axios** - HTTP client
+- **React Query** - Server state management
+- **i18next** - Internationalization
+- **TailwindCSS v4** - Styling
+
+## Project Structure
+
+```
+src/
+├── app/              # Application initialization
+│   ├── providers/    # Context providers (router, i18n)
+│   └── styles/       # Global styles
+├── pages/            # Page components
+├── widgets/          # Composite UI components
+├── features/         # Business features
+├── entities/         # Business entities
+└── shared/           # Shared code
+    ├── api/          # API client configuration
+    ├── store/        # Global stores
+    └── ui/           # Reusable UI components
+```
+
+## Getting Started
+
+### Install dependencies
+
+```bash
+npm install
+```
+
+### Development
+
+```bash
+npm run dev
+```
+
+### Build for production
+
+```bash
+npm run build
+```
+
+### Preview production build
+
+```bash
+npm run preview
+```
+
+## Configuration
+
+- **API URL**: Set `VITE_API_URL` in `.env` file
+- **Languages**: Configure in `src/app/providers/i18n/index.js`
+- **Routes**: Define in `src/app/providers/router/index.jsx`
+- **Tailwind**: Customize in `src/app/styles/index.css`
+
+## Learn More
+
+- [Feature-Sliced Design](https://feature-sliced.design/)
+- [React Documentation](https://react.dev/)
+- [Vite Guide](https://vitejs.dev/guide/)

package/templates/react/eslint.config.js

@@ -0,0 +1,39 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      'react/prop-types': 'off',
+    },
+  },
+]

package/templates/react/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FSD React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/react/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "fsd-react-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.22.0",
+    "zustand": "^4.5.0",
+    "axios": "^1.6.7",
+    "i18next": "^23.8.2",
+    "react-i18next": "^14.0.5",
+    "@tanstack/react-query": "^5.22.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.3",
+    "@eslint/js": "^9.17.0",
+    "eslint": "^9.17.0",
+    "globals": "^15.14.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "@tailwindcss/vite": "^4.0.0",
+    "tailwindcss": "^4.0.0"
+  }
+}

package/templates/react/src/app/App.jsx

@@ -0,0 +1,11 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { RouterProvider } from '@app/providers/router';
+import { queryClient } from '@shared/api/query-client';
+
+export function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider />
+    </QueryClientProvider>
+  );
+}

package/templates/react/src/app/providers/i18n/index.js

@@ -0,0 +1,40 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+const resources = {
+  en: {
+    translation: {
+      welcome: 'Welcome to FSD React App',
+      home: 'Home',
+      about: 'About',
+      counter: 'Counter',
+      increment: 'Increment',
+      decrement: 'Decrement',
+      reset: 'Reset',
+    },
+  },
+  ru: {
+    translation: {
+      welcome: 'Добро пожаловать в FSD React приложение',
+      home: 'Главная',
+      about: 'О нас',
+      counter: 'Счетчик',
+      increment: 'Увеличить',
+      decrement: 'Уменьшить',
+      reset: 'Сбросить',
+    },
+  },
+};
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: 'en',
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;

package/templates/react/src/app/providers/router/index.jsx

@@ -0,0 +1,25 @@
+import { createBrowserRouter, RouterProvider as RRDRouterProvider } from 'react-router-dom';
+import { HomePage } from '@pages/home';
+import { AboutPage } from '@pages/about';
+import { BaseLayout } from '@widgets/layouts/BaseLayout';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <BaseLayout />,
+    children: [
+      {
+        index: true,
+        element: <HomePage />,
+      },
+      {
+        path: 'about',
+        element: <AboutPage />,
+      },
+    ],
+  },
+]);
+
+export function RouterProvider() {
+  return <RRDRouterProvider router={router} />;
+}

package/templates/react/src/app/styles/index.css

@@ -0,0 +1,28 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #3b82f6;
+  --color-secondary: #8b5cf6;
+  --color-success: #10b981;
+  --color-danger: #ef4444;
+  --color-warning: #f59e0b;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

package/templates/react/src/main.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from '@app/App';
+import '@app/styles/index.css';
+import '@app/providers/i18n';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/templates/react/src/pages/about/AboutPage.jsx

@@ -0,0 +1,91 @@
+import { Card } from '@shared/ui/Card';
+import { useTranslation } from 'react-i18next';
+
+export function AboutPage() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-6">
+      <h1 className="text-4xl font-bold text-gray-900">{t('about')}</h1>
+
+      <Card title="FSD Architecture">
+        <p className="text-gray-700 leading-relaxed mb-4">
+          This project follows Feature-Sliced Design (FSD) architecture, which provides
+          a clear and scalable folder structure for your React applications.
+        </p>
+        <div className="space-y-2">
+          <div className="flex gap-2">
+            <span className="font-mono bg-gray-100 px-2 py-1 rounded">app/</span>
+            <span className="text-gray-600">- Application initialization and providers</span>
+          </div>
+          <div className="flex gap-2">
+            <span className="font-mono bg-gray-100 px-2 py-1 rounded">pages/</span>
+            <span className="text-gray-600">- Application pages</span>
+          </div>
+          <div className="flex gap-2">
+            <span className="font-mono bg-gray-100 px-2 py-1 rounded">widgets/</span>
+            <span className="text-gray-600">- Complex UI components</span>
+          </div>
+          <div className="flex gap-2">
+            <span className="font-mono bg-gray-100 px-2 py-1 rounded">features/</span>
+            <span className="text-gray-600">- Business features</span>
+          </div>
+          <div className="flex gap-2">
+            <span className="font-mono bg-gray-100 px-2 py-1 rounded">entities/</span>
+            <span className="text-gray-600">- Business entities</span>
+          </div>
+          <div className="flex gap-2">
+            <span className="font-mono bg-gray-100 px-2 py-1 rounded">shared/</span>
+            <span className="text-gray-600">- Reusable code and UI components</span>
+          </div>
+        </div>
+      </Card>
+
+      <Card title="Configured Libraries">
+        <ul className="space-y-3">
+          <li>
+            <strong className="text-blue-600">React Router DOM</strong>
+            <p className="text-gray-600 text-sm">Client-side routing with nested routes</p>
+          </li>
+          <li>
+            <strong className="text-blue-600">Zustand</strong>
+            <p className="text-gray-600 text-sm">Lightweight state management</p>
+          </li>
+          <li>
+            <strong className="text-blue-600">Axios</strong>
+            <p className="text-gray-600 text-sm">HTTP client with interceptors configured</p>
+          </li>
+          <li>
+            <strong className="text-blue-600">React Query</strong>
+            <p className="text-gray-600 text-sm">Server state management and caching</p>
+          </li>
+          <li>
+            <strong className="text-blue-600">i18next</strong>
+            <p className="text-gray-600 text-sm">Internationalization (EN/RU)</p>
+          </li>
+          <li>
+            <strong className="text-blue-600">TailwindCSS v4</strong>
+            <p className="text-gray-600 text-sm">Utility-first CSS framework</p>
+          </li>
+        </ul>
+      </Card>
+
+      <Card title="Get Started">
+        <div className="space-y-4">
+          <div>
+            <h4 className="font-semibold mb-2">Development</h4>
+            <code className="block bg-gray-900 text-green-400 p-3 rounded">
+              npm run dev
+            </code>
+          </div>
+          <div>
+            <h4 className="font-semibold mb-2">Build for production</h4>
+            <code className="block bg-gray-900 text-green-400 p-3 rounded">
+              npm run build
+            </code>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/templates/react/src/pages/about/index.js

@@ -0,0 +1 @@
+export { AboutPage } from './AboutPage';

package/templates/react/src/pages/home/HomePage.jsx

@@ -0,0 +1,87 @@
+import { useTranslation } from 'react-i18next';
+import { Card } from '@shared/ui/Card';
+import { Button } from '@shared/ui/Button';
+import { useCounterStore } from '@shared/store/counter';
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '@shared/api/client';
+
+export function HomePage() {
+  const { t } = useTranslation();
+  const { count, increment, decrement, reset } = useCounterStore();
+
+  const { data: posts, isLoading } = useQuery({
+    queryKey: ['posts'],
+    queryFn: async () => {
+      const response = await apiClient.get('/posts?_limit=5');
+      return response.data;
+    },
+  });
+
+  return (
+    <div className="space-y-8">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">{t('welcome')}</h1>
+        <p className="text-lg text-gray-600">
+          React + Vite + FSD Architecture + TailwindCSS v4
+        </p>
+      </div>
+
+      <div className="grid md:grid-cols-2 gap-6">
+        <Card title={t('counter')}>
+          <div className="text-center space-y-4">
+            <div className="text-6xl font-bold text-blue-600">{count}</div>
+            <div className="flex gap-2 justify-center">
+              <Button onClick={decrement} variant="danger">
+                {t('decrement')}
+              </Button>
+              <Button onClick={reset} variant="secondary">
+                {t('reset')}
+              </Button>
+              <Button onClick={increment} variant="success">
+                {t('increment')}
+              </Button>
+            </div>
+            <p className="text-sm text-gray-500">Powered by Zustand</p>
+          </div>
+        </Card>
+
+        <Card title="React Query Example">
+          {isLoading ? (
+            <div className="text-center text-gray-500">Loading posts...</div>
+          ) : (
+            <ul className="space-y-2">
+              {posts?.map((post) => (
+                <li key={post.id} className="p-2 bg-gray-50 rounded">
+                  <div className="font-medium text-sm">{post.title}</div>
+                </li>
+              ))}
+            </ul>
+          )}
+          <p className="text-sm text-gray-500 mt-4">Powered by React Query + Axios</p>
+        </Card>
+      </div>
+
+      <Card title="Technologies Used">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {[
+            'React Router',
+            'Zustand',
+            'Axios',
+            'i18next',
+            'React Query',
+            'TailwindCSS v4',
+            'Vite',
+            'FSD Architecture',
+          ].map((tech) => (
+            <div
+              key={tech}
+              className="p-3 bg-blue-50 text-blue-700 rounded-lg text-center font-medium"
+            >
+              {tech}
+            </div>
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+}

package/templates/react/src/pages/home/index.js

@@ -0,0 +1 @@
+export { HomePage } from './HomePage';

package/templates/react/src/shared/api/client.js

@@ -0,0 +1,32 @@
+import axios from 'axios';
+
+export const apiClient = axios.create({
+  baseURL: import.meta.env.VITE_API_URL || 'https://jsonplaceholder.typicode.com',
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+apiClient.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem('token');
+    }
+    return Promise.reject(error);
+  }
+);

package/templates/react/src/shared/api/query-client.js

@@ -0,0 +1,11 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      staleTime: 5 * 60 * 1000, // 5 minutes
+    },
+  },
+});

package/templates/react/src/shared/store/counter.js

@@ -0,0 +1,8 @@
+import { create } from 'zustand';
+
+export const useCounterStore = create((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+  reset: () => set({ count: 0 }),
+}));

package/templates/react/src/shared/ui/Button/Button.jsx

@@ -0,0 +1,21 @@
+export function Button({ children, variant = 'primary', onClick, className = '', ...props }) {
+  const baseStyles = 'px-4 py-2 rounded-lg font-medium transition-colors duration-200';
+
+  const variantStyles = {
+    primary: 'bg-blue-600 hover:bg-blue-700 text-white',
+    secondary: 'bg-gray-600 hover:bg-gray-700 text-white',
+    success: 'bg-green-600 hover:bg-green-700 text-white',
+    danger: 'bg-red-600 hover:bg-red-700 text-white',
+    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50',
+  };
+
+  return (
+    <button
+      className={`${baseStyles} ${variantStyles[variant]} ${className}`}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/templates/react/src/shared/ui/Button/index.js

@@ -0,0 +1 @@
+export { Button } from './Button';

package/templates/react/src/shared/ui/Card/Card.jsx

@@ -0,0 +1,8 @@
+export function Card({ children, className = '', title }) {
+  return (
+    <div className={`bg-white rounded-lg shadow-md p-6 ${className}`}>
+      {title && <h3 className="text-xl font-bold mb-4">{title}</h3>}
+      {children}
+    </div>
+  );
+}

package/templates/react/src/shared/ui/Card/index.js

@@ -0,0 +1 @@
+export { Card } from './Card';

package/templates/react/src/widgets/Header/Header.jsx

@@ -0,0 +1,45 @@
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+export function Header() {
+  const { t, i18n } = useTranslation();
+
+  const toggleLanguage = () => {
+    const newLang = i18n.language === 'en' ? 'ru' : 'en';
+    i18n.changeLanguage(newLang);
+  };
+
+  return (
+    <header className="bg-white shadow-sm">
+      <div className="container mx-auto px-4 py-4">
+        <nav className="flex items-center justify-between">
+          <div className="flex items-center gap-8">
+            <Link to="/" className="text-xl font-bold text-blue-600">
+              FSD App
+            </Link>
+            <div className="flex gap-4">
+              <Link
+                to="/"
+                className="text-gray-700 hover:text-blue-600 transition-colors"
+              >
+                {t('home')}
+              </Link>
+              <Link
+                to="/about"
+                className="text-gray-700 hover:text-blue-600 transition-colors"
+              >
+                {t('about')}
+              </Link>
+            </div>
+          </div>
+          <button
+            onClick={toggleLanguage}
+            className="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm transition-colors"
+          >
+            {i18n.language === 'en' ? 'RU' : 'EN'}
+          </button>
+        </nav>
+      </div>
+    </header>
+  );
+}

package/templates/react/src/widgets/Header/index.js

@@ -0,0 +1 @@
+export { Header } from './Header';

package/templates/react/src/widgets/layouts/BaseLayout/BaseLayout.jsx

@@ -0,0 +1,13 @@
+import { Outlet } from 'react-router-dom';
+import { Header } from '@widgets/Header';
+
+export function BaseLayout() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header />
+      <main className="container mx-auto px-4 py-8">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

package/templates/react/src/widgets/layouts/BaseLayout/index.js

@@ -0,0 +1 @@
+export { BaseLayout } from './BaseLayout';

package/templates/react/vite.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@app': path.resolve(__dirname, './src/app'),
+      '@pages': path.resolve(__dirname, './src/pages'),
+      '@widgets': path.resolve(__dirname, './src/widgets'),
+      '@features': path.resolve(__dirname, './src/features'),
+      '@entities': path.resolve(__dirname, './src/entities'),
+      '@shared': path.resolve(__dirname, './src/shared'),
+    },
+  },
+});