📚 Boilerplate Documentation

Main Index

🚀 Quick Start

DocumentDescription
QUICKSTART⭐ Start here - Quick changes in 5 minutes
FEATURESđŸ“± Complete list of implemented features

📐 Fundamental Guides

DocumentDescription
ARCHITECTUREProject structure, patterns and conventions
COMPONENTSComplete guide to reusable components
STATE_MANAGEMENTState management with React Query and Context
NAVIGATIONNavigation system with Expo Router
STYLINGDesign system, colors and styles
ADDING_FEATURESStep-by-step guide to add features

🔧 Reference Guides

DocumentDescription
HOOKSđŸȘ Custom hooks and usage patterns
CONTEXTS🌐 Available contexts (Theme, I18n, App, Toast)
UTILS🔧 Utility functions (formatting, haptics, etc.)
TYPES📝 TypeScript reference
MOCKS🎭 Mock data for development
TESTINGđŸ§Ș Unit tests, E2E tests with Jest and Maestro

🔌 Integration Guides

DocumentDescription
AUTHENTICATION🔐 User authentication system
DATABASEđŸ—„ïž Database integration
PAYMENTS💰 Payments and subscriptions with RevenueCat
NOTIFICATIONS🔔 Push and local notifications
ANALYTICS📊 Analytics and event tracking
AIđŸ€– AI features
REVENUECAT💳 RevenueCat technical reference
I18N🌍 Internationalization and translations
DEEP_LINKING🔗 Deep links and universal links
ERROR_TRACKING🐛 Error tracking and crash reporting

🚀 Store Submission

DocumentDescription
STORE_SUBMISSIONđŸ“± App Store & Google Play submission guide
STORE_ASSETS🎹 Icons, screenshots and marketing assets

🚀 Included Features

UI Components

ComponentDescriptionLocation
ButtonButton with variants (primary, secondary, outline, ghost, gradient)components/Button.tsx
CardCard with variants (default, horizontal, compact)components/Card.tsx
InputInput field with validationcomponents/Input.tsx
AvatarAvatar with image or initialscomponents/Avatar.tsx
SearchBarSearch bar with animationcomponents/SearchBar.tsx
FilterModalAnimated filter modalcomponents/FilterModal.tsx
SkeletonLoaderAnimated loading placeholderscomponents/SkeletonLoader.tsx
ToastTemporary notificationscomponents/Toast.tsx
EmptyStateEmpty state with actioncomponents/EmptyState.tsx
CategoryChipSelectable category chipscomponents/CategoryChip.tsx
StatCardStatistics cardcomponents/StatCard.tsx
SettingsRowSettings rowcomponents/SettingsRow.tsx
IconButtonIcon-only buttoncomponents/IconButton.tsx

Contexts and State

ContextDescriptionLocation
AppContextMain state (user, favorites, settings)contexts/AppContext.tsx
ThemeContextTheme system (light/dark/system)contexts/ThemeContext.tsx
ToastContextToast notification systemcontexts/ToastContext.tsx
I18nContextInternationalization and translationscontexts/I18nContext.tsx
AuthContextUser authenticationcontexts/AuthContext.tsx
NotificationsContextPush and local notificationscontexts/NotificationsContext.tsx
AnalyticsContextEvent tracking and analyticscontexts/AnalyticsContext.tsx
PurchasesContextIn-app purchases with RevenueCatcontexts/PurchasesContext.tsx

Screens (Tabs)

ScreenDescriptionRoute
HomeDashboard with stats and recent items/(tabs)/(home)
ExploreItem list with search and filters/(tabs)/explore
FavoritesItems saved as favorites/(tabs)/favorites
ActivityActivity feed/(tabs)/activity
MessagesMessaging system/(tabs)/messages
ProfileUser profile and settings/(tabs)/profile

Screens (Modals/Stack)

ScreenDescriptionRoute
Item DetailItem details/(tabs)/(home)/item-detail
Edit ProfileEdit user profile/(tabs)/profile/edit-profile
ChatIndividual conversation/(tabs)/messages/[chatId]
NotificationsNotifications list/notifications
OnboardingWelcome screen/onboarding

đŸ› ïž Quick Modification Guide

Add a New Screen

// 1. Create file in app/(tabs)/my-tab/index.tsx
import { View, Text, StyleSheet } from 'react-native';
import { useTheme } from '@/contexts/ThemeContext';

export default function MyTabScreen() {
  const { colors } = useTheme();
  
  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <Text style={[styles.title, { color: colors.text }]}>My Tab</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  title: { fontSize: 24, fontWeight: 'bold' },
});

// 2. Create _layout.tsx in the same folder
import { Stack } from 'expo-router';

export default function MyTabLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'My Tab' }} />
    </Stack>
  );
}

// 3. Register in app/(tabs)/_layout.tsx
<Tabs.Screen
  name="my-tab"
  options={{
    title: 'My Tab',
    tabBarIcon: ({ color, size }) => <Icon size={size} color={color} />,
  }}
/>

Show a Toast

const { showToast } = useToast();
showToast('Success message', 'success');
showToast('There was an error', 'error');

Change Theme

const { setTheme, isDark, colors } = useTheme();
setTheme('dark'); // 'light' | 'dark' | 'system'

Change Language

const { setLanguage, t, language } = useI18n();
setLanguage('en'); // 'es' | 'en'
const text = t.common.save;

Favorites

const { toggleFavorite, isFavorite } = useApp();
toggleFavorite(itemId);
const isFav = isFavorite(itemId);

const router = useRouter();
router.push('/explore');
router.push({ pathname: '/(tabs)/(home)/item-detail', params: { id: '123' } });
router.back();

📂 File Structure

├── app/                    # Screens and navigation (Expo Router)
│   ├── (tabs)/            # Tab navigation
│   │   ├── (home)/        # Home tab with internal stack
│   │   ├── explore/       # Explore tab
│   │   ├── favorites/     # Favorites tab
│   │   ├── activity/      # Activity tab
│   │   ├── messages/      # Messages tab
│   │   └── profile/       # Profile tab
│   ├── _layout.tsx        # Root layout
│   ├── notifications.tsx  # Notifications modal
│   └── onboarding.tsx     # Welcome screen
├── components/             # Reusable components
├── contexts/               # Global state (Context + React Query)
├── constants/              # Colors, spacing, configuration
├── mocks/                  # Test data for development
├── types/                  # TypeScript definitions
├── utils/                  # Helper functions
└── docs/                   # This documentation

🔧 Useful Scripts

# Start development
npx expo start

# Clear cache
npx expo start -c

# Check TypeScript types
npx tsc --noEmit

# Check ESLint
npx eslint .

📖 Learning Path

If you're new:

  1. ⭐ Start with QUICKSTART - Learn to make basic changes
  2. đŸ“± Read FEATURES - Discover all features
  3. đŸ—ïž Review ARCHITECTURE - Understand the structure

For development:

  1. đŸ§© Check COMPONENTS - Available components
  2. đŸȘ Learn HOOKS - Custom hooks
  3. 🌐 Understand CONTEXTS - State system
  4. ✹ Follow ADDING_FEATURES - Add features

For reference:

  1. 📝 Types: TYPES - TypeScript reference
  2. 🔧 Utils: UTILS - Utility functions
  3. 🎭 Mocks: MOCKS - Development data
  4. đŸ§Ș Testing: TESTING - Unit and E2E tests

For integrations:

  1. 🔐 See AUTHENTICATION - User system
  2. đŸ—„ïž See DATABASE - Persistence and databases
  3. 💰 See PAYMENTS - Monetization with subscriptions
  4. 🔔 See NOTIFICATIONS - Push notifications
  5. 📊 See ANALYTICS - Analytics and tracking
  6. đŸ€– See AI - AI features
  7. 🌍 See I18N - Translations and localization
  8. 🔗 See DEEP_LINKING - Deep links configuration
  9. 🐛 See ERROR_TRACKING - Error tracking setup

For store submission:

  1. đŸ“± See STORE_SUBMISSION - Submit to stores
  2. 🎹 See STORE_ASSETS - Create store assets

📊 Documentation Summary

CategoryDocumentsPurpose
StartQUICKSTART, FEATURESGet started quickly
ArchitectureARCHITECTURE, NAVIGATION, STATE_MANAGEMENTUnderstand structure
DevelopmentCOMPONENTS, HOOKS, CONTEXTS, ADDING_FEATURESCreate features
ReferenceTYPES, UTILS, MOCKS, STYLING, TESTINGQuick reference
IntegrationAUTH, DATABASE, PAYMENTS, NOTIFICATIONS, ANALYTICS, AI, I18N, DEEP_LINKING, ERROR_TRACKINGConnect services
StoreSTORE_SUBMISSION, STORE_ASSETSPublish to stores

Total: 25 reference documents