app_rules

MobileLauncher LT - Development Rules & Guidelines

This document outlines the essential rules and guidelines for developing with the MobileLauncher LT boilerplate. Follow these rules to maintain consistency, scalability, and code quality across the project.

🏗️ Architecture Rules

1. Feature-First Structure

• Always organize code by business features, not technical layers
• Each feature must be self-contained with its own:
  • components/ - Feature-specific UI components
  • screens/ - Screen components
  • hooks/ - Custom hooks for business logic
  • store/ - Redux slice and selectors
  • api/ - RTK Query endpoints
  • services/ - Business logic services
  • types/ - TypeScript type definitions
  • index.ts - Barrel exports

Example:

src/features/auth/
├── components/
│   ├── login-form.tsx
│   └── index.ts
├── screens/
│   ├── login-screen.tsx
│   └── index.ts
├── hooks/
│   ├── use-auth.ts
│   └── index.ts
├── store/
│   ├── auth-slice.ts
│   ├── auth-selector.ts
│   └── index.ts
├── api/
│   ├── auth.api.ts
│   └── index.ts
├── services/
│   ├── auth.service.ts
│   └── index.ts
├── types/
│   ├── index.ts
├── index.ts

2. Shared Resources

• Extract common functionality to global directories (src/ui/, src/services/, src/utils/)
• Never duplicate code - if used in 2+ features, move to shared
• Use absolute imports with #root/ prefix for clean imports
• Expo ecosystem: use expo.dev ecosystem for packages and yarn to install packages.

Example:

// ❌ Wrong - duplicated across features
// features/auth/components/button.tsx
// features/settings/components/button.tsx

// ✅ Correct - shared component
// src/ui/components/button.tsx
import { Button } from '#root/ui/components/button';

// ✅ Correct - shared utility
// src/utils/format-date.ts
import { formatDate } from '#root/utils/format-date';

🎨 UI Component Rules

3. Component Design

• Use Restyle for all styling - never use StyleSheet directly
• Create type-safe components with proper TypeScript interfaces
• Export prop interfaces for reusability
• Use React.memo for performance optimization
• Follow single responsibility principle
• Memorzie Functions: use useCallback for functions
• Avoid inline functions: extract functions outside render or use useCallback
• Avoid inline styling: use theme values and component variants instead