Boilerplate Architecture
How the AI Mobile Launcher is structured
Boilerplate Architecture
This boilerplate uses a Feature-First architecture designed for scalability and AI compatibility.
1. Directory Structure
We avoid grouping by file type (e.g., all components in one folder). Instead, we group by Feature.
Plaintext
/src
/ui # Shared UI components (Button, Input, Theme)
/components # Reusable components
/tokens # Design tokens (colors, spacing)
/features # Feature-specific logic
/auth # Authentication (Login, Register)
/paywall # RevenueCat & Paywall UI
/onboarding # Welcome flow
/home # Main app screens
/services # Global services (logging, api)
/store # Redux store setup2. Path Aliases
We use path aliases to avoid ../../../../.
@/components->/src/components@/core->/src/core@/features->/src/features
3. The Theme System
We use a centralized theme object for colors and spacing.
Typescript
// src/ui/tokens/colors.ts
export const colors = {
// Base colors
white: "#FFFFFF",
black: "#000000",
// Primary colors (Blue scale)
primary50: "#EFF6FF",
primary500: "#3B82F6",
primary900: "#1E3A8A",
// Semantic
success500: "#10B981",
error500: "#EF4444",
} as const;Usage:
Tsx
import { useTheme } from "@shopify/restyle";
const Component = () => {
const theme = useTheme();
return <Box backgroundColor="primary500" padding="m" />;
};4. AI-Ready
This structure is optimized for AI:
- Small Context: An AI can understand "The Auth Feature" by just reading
/src/features/auth. - Predictable: The AI knows where to find components (
@/components) without guessing paths.