iLayout

Widget-based layout builder with drag-and-drop, authentication, role-based permissions, and multi-language support.

Tech Stack

• Frontend: React 19, TypeScript, Vite 8, Ant Design 6
• State: Zustand + Immer
• Routing: TanStack Router
• Data Fetching: TanStack Query
• Auth: Supabase Auth (email, magic link, Google/GitHub OAuth)
• Database: Supabase (PostgreSQL + RLS)
• Permissions: CASL (@casl/ability + @casl/react)
• i18n: i18next + react-i18next (EN, RU, HE with RTL)
• DnD: @dnd-kit/core
• Styling: Less modules + CSS custom properties (light/dark/system theme)

Getting Started

pnpm install
cp .env.example .env   # fill in Supabase credentials
pnpm dev

Environment Variables

Variable	Description
VITE_SUPABASE_URL	Supabase project URL
VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY	Supabase publishable key
VITE_ADMINS	Comma-separated admin emails

Commands

pnpm dev          # Start dev server with HMR
pnpm build        # Type-check + bundle (tsc -b && vite build)
pnpm lint         # Run ESLint
pnpm test         # Run tests (vitest)
pnpm preview      # Preview production build

Embed Package

Embed published layouts on any website with a React component or <script> tag.

<script src="https://unpkg.com/@teamco/anthill-layout-embed/dist/embed.js"></script>
<div data-widget-layout="your-layout-id"></div>

See full docs: packages/embed/README.md

Architecture

See ARCHITECTURE.md for detailed system architecture.

Testing

See TESTING.md for testing patterns and standards.

Project Structure

src/
  auth/               # Auth context, CASL abilities, Can component
  components/         # Shared components (AppHeader, PageLayout, Table)
  i18n/               # i18next config + locale files (en, ru, he)
  layout/             # Layout builder (components, store, DnD, grid, utils)
  lib/                # Supabase client, API services, hooks, types
  pages/              # Route pages (Home, Profile, LayoutEditor, WidgetEditor)
  themes/             # Theme store (light/dark/system)
  widgets/            # Modular widget system (empty, youtube, image)

Documentation

Design Specs

• Layout Builder
• Grid Overlay
• Snap-to-Grid
• Theme Switcher
• Layout JSON Modal
• Supabase Auth
• Layout DB + API
• Layout Routing + UI
• CASL Integration
• Widget DB + API
• Widget Table + Editor
• Widget Directory + Renderer
• Layout Modes
• Scroll Layout UI
• Embed Package

Implementation Plans

• Grid Overlay
• Snap-to-Grid
• Theme Switcher
• Layout JSON Modal
• Supabase Auth
• Layout DB + API
• Layout Routing + UI
• CASL Integration
• Widget DB + API
• Widget Table + Editor
• Widget Directory + Renderer
• Layout Modes — Types + Store
• Horizontal Grid
• Scroll Layout UI
• Embed Package

Session Notes

• Grid, Snap, Theme, Auth Session

License

MIT