Introduction

Welcome to PokéDex Fleek - an AI-powered Pokédex that identifies objects through camera scanning and color matching

PokéDex Fleek

PokéDex Fleek is an advanced AI-powered Pokédex built with React Native and TensorFlow.js. Unlike traditional Pokédex apps with manual search, this app acts as a field research tool that identifies objects or living beings through your device’s camera, extracts their dominant colors, and maps them to Generation 1 Pokémon using chromatic proximity logic.

What Makes It Special

PokéDex Fleek transforms your mobile device into an intelligent Pokémon identification system that bridges the real world with the Pokémon universe. Point your camera at any object, person, animal, or plant, and watch as the app analyzes its colors and matches it to the most similar Pokémon.

Key Features

AI-Powered Detection

Uses computer vision models to classify targets (Person, Animal, Plant, Object) in real-time

Color Matching Algorithm

Extracts dominant colors and converts to HSL hue values to match Pokémon by color ranges

Dexter Voice Narration

Text-to-speech narration in Spanish (Latin American) brings Pokédex entries to life

Real-Time Camera Processing

Powered by react-native-vision-camera V4 for high-performance frame processing

Technology Stack

PokéDex Fleek is built with modern mobile development technologies:

Layer	Technology
Framework	Expo (Development Builds)
Navigation	React Navigation 7
AI/Vision	TensorFlow.js + vision-camera-tflite
Camera	react-native-vision-camera (V4)
API	PokéAPI (v2)
Voice	expo-speech (Spanish Latino)
UI	NativeWind (Tailwind CSS) + react-native-svg

Use Cases

Educational Tool

Perfect for learning about colors, object classification, and AI technology in a fun, interactive way.

Pokémon Fan Experience

Bring the magic of Pokémon into the real world by discovering which Pokémon matches everyday objects.

Computer Vision Demo

Showcase the capabilities of on-device machine learning and color analysis algorithms.

How It Works

The app follows a sophisticated matching algorithm:

1. Detection: Uses vision AI models to classify the target object (planned feature)

2. Analysis: Extracts the dominant color from the camera frame using react-native-image-colors

3. Matching: Converts the color to HSL hue (0-360°) and matches against Pokémon color ranges:

   const hue = hexToHue(detectedHex);
   const match = POKEMON_DB.find(p => 
     hue >= p.colorRange.hueMin && hue <= p.colorRange.hueMax
   );
   

4. Feedback: Dexter’s voice narrates the Pokédex entry via Text-to-Speech

HSL hue values are used for color matching because they align better with how humans perceive color families (red, blue, green, etc.) and remain consistent across different lighting conditions.

Architecture

The project follows a feature-based architecture that decouples business logic from native rendering:

src/
├── api/             # Network clients (Axios/Fetch) and PokéAPI definitions
├── assets/          # Static resources (Audio, Sprites, Fonts)
├── components/      # Atomic UI (PokeCard, CameraOverlay, CustomButton)
├── features/        # Domain modules
│   ├── pokedex/     # List and filter logic
│   └── scanner/     # TensorFlow, Frame Processors, Color logic
├── hooks/           # Service layer (usePokedex, useColorMatcher, useDexterVoice)
├── navigation/      # Stack & Tab Navigators
├── services/        # Pure logic/Helpers (EuclideanDistance, ColorConverter)
└── store/           # Global state management (Zustand)

Next Steps

Quick Start

Get up and running in minutes

Installation

Detailed setup instructions

---

Developer: Built by @soymatudev - De fan para fans ❤️