Multi-Provider Support: Access fonts from Google Fonts and Fontshare in one place
Fast Virtual Scrolling: Handles thousands of fonts smoothly with custom virtualization
Advanced Filtering: Filter by category, provider, and character subsets
Responsive Design: Beautiful UI built with shadcn components and Tailwind CSS
Type-Safe: Full TypeScript coverage with strict mode enabled

🛠️ Tech Stack

Frontend: Svelte 5 with runes (reactive primitives)
Styling: Tailwind CSS v4 + shadcn-svelte components
Data Fetching: TanStack Query for caching and state management
Architecture: Feature-Sliced Design (FSD) methodology
Testing: Playwright (E2E), Vitest (unit), Storybook (components)
Quality: Oxlint (linting), Dprint (formatting), Lefthook (git hooks)

📁 Architecture

src/
├── app/           # App shell, layout, providers
├── widgets/       # Composed UI blocks
├── features/      # Business features (filters, search)
├── entities/      # Domain entities (Font models, stores)
├── shared/        # Reusable utilities, UI components, helpers
└── routes/        # Page-level components

🚀 Quick Start

# Install dependencies
yarn install

# Start development server
yarn dev

# Open in browser
yarn dev -- --open

📦 Available Scripts

Command	Description
`yarn dev`	Start development server
`yarn build`	Build for production
`yarn preview`	Preview production build
`yarn check`	Run Svelte type checking
`yarn lint`	Run oxlint
`yarn format`	Format with dprint
`yarn test`	Run all tests (E2E + unit)
`yarn test:e2e`	Run Playwright E2E tests
`yarn test:unit`	Run Vitest unit tests
`yarn storybook`	Start Storybook dev server

🧪 Development

Type Checking

yarn check           # Single run
yarn check:watch     # Watch mode

Testing

yarn test:unit              # Unit tests
yarn test:unit:watch        # Watch mode
yarn test:unit:ui           # Vitest UI
yarn test:e2e               # E2E tests with Playwright
yarn test:e2e --ui          # Interactive test runner

Code Quality

yarn lint          # Lint code
yarn format        # Format code
yarn format:check  # Check formatting

🎯 Key Components

VirtualList: Custom high-performance list virtualization using Svelte 5 runes
FontList: Displays fonts with loading, empty, and error states
FilterControls: Multi-filter system for category, provider, and subsets
TypographyControl: Dynamic typography adjustment controls

📝 Code Style

Path Aliases: Use $app/, $shared/, $features/, $entities/, $widgets/, $routes/
Components: PascalCase (e.g., CheckboxFilter.svelte)
Formatting: 100 char line width, 4-space indent, single quotes
Imports: Auto-sorted by dprint, separated by blank line
Type Safety: Strict TypeScript, JSDoc comments for public APIs

🏗️ Building for Production

yarn build
yarn preview

📚 Learn More

📄 License

MIT