Day 1: Understanding the Vision

Goal: Understand why consistency matters and our "single author" philosophy.

Read & Understand:

1. This onboarding guide completely
2. Project Structure - Understand folder organization
3. Feature Implementation Decision Tree - Most Important!

Exercise:

Given these scenarios, determine where each code should go:

1. A date formatting function used by checkout and profile features
2. A new API endpoint for fetching user preferences
3. A loading spinner used across the entire app
4. A cart total calculation function

Checkpoint with Mentor:

• Explain the folder structure
• Demonstrate using the decision tree

Day 2: TypeScript & React Patterns

Goal: Master our exact coding patterns.

Read & Practice:

1. TypeScript & React Patterns
2. File Naming Conventions

Coding Exercise:

Create a simple ProductCard component following ALL patterns:

// Your task: Create a ProductCard that:
// 1. Displays product name, price, and image
// 2. Has an onPress handler
// 3. Shows a discount badge if product is on sale
// 4. Follows our EXACT component structure
// 5. Uses proper TypeScript types
// 6. Includes proper error handling

Review Checklist:

• Imports in correct order
• Interface not type for props
• Function declaration not arrow function
• Styles in StyleSheet not inline
• Proper error handling for missing data
• File in correct location

Checkpoint with Mentor:

• Code review of ProductCard
• Fix any pattern violations

Day 3: State Management & Data Fetching

Goal: Understand when and how to manage different types of state.

Read:

1. State Management Implementation Guide
2. Server State Management Guide
3. Review existing domain hooks in core/domains/*/hooks.ts

Exercise:

Implement a product search feature:

1. Create search input with debouncing
2. Fetch results using React Query
3. Display results with proper loading/error states
4. Add filtering capabilities

Must Include:

• Debounced search (useDebounce hook)
• React Query for data fetching
• Proper error boundaries
• Loading skeletons
• Empty state handling

Common Mistakes to Avoid:

• ❌ Manual loading/error state management
• ❌ Fetching in components directly
• ❌ Global state for search results
• ✅ Domain hooks for data fetching
• ✅ Local state for UI-only data

Checkpoint with Mentor:

• Review state management choices
• Verify React Query usage

Day 4: Common Pitfalls Review

Goal: Learn from others' mistakes.

Study:

1. Common Pitfalls & Solutions - Read thoroughly!
2. Identify which pitfalls you've made before

Exercise - Fix the Code:

Your mentor will provide you with intentionally problematic code. Your task:

1. Identify all issues
2. Explain why each is wrong
3. Fix following our patterns

Common issues to look for:

• Wrong file locations
• State mutations
• Missing error handling
• Performance problems
• TypeScript anti-patterns

Self-Assessment:

Rate your understanding (1-5) of:

• Where code belongs: ___
• State management choices: ___
• TypeScript patterns: ___
• Performance optimization: ___
• Error handling: ___

Checkpoint with Mentor:

• Review fixed code
• Discuss any scores below 4

Day 5: Real Feature Implementation

Goal: Implement a complete feature following all standards.

Your First Feature:

Implement a "Favorites" feature that allows users to:

1. Mark products as favorites
2. View list of favorite products
3. Remove items from favorites
4. Persist favorites locally

Required Deliverables:

core/domains/favorites/
├── types.ts        # Favorite type definitions
├── store.ts        # Zustand store for favorites
├── hooks.ts        # useFavorites, useToggleFavorite
├── utils.ts        # Helper functions
└── index.ts        # Barrel exports

Implementation Checklist:

• Used Feature Decision Tree for all code placement
• Created domain for business logic
• Used Zustand for client state
• Added proper TypeScript types
• Included error handling
• Added loading states
• Wrote tests
• No code duplication

Final Review:

• Run TypeScript check: npx tsc --noEmit
• All imports use @/ prefix
• No console warnings
• Code looks like our examples

Checkpoint with Mentor:

• Complete feature review
• Production readiness assessment