src/
├── routes/             # TanStack Router file-based routes
│   ├── __root.tsx      # Root layout
│   ├── index.tsx       # Homepage
│   └── feature.tsx     # Feature route
├── features/           # Feature-based modules (see below)
├── components/         # Shared components used across features
├── hooks/              # Shared hooks used across features
├── lib/                # Utilities and API clients
├── stores/             # Global state stores
├── types/              # Shared types
├── main.tsx            # Entry point
└── index.css           # Global styles (Tailwind imports)

src/features/awesome-feature/
├── api/                # API calls specific to this feature
│   ├── get-items.ts
│   └── create-item.ts
├── components/         # Components used only in this feature
│   ├── ItemList.tsx
│   └── ItemForm.tsx
├── hooks/              # Hooks specific to this feature
│   └── useItemFilters.ts
├── stores/             # State stores for this feature (if needed)
│   └── item-store.ts
├── types/              # TypeScript types for this feature
│   └── item.types.ts
└── utils/              # Utility functions for this feature
    └── format-item.ts

// .eslintrc.cjs
'import/no-restricted-paths': [
  'error',
  {
    zones: [
      // Prevent features from importing from each other
      {
        target: './src/features/auth',
        from: './src/features',
        except: ['./auth'],
      },
      {
        target: './src/features/dashboard',
        from: './src/features',
        except: ['./dashboard'],
      },
      // Add more features as needed
    ],
  },
],

import tailwindcss from '@tailwindcss/vite';
import { tanstackRouter } from '@tanstack/router-plugin/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    tanstackRouter(),
    react(),
    tailwindcss(),
  ],
});

@import "tailwindcss";

@theme {
  --font-sans: "Inter", sans-serif;
  /* Define custom tokens here */
}