From 4e2f3d576639a4c06e28f5046d98f924497d47d5 Mon Sep 17 00:00:00 2001 From: jowi Date: Fri, 4 Jul 2025 23:29:26 -0400 Subject: [PATCH 1/2] feat: move cursor project rules to .cursor/rules, add metadata --- prompts/expo-doctor.md => .cursor/rules/expo-doctor.mdc | 6 ++++++ .../rules/image-to-components.mdc | 6 ++++++ .cursorrules => .cursor/rules/project-standards.mdc | 6 ++++++ prompts/svg-icon.md => .cursor/rules/svg-icon.mdc | 6 ++++++ .../rules/write-unit-tests.mdc | 6 ++++++ 5 files changed, 30 insertions(+) rename prompts/expo-doctor.md => .cursor/rules/expo-doctor.mdc (92%) rename prompts/image-to-components.md => .cursor/rules/image-to-components.mdc (98%) rename .cursorrules => .cursor/rules/project-standards.mdc (97%) rename prompts/svg-icon.md => .cursor/rules/svg-icon.mdc (96%) rename prompts/write-unit-tests.md => .cursor/rules/write-unit-tests.mdc (98%) diff --git a/prompts/expo-doctor.md b/.cursor/rules/expo-doctor.mdc similarity index 92% rename from prompts/expo-doctor.md rename to .cursor/rules/expo-doctor.mdc index 21329310..03b516b3 100644 --- a/prompts/expo-doctor.md +++ b/.cursor/rules/expo-doctor.mdc @@ -1,3 +1,9 @@ +--- +description: +globs: +alwaysApply: false +--- + You are an expert in TypeScript, Expo, and React Native. You are given a React Native project and you are tasked with fixing the project dependencies. diff --git a/prompts/image-to-components.md b/.cursor/rules/image-to-components.mdc similarity index 98% rename from prompts/image-to-components.md rename to .cursor/rules/image-to-components.mdc index a24bd670..166a7112 100644 --- a/prompts/image-to-components.md +++ b/.cursor/rules/image-to-components.mdc @@ -1,3 +1,9 @@ +--- +description: +globs: +alwaysApply: false +--- + You are an expert in TypeScript, React Native, Expo, and Mobile UI development with Nativewind. Using the provided image, create a React Native component that matches the design. diff --git a/.cursorrules b/.cursor/rules/project-standards.mdc similarity index 97% rename from .cursorrules rename to .cursor/rules/project-standards.mdc index a4aa1c03..35a8e4dd 100644 --- a/.cursorrules +++ b/.cursor/rules/project-standards.mdc @@ -1,3 +1,9 @@ +--- +description: Project standards for developing in React Native/Expo with TypeScript and Nativewind +globs: +alwaysApply: true +--- + # React Native/Expo Project You are an expert in TypeScript, React Native, Expo, and Mobile UI development with Nativewind. diff --git a/prompts/svg-icon.md b/.cursor/rules/svg-icon.mdc similarity index 96% rename from prompts/svg-icon.md rename to .cursor/rules/svg-icon.mdc index 16cf4aa4..073725cb 100644 --- a/prompts/svg-icon.md +++ b/.cursor/rules/svg-icon.mdc @@ -1,3 +1,9 @@ +--- +description: +globs: +alwaysApply: false +--- + You are an expert in TypeScript, Expo, nativeWind and React Native You are given an svg icon as string file or url and you are tasked with creating a react native component for it. diff --git a/prompts/write-unit-tests.md b/.cursor/rules/write-unit-tests.mdc similarity index 98% rename from prompts/write-unit-tests.md rename to .cursor/rules/write-unit-tests.mdc index 30075c2a..a33ca808 100644 --- a/prompts/write-unit-tests.md +++ b/.cursor/rules/write-unit-tests.mdc @@ -1,3 +1,9 @@ +--- +description: +globs: +alwaysApply: false +--- + You are an expert in TypeScript, React Native, Expo, Testing with Jest and React Native testing library. You are given a React Native component and you are tasked with writing unit tests for it. From e253c6a88f665a9d0bb1e01741109f2fd0fdde8a Mon Sep 17 00:00:00 2001 From: jowi Date: Thu, 7 Aug 2025 23:42:19 -0400 Subject: [PATCH 2/2] docs(CLAUDE): create file --- CLAUDE.md | 184 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 184 insertions(+) create mode 100644 CLAUDE.md diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 00000000..4b764a4a --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,184 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Project Overview + +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. + +## Key Technologies + +- **Expo SDK 53** with custom dev client +- **React Native 0.79.4** with React 19 +- **TypeScript** with strict configuration +- **NativeWind v4** (Tailwind CSS for React Native) +- **Expo Router v5** for file-based navigation +- **React Query** with react-query-kit for data fetching +- **Zustand** for state management +- **React Native MMKV** for secure storage +- **Zod** for schema validation +- **React Hook Form** for form handling +- **i18next** for internationalization + +## Development Commands + +### Core Commands + +- `pnpm start` - Start Expo development server +- `pnpm android` - Run on Android device/emulator +- `pnpm ios` - Run on iOS device/simulator +- `pnpm web` - Run on web browser +- `pnpm xcode` - Open iOS project in Xcode + +### Environment-specific Commands + +- `pnpm start:staging` - Start with staging environment +- `pnpm start:production` - Start with production environment +- `pnpm prebuild` - Generate native code +- `pnpm prebuild:staging` - Generate native code for staging +- `pnpm prebuild:production` - Generate native code for production + +### Quality Assurance + +- `pnpm lint` - Run ESLint +- `pnpm type-check` - Run TypeScript type checking +- `pnpm lint:translations` - Lint JSON translation files +- `pnpm test` - Run Jest tests +- `pnpm test:watch` - Run tests in watch mode +- `pnpm test:ci` - Run tests with coverage for CI +- `pnpm check-all` - Run all quality checks (lint + type-check + translations + tests) + +### Build Commands + +- `pnpm build:development:ios` - Build development iOS app +- `pnpm build:development:android` - Build development Android app +- `pnpm build:staging:ios` - Build staging iOS app +- `pnpm build:staging:android` - Build staging Android app +- `pnpm build:production:ios` - Build production iOS app +- `pnpm build:production:android` - Build production Android app + +### Other Commands + +- `pnpm doctor` - Run Expo Doctor to check project health +- `pnpm e2e-test` - Run end-to-end tests with Maestro +- `pnpm app-release` - Create app release with version bump + +## Project Architecture + +### Directory Structure + +``` +src/ +├── api/ # API layer with React Query +│ ├── common/ # Shared API utilities, client config +│ └── posts/ # Example API endpoints and hooks +├── app/ # Expo Router screens (file-based routing) +│ ├── (app)/ # Authenticated app screens +│ ├── feed/ # Feed-related screens +│ ├── login.tsx # Authentication screen +│ └── onboarding.tsx# First-time user flow +├── components/ # Shared UI components +│ ├── ui/ # Core UI components (Button, Input, Text, etc.) +│ └── settings/ # Feature-specific components +├── lib/ # Shared utilities and configuration +│ ├── auth/ # Authentication logic +│ ├── hooks/ # Custom React hooks +│ ├── i18n/ # Internationalization setup +│ ├── env.js # Environment variable validation +│ ├── storage.tsx # MMKV storage wrapper +│ └── utils.ts # General utilities +├── translations/ # i18n JSON files +└── types/ # Shared TypeScript types +``` + +### Key Architectural Patterns + +**State Management:** + +- Zustand for global state (auth, settings) +- React Query for server state caching +- MMKV for persistent storage +- React Hook Form for form state + +**Navigation:** + +- Expo Router with file-based routing +- Typed routes enabled for type safety +- Authentication flow with route protection + +**Styling:** + +- NativeWind v4 with Tailwind CSS classes +- Custom color system defined in `src/components/ui/colors.js` +- Dark mode support with theme provider + +**Data Fetching:** + +- React Query with react-query-kit for type-safe APIs +- Axios client with interceptors in `src/api/common/client.tsx` +- Custom hooks pattern for API endpoints + +## Environment Configuration + +The project uses a sophisticated environment system: + +- **Development:** Local development with `.env.development` +- **Staging:** Internal testing with `.env.staging` +- **Production:** App store builds with `.env.production` + +Environment variables are validated using Zod schemas in `env.js`. Client variables are accessible via `@env` import alias. + +## Code Standards + +**File Naming:** Use kebab-case for all files and directories (e.g., `user-profile.tsx`) + +**Components:** + +- Use functional components with TypeScript +- Props defined as `type Props = {...}` +- Maximum 80 lines per component +- Use absolute imports with `@/` prefix + +**Testing:** + +- Jest with React Native Testing Library +- Test files use `.test.tsx` extension +- Focus on utilities and complex component logic +- Run tests with `pnpm test` + +**Linting:** + +- ESLint with custom configuration +- Prettier for code formatting +- Import sorting with simple-import-sort +- TailwindCSS class ordering +- Custom rules: max 3 params, max 70 lines per function + +## Package Management + +- **Package Manager:** pnpm (required - enforced by preinstall script) +- **Install Packages:** Use `npx expo install ` for Expo compatibility +- **Dependencies:** All managed through Expo SDK for compatibility + +## Build System + +**EAS Build:** + +- Development builds with dev client +- Staging builds for internal testing +- Production builds for app stores +- Multi-environment support with different bundle IDs + +**Native Configuration:** + +- iOS: Bundle ID varies by environment (com.obytes, com.obytes.staging, etc.) +- Android: Package name follows same pattern +- App icons badged for non-production builds + +## Testing Strategy + +**Unit Tests:** Jest + React Native Testing Library for components and utilities +**E2E Tests:** Maestro for end-to-end user flows +**Type Safety:** Strict TypeScript with comprehensive type checking + +Always run `pnpm check-all` before committing to ensure code quality.