Skip to content

Commit e253c6a

Browse files
JowiAounJowiAoun
committed
docs(CLAUDE): create file
1 parent 4e2f3d5 commit e253c6a

File tree

1 file changed

+184
-0
lines changed

1 file changed

+184
-0
lines changed

‎CLAUDE.md

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
# CLAUDE.md
2+
3+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4+
5+
## Project Overview
6+
7+
This is a production-ready React Native template built with Expo, TypeScript, and NativeWind. It's designed for building mobile applications with modern best practices, focusing on developer experience and performance.
8+
9+
## Key Technologies
10+
11+
- **Expo SDK 53** with custom dev client
12+
- **React Native 0.79.4** with React 19
13+
- **TypeScript** with strict configuration
14+
- **NativeWind v4** (Tailwind CSS for React Native)
15+
- **Expo Router v5** for file-based navigation
16+
- **React Query** with react-query-kit for data fetching
17+
- **Zustand** for state management
18+
- **React Native MMKV** for secure storage
19+
- **Zod** for schema validation
20+
- **React Hook Form** for form handling
21+
- **i18next** for internationalization
22+
23+
## Development Commands
24+
25+
### Core Commands
26+
27+
- `pnpm start` - Start Expo development server
28+
- `pnpm android` - Run on Android device/emulator
29+
- `pnpm ios` - Run on iOS device/simulator
30+
- `pnpm web` - Run on web browser
31+
- `pnpm xcode` - Open iOS project in Xcode
32+
33+
### Environment-specific Commands
34+
35+
- `pnpm start:staging` - Start with staging environment
36+
- `pnpm start:production` - Start with production environment
37+
- `pnpm prebuild` - Generate native code
38+
- `pnpm prebuild:staging` - Generate native code for staging
39+
- `pnpm prebuild:production` - Generate native code for production
40+
41+
### Quality Assurance
42+
43+
- `pnpm lint` - Run ESLint
44+
- `pnpm type-check` - Run TypeScript type checking
45+
- `pnpm lint:translations` - Lint JSON translation files
46+
- `pnpm test` - Run Jest tests
47+
- `pnpm test:watch` - Run tests in watch mode
48+
- `pnpm test:ci` - Run tests with coverage for CI
49+
- `pnpm check-all` - Run all quality checks (lint + type-check + translations + tests)
50+
51+
### Build Commands
52+
53+
- `pnpm build:development:ios` - Build development iOS app
54+
- `pnpm build:development:android` - Build development Android app
55+
- `pnpm build:staging:ios` - Build staging iOS app
56+
- `pnpm build:staging:android` - Build staging Android app
57+
- `pnpm build:production:ios` - Build production iOS app
58+
- `pnpm build:production:android` - Build production Android app
59+
60+
### Other Commands
61+
62+
- `pnpm doctor` - Run Expo Doctor to check project health
63+
- `pnpm e2e-test` - Run end-to-end tests with Maestro
64+
- `pnpm app-release` - Create app release with version bump
65+
66+
## Project Architecture
67+
68+
### Directory Structure
69+
70+
```
71+
src/
72+
├── api/ # API layer with React Query
73+
│ ├── common/ # Shared API utilities, client config
74+
│ └── posts/ # Example API endpoints and hooks
75+
├── app/ # Expo Router screens (file-based routing)
76+
│ ├── (app)/ # Authenticated app screens
77+
│ ├── feed/ # Feed-related screens
78+
│ ├── login.tsx # Authentication screen
79+
│ └── onboarding.tsx# First-time user flow
80+
├── components/ # Shared UI components
81+
│ ├── ui/ # Core UI components (Button, Input, Text, etc.)
82+
│ └── settings/ # Feature-specific components
83+
├── lib/ # Shared utilities and configuration
84+
│ ├── auth/ # Authentication logic
85+
│ ├── hooks/ # Custom React hooks
86+
│ ├── i18n/ # Internationalization setup
87+
│ ├── env.js # Environment variable validation
88+
│ ├── storage.tsx # MMKV storage wrapper
89+
│ └── utils.ts # General utilities
90+
├── translations/ # i18n JSON files
91+
└── types/ # Shared TypeScript types
92+
```
93+
94+
### Key Architectural Patterns
95+
96+
**State Management:**
97+
98+
- Zustand for global state (auth, settings)
99+
- React Query for server state caching
100+
- MMKV for persistent storage
101+
- React Hook Form for form state
102+
103+
**Navigation:**
104+
105+
- Expo Router with file-based routing
106+
- Typed routes enabled for type safety
107+
- Authentication flow with route protection
108+
109+
**Styling:**
110+
111+
- NativeWind v4 with Tailwind CSS classes
112+
- Custom color system defined in `src/components/ui/colors.js`
113+
- Dark mode support with theme provider
114+
115+
**Data Fetching:**
116+
117+
- React Query with react-query-kit for type-safe APIs
118+
- Axios client with interceptors in `src/api/common/client.tsx`
119+
- Custom hooks pattern for API endpoints
120+
121+
## Environment Configuration
122+
123+
The project uses a sophisticated environment system:
124+
125+
- **Development:** Local development with `.env.development`
126+
- **Staging:** Internal testing with `.env.staging`
127+
- **Production:** App store builds with `.env.production`
128+
129+
Environment variables are validated using Zod schemas in `env.js`. Client variables are accessible via `@env` import alias.
130+
131+
## Code Standards
132+
133+
**File Naming:** Use kebab-case for all files and directories (e.g., `user-profile.tsx`)
134+
135+
**Components:**
136+
137+
- Use functional components with TypeScript
138+
- Props defined as `type Props = {...}`
139+
- Maximum 80 lines per component
140+
- Use absolute imports with `@/` prefix
141+
142+
**Testing:**
143+
144+
- Jest with React Native Testing Library
145+
- Test files use `.test.tsx` extension
146+
- Focus on utilities and complex component logic
147+
- Run tests with `pnpm test`
148+
149+
**Linting:**
150+
151+
- ESLint with custom configuration
152+
- Prettier for code formatting
153+
- Import sorting with simple-import-sort
154+
- TailwindCSS class ordering
155+
- Custom rules: max 3 params, max 70 lines per function
156+
157+
## Package Management
158+
159+
- **Package Manager:** pnpm (required - enforced by preinstall script)
160+
- **Install Packages:** Use `npx expo install <package>` for Expo compatibility
161+
- **Dependencies:** All managed through Expo SDK for compatibility
162+
163+
## Build System
164+
165+
**EAS Build:**
166+
167+
- Development builds with dev client
168+
- Staging builds for internal testing
169+
- Production builds for app stores
170+
- Multi-environment support with different bundle IDs
171+
172+
**Native Configuration:**
173+
174+
- iOS: Bundle ID varies by environment (com.obytes, com.obytes.staging, etc.)
175+
- Android: Package name follows same pattern
176+
- App icons badged for non-production builds
177+
178+
## Testing Strategy
179+
180+
**Unit Tests:** Jest + React Native Testing Library for components and utilities
181+
**E2E Tests:** Maestro for end-to-end user flows
182+
**Type Safety:** Strict TypeScript with comprehensive type checking
183+
184+
Always run `pnpm check-all` before committing to ensure code quality.

0 commit comments

Comments
 (0)