Project Architecture

Understanding the feature-based architecture and navigation structure of PokéDex Fleek

Overview

PokéDex Fleek follows a feature-based architecture that separates concerns and promotes code reusability. The project is built with React Native and Expo, using modern patterns for navigation, state management, and service abstraction.

Feature-Based Folder Structure

The application is organized around domain features rather than technical layers:

src/
├── api/             # Network clients (Axios/Fetch) and PokéAPI definitions
├── assets/          # Static resources (Audio, Sprites, Fonts)
├── components/      # Atomic UI components (PokeCard, CameraOverlay, CustomButton)
├── features/        # Domain modules
│   ├── intro/       # Welcome and onboarding screens
│   ├── home/        # Main dashboard
│   ├── pokedex/     # Pokémon listing and details
│   └── scanner/     # TensorFlow, Frame Processors, and Color Logic
├── hooks/           # Service Layer (usePokedex, useColorMatcher, useDexterVoice)
├── navigation/      # Stack & Tab Navigators
├── services/        # Pure logic / Helpers (ColorService, ColorConverter)
├── store/           # Global state management (Zustand)
└── theme/           # Design tokens and styling

Directory Breakdown

api/

Contains API clients and type definitions for external services like PokéAPI. This layer handles all HTTP requests and data transformation.

features/

Each subdirectory represents a distinct user feature:

• intro/: Welcome screen and onboarding flow
• home/: Main dashboard with navigation options
• pokedex/: Pokémon list and detail views
• scanner/: Camera-based color detection and AI integration

services/

Pure utility functions with no UI dependencies. Examples:

• ColorService: Euclidean distance calculations
• ColorConverter: Hex to RGB/HSL transformations
• AudioService: TTS voice narration logic

hooks/

Custom React hooks that act as a service layer between features and utilities. They encapsulate business logic and provide reusable state management.

Navigation Setup

The app uses React Navigation 7 with a native stack navigator for iOS and Android.

AppRouter Implementation

src/navigation/AppRouter.js

import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';

import { IntroScreen } from '../features/intro/IntroScreen';
import { HomeScreen } from '../features/home/HomeScreen';
import { ScannerScreen } from '../features/scanner/ScannerScreen';
import { DetailsScreen } from '../features/pokedex/DetailsScreen';
import { PokedexListScreen } from '../features/pokedex/PokedexListScreen';

const Stack = createNativeStackNavigator();

export default function AppRouter() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Intro"
        screenOptions={{
          headerStyle: { backgroundColor: '#f44336' },
          headerTintColor: '#fff',
          headerTitleStyle: { fontWeight: 'bold' },
        }}
      >
        <Stack.Screen name="Intro" component={IntroScreen} options={{ headerShown: false }} />
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'PokéDex' }} />
        <Stack.Screen name="Scanner" component={ScannerScreen} options={{ title: 'Escáner de Campo' }} />
        <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Datos de la Pokédex' }} />
        <Stack.Screen name="PokedexList" component={PokedexListScreen} options={{ title: 'Lista de Pokémon' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Screen Flow

1. Intro: Onboarding screen (headerless)
2. Home: Main dashboard with feature access
3. Scanner: Camera-based Pokémon detection
4. PokedexList: Browse all available Pokémon
5. Details: Individual Pokémon information with TTS narration

Data Flow

The application follows a unidirectional data flow pattern:

┌─────────────┐
│   UI Layer  │ (React Components)
└──────┬──────┘
       │
       ▼
┌─────────────┐
│ Service Layer│ (Custom Hooks)
└──────┬──────┘
       │
       ▼
┌─────────────┐
│  API/Services│ (Business Logic)
└──────┬──────┘
       │
       ▼
┌─────────────┐
│  External   │ (PokéAPI, TensorFlow, Camera)
│   Sources   │
└─────────────┘

Example Flow: Color Detection

1. ScannerScreen (UI) captures camera frame
2. hexToHue (Service) converts color to HSL
3. ColorService.getDistance calculates Euclidean distance
4. POKEMON_DB (Data) returns matching Pokémon
5. Navigation pushes to DetailsScreen

State Management

The project uses Zustand for global state management, keeping local state in components via useState when appropriate.

State Categories

• Local State: Camera permissions, loading indicators, UI toggles
• Shared State: User preferences, cached Pokémon data, detection history
• API State: Fetched data from PokéAPI with loading/error states

Key Design Patterns

Feature Isolation

Each feature is self-contained with its own components, logic, and assets. Changes to one feature don’t affect others.

Service Layer

Custom hooks abstract business logic from UI components, making them easier to test and reuse.

Pure Functions

Services contain pure functions with no side effects, ensuring predictable behavior and testability.

Component Composition

Atomic components are composed into larger features, promoting reusability and consistency.

Performance Considerations

• Lazy Loading: Screens are loaded on-demand via React Navigation
• Memoization: Heavy computations (color distance) are memoized
• Native Modules: Camera and TensorFlow run on native threads
• Frame Processors: Use Worklets for 60fps camera processing

Next Steps

Color Matching

Learn how the Euclidean distance algorithm maps colors to Pokémon

AI Detection

Explore TensorFlow.js integration and frame processing