This document serves as a comprehensive guide for all team members when developing LMRing.
You are developing an open-source AI Arena for multi-model comparison: LMRing.
LMRing is a Next.js-based web application that enables users to interact with multiple AI models simultaneously, compare their responses in real-time, and track model performance through a leaderboard system.
Built with modern technologies:
- Frontend: Next.js 16, React 19, TypeScript
- UI: shadcn/ui, Tailwind CSS 4
- State: Zustand
- Database: PostgreSQL, DrizzleORM
- Auth: Better-Auth (OAuth + email/password)
- Testing: Vitest, Playwright
- Build: Turborepo, pnpm
- Linting: Biome
- i18n: i18next, react-i18next (en, fr, zh)
- AI: Vercel AI SDK
apps/web/- Main Next.js applicationpackages/- Shared packagesai-hub/- AI provider integrationauth/- Authenticationconfig/- Shared config (biome, tailwind, typescript, vitest)database/- DrizzleORM schemasenv/- Environment variable managementi18n/- Internationalizationmodel-depot/- AI model definitions (60+ providers)storage/- File storage (S3, Supabase)ui/- UI componentsvideo-runtime/- Video generation runtime
- Use rebase for git pull
- Git commit messages should prefix with gitmoji
- Git branch name format:
<type>/<feature-name> - Use
.github/pull_request_template.mdfor PR descriptions - PR titles starting with
✨ feat/or🐛 fixtrigger release workflow
- Use
pnpmas the primary package manager - Workspace packages reference each other as
workspace:* - Add dependencies:
pnpm add <package> --filter <workspace>
- Prefer interfaces over types for object shapes
- Use explicit return types for functions
- Follow project's existing patterns
- Ensure type safety across the codebase
- Use functional components with hooks
- Prefer React Server Components when possible
- Use client components only when necessary (interactivity, hooks, browser APIs)
- Follow Next.js App Router patterns
Commands:
- Web:
pnpm --filter @lmring/web test '[file-path-pattern]' - Packages:
pnpm --filter @lmring/<package> test '[file-path-pattern]'
Important:
- Wrap file paths in single quotes
- Never run
pnpm test- takes significant time - Place test files next to source:
filename.test.ts - Prefer
vi.spyOnovervi.mock - Tests must pass type checking:
pnpm check:types - Write tests for business logic, not UI components
pnpm check:types- Check all packagespnpm --filter <workspace> check:types- Check specific package
pnpm lint- Check errorspnpm lint:fix- Auto-fix errors
- Keys: Add to
apps/web/src/locales/{locale}.json - Dev: Translate all three locale files (en, fr, zh)
- Supported locales:
en,fr,zh
Pre-commit: Runs lint-staged (executes lint:fix and check:types on staged files)
Commit-msg: Validates conventional commits via commitlint
- Run
pnpm check:types - Run
pnpm lint - Run related tests
- Test locally
- Node.js: v24.11.1+
- Package Manager: pnpm 10.28.2
- Deployment Modes: SaaS (OAuth) or self-hosted (email/password)
For more detailed information, refer to:
- Project documentation in
/docs - CLAUDE.md for Claude Code guidelines
- Individual package README files