Fynd Commerce App

A React Native mobile application built for e-commerce functionality using the Fynd Platform Integration (FPI) SDK. This app provides a seamless shopping experience with authentication, product browsing, and checkout capabilities.

📚 Documentation

This project includes comprehensive documentation organized by topic:

🚀 Getting Started

• Getting Started Guide - Complete setup and core concepts
• Development Guidelines - Code standards and best practices

🏗️ Architecture & Core Concepts

• Store Management - Data fetching and state management
• Navigation System - Routing and navigation patterns
• Theme System - UI theming and customization
• WebView Integration - Hybrid app architecture
• Sections Framework - Content section development

📖 Detailed Guides

• FPI Client Overview - SDK integration patterns
• Data Fetching Patterns - GraphQL and API usage
• Query Patterns - GraphQL query best practices
• Store Best Practices - State management guidelines
• Navigation Structure - Route organization
• Navigation Hooks - Custom navigation utilities
• WebView Implementation - WebView setup and usage
• Session Management - WebView session handling
• Theme Customization - Theme modification guide
• Theme Fetching - Dynamic theme loading
• Section Development - Building content sections

🚀 Features

• Authentication System: Login with OTP and password-based authentication
• Multi-language Support: Internationalization (i18n) support for English and Hindi
• Theme Support: Dynamic theming capabilities with custom theme provider
• WebView Integration: Embedded web content for enhanced user experience
• Redux State Management: Centralized state management with Redux Toolkit
• GraphQL Integration: API communication using GraphQL with FPI client
• Cross-platform: Supports both iOS and Android platforms
• E-commerce Features: Product browsing, cart management, checkout flow
• Country Picker: International phone number support with country selection
• Form Validation: Comprehensive form validation with React Hook Form
• Toast Notifications: User feedback with toast messages
• Permission Handling: Camera and location permissions management
• Skeleton Loading: Auto-skeleton loading for better UX
• SVG Support: Vector graphics support with react-native-svg
• Fast Image Loading: Optimized image loading with react-native-fast-image

📱 Screenshots

Add screenshots of your app here

🛠 Tech Stack

• React Native: 0.79.2
• React: 19.0.0
• TypeScript: 5.0.4
• Redux Toolkit: State management
• React Navigation: Navigation between screens (Stack, Drawer, Bottom Tabs)
• GraphQL: API communication with FPI client
• i18next: Internationalization
• React Hook Form: Form handling and validation
• Fynd Platform Integration (FPI): E-commerce SDK
• React Native WebView: Embedded web content
• React Native Fast Image: Optimized image loading
• React Native SVG: Vector graphics support
• React Native Bootsplash: App launch screen
• React Native Reanimated: Smooth animations
• React Native Gesture Handler: Touch handling
• React Native Permissions: Permission management
• React Native Toast Message: User notifications
• Google Libphonenumber: Phone number validation
• React Native Country Picker: Country selection
• React Native Crypto: Cryptographic functions
• React Native Keyboard Controller: Keyboard handling
• React Native Popup Menu: Context menus
• React Native Safe Area Context: Safe area handling
• React Native Screens: Screen management
• React Native URL Polyfill: URL polyfills

📋 Prerequisites

Before running this project, make sure you have the following installed:

• Node.js: >= 18.0.0
• React Native CLI: Latest version
• Xcode: For iOS development (macOS only)
• Android Studio: For Android development
• Java Development Kit (JDK): Version 11 or higher
• CocoaPods: For iOS dependencies

🚀 Quick Start

1. Clone the repository

git clone https://github.com/gofynd/fynd-commerce-app.git
cd fynd-commerce-app

2. Install dependencies

npm install
# or
yarn install

3. iOS Setup (macOS only)

cd ios
pod install
cd ..

4. Environment Configuration

Create a .env file in the root directory:

API_DOMAIN=https://api.fynd.com
APPLICATION_ID=your_application_id
APPLICATION_TOKEN=your_application_token

Important: Never commit your .env file to version control. It's already in .gitignore.

5. Start the Metro bundler

npm start
# or
yarn start

6. Run the application

For iOS:

npm run ios
# or
yarn ios

For Android:

npm run android
# or
yarn android

📁 Project Structure

src/
├── app/                          # App-level configuration
│   ├── config/                   # App config (env vars, runtime configs)
│   ├── constants/                # App-wide constants
│   └── types/                    # Global TypeScript types/interfaces
│
├── assets/                       # Static assets (images, fonts, icons)
│   ├── images/
│   ├── icons/
│
├── components/                   # Reusable UI components
│   ├── common/                   # Shared across features
│   │   ├── mobile-number/        # Phone number input component
│   │   ├── product-hotspot/      # Product hotspot component
│   │   ├── section-renderer/     # Section rendering component
│   │   └── web-component/        # Web component wrapper
│   ├── layout/                   # App-wide layouts
│   │   ├── auth-container/       # Authentication layout
│   │   ├── bottom-tab/           # Bottom tab navigation
│   │   ├── drawer/               # Drawer navigation
│   │   ├── header/               # Header component
│   │   └── home-layout/          # Home screen layout
│   └── ui/                       # Atomic UI primitives
│       ├── button/               # Button component
│       ├── container/            # Container component
│       ├── image/                # Image component
│       ├── input/                # Input component
│       ├── loader/               # Loading component
│       ├── positioned-box/       # Positioned box component
│       ├── svg-wrapper/          # SVG wrapper component
│       └── text/                 # Text component
│
├── pages/                        # Feature-based modules
│   ├── forgot-password/          # Password recovery
│   ├── login/                    # Authentication screens
│   │   ├── components/           # Login-specific components
│   │   └── hooks/                # Login-specific hooks
│   ├── register/                 # User registration
│   ├── section-page/             # Section display page
│   └── web-view-screen/          # WebView screen
│
├── sections/                     # Content sections
│   ├── hero-image/               # Hero banner section
│   └── index.tsx                 # Section registry
│
├── graphql/                      # Global GraphQL setup
│   └── queries/                  # GraphQL queries
│
├── shared/                       # Shared non-UI logic
│   ├── hooks/                    # Reusable hooks
│   ├── providers/                # App-level context providers
│   └── utils/                    # Utility functions
│
├── navigation/                   # Navigation config
│   ├── routes/                   # Route definitions
│   └── types/                    # Navigation types
│
├── locales/                      # i18n files
│   ├── en/                       # English translations
│   ├── hi/                       # Hindi translations
│   └── index.ts                  # i18n configuration
│
└── __tests__/                    # Unit + integration tests
    ├── components/               # Component tests
    ├── shared/                   # Shared utility tests
    └── utils/                    # Test utilities

🔧 Core Concepts

FPI (Fynd Platform Integration)

The app uses FPI for e-commerce functionality. See FPI Client Overview for detailed integration patterns.

const {fpi, store, isLoading, error} = useFpiClient({
  applicationID: 'YOUR_APPLICATION_ID',
  applicationToken: 'YOUR_APPLICATION_TOKEN',
  domain: 'https://api.fynd.com',
});

GraphQL Data Fetching

Use FPI to fetch data from GraphQL. See Data Fetching Patterns for best practices.

const platformData = await fpiClient.executeGQL(PLATFORM_CONFIG_QUERY, {});

Store Management

Use FPI getters to fetch data from store. See Store Management for detailed patterns.

const platformData = useSelector(fpi.getters.PLATFORM_DATA);

Navigation System

The app uses a hybrid navigation system. See Navigation System for architecture details.

Theme System

Dynamic theming with custom theme provider. See Theme System for customization.

🧪 Testing

Unit Tests

Run the test suite:

npm test
# or
yarn test

Run tests with coverage:

npm test -- --coverage
# or
yarn test --coverage

E2E Tests with Maestro

The project includes Maestro for end-to-end testing:

# Run Android E2E tests
npm run test:android:prod
# or
yarn test:android:prod

# Run iOS E2E tests
npm run test:ios:prod
# or
yarn test:ios:prod

Test Structure

__tests__/
├── components/                   # Component tests
│   ├── common/                   # Common component tests
│   ├── layout/                   # Layout component tests
│   └── ui/                       # UI component tests
├── shared/                       # Shared utility tests
│   ├── hooks/                    # Hook tests
│   └── utils/                    # Utility tests
└── test-utils.tsx               # Test utilities

📦 Available Scripts

• npm start / yarn start - Start the Metro bundler
• npm run ios / yarn ios - Run the app on iOS simulator
• npm run android / yarn android - Run the app on Android emulator
• npm test / yarn test - Run the test suite
• npm run lint / yarn lint - Run ESLint for code linting
• npm run prepare / yarn prepare - Setup Husky pre-commit hooks
• npm run lint-staged / yarn lint-staged - Run lint-staged for staged files
• npm run test:android:prod / yarn test:android:prod - Run Maestro E2E tests on Android
• npm run test:ios:prod / yarn test:ios:prod - Run Maestro E2E tests on iOS

🧪 Maestro E2E Testing

This project uses Maestro for end-to-end testing of the mobile application. Maestro provides automated UI testing that simulates real user interactions.

Setup

1. Install Maestro: Follow the official installation guide

2. Environment Configuration: Create a .env file in the root directory with test credentials:

   # Application Configuration
   APPLICATION_ID=your_application_id
   APPLICATION_TOKEN=your_application_token
   DOMAIN=your_domain
   
   

3. Test Configuration: See Maestro Configuration for detailed setup instructions.

Running E2E Tests

# Run Android E2E tests
npm run test:android:prod
# or
yarn test:android:prod

# Run iOS E2E tests
npm run test:ios:prod
# or
yarn test:ios:prod

# Or run directly with Maestro
./maestro/scripts/android.sh
./maestro/scripts/ios.sh

Test Coverage

The Maestro tests cover:

• App launch and navigation
• Authentication flow (login with mobile/email)
• User account management
• Product browsing and search
• Basic e-commerce functionality

Environment Variables

• TEST_MOBILE_NUMBER: Test account mobile number
• TEST_PASSWORD: Test account password
• TEST_EMAIL: Test account email address
• TEST_USERNAME: Test account username
• TEST_DISPLAY_NAME: Expected display name after login
• APP_ID: Application bundle ID (auto-set)
• PLATFORM: Target platform (Android/iOS, auto-set)

🔍 Troubleshooting

Common Issues

1. Metro bundler issues: Clear cache with npx react-native start --reset-cache
2. iOS build issues: Clean build folder in Xcode and run pod install again
3. Android build issues: Clean project with cd android && ./gradlew clean
4. FPI configuration issues: Verify application ID and token in environment variables

Platform-specific Setup

iOS

• Ensure Xcode is up to date
• Install iOS Simulator
• Run pod install in the ios directory
• Configure signing certificates in Xcode

Android

• Install Android Studio
• Set up Android SDK
• Configure ANDROID_HOME environment variable
• Create and configure Android Virtual Device (AVD)
• Ensure Java 11+ is installed

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Follow the Development Guidelines
4. Write tests for new features
5. Commit your changes (git commit -m 'feat: Add some amazing feature')
6. Push to the branch (git push origin feature/amazing-feature)
7. Open a Pull Request

Commit Convention

Use conventional commits:

• feat: Add login screen
• fix: Correct image alignment
• refactor: Simplify form logic
• docs: Update README

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

For support and questions:

• Create an issue in the repository
• Contact the development team
• Check the Fynd Documentation

🔄 Version History

• v0.0.1 - Initial release with basic authentication and e-commerce features
• Added Maestro E2E testing
• Enhanced component library with atomic design
• Improved internationalization support
• Added comprehensive form validation
• Integrated FPI SDK for e-commerce functionality

---

Made with ❤️ by the Fynd Team