Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/soymatudev/Pokedex-Fleek/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

PokéDex Fleek integrates with PokéAPI v2 to fetch comprehensive Pokémon data including sprites, stats, types, and multilingual flavor text descriptions. The integration follows a parallel fetching pattern to optimize loading times.

​
Base URL

https://pokeapi.co/api/v2/

​
Endpoints Used

​
GET /api/v2/pokemon/

Retrieves basic Pokémon data including sprites, types, weight, height, and cry sounds.
​
id
number | string
required
Pokémon ID or name (e.g., 25 or "pikachu")
​
name
string
Pokémon name in lowercase
​
sprites
object
Collection of Pokémon sprite URLs
​
sprites.front_default
string
Default front-facing sprite (PNG format, pixel art)
​
sprites.other.dream_world.front_default
string
High-quality SVG sprite (dream world artwork)
​
types
array
Array of type information
​
types[].type.name
string
Type name (e.g., “electric”, “water”, “fire”)
​
weight
number
Pokémon weight in hectograms (divide by 10 for kilograms)
​
height
number
Pokémon height in decimetres (divide by 10 for meters)
​
cries
object
Audio URLs for Pokémon cries
​
cries.latest
string
Latest version of the cry sound
​
cries.legacy
string
Legacy/classic version of the cry sound

​
GET /api/v2/pokemon-species/

Retrieves species-specific data including flavor text entries in multiple languages.
​
id
number | string
required
Pokémon species ID or name
​
flavor_text_entries
array
Array of Pokédex descriptions in various languages
​
flavor_text_entries[].flavor_text
string
The actual Pokédex entry text (may contain \f form feed characters that need cleaning)
​
flavor_text_entries[].language.name
string
Language code (e.g., “en”, “es”, “ja”)

​
Data Fetching Pattern

The app uses Promise.all() to fetch both basic data and species data in parallel, reducing total load time.

​
Implementation from DetailsScreen.js

const fetchFullData = async () => {
    try {
        pokemonId = parseInt(pokemonId);
        const [resData, resSpecies] = await Promise.all([
            fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`),
            fetch(`https://pokeapi.co/api/v2/pokemon-species/${pokemonId}`)
        ]);

        const data = await resData.json();
        const species = await resSpecies.json();

        const entry = species.flavor_text_entries.find(e => e.language.name === 'es');
        const description = entry ? entry.flavor_text.replace(/\f/g, ' ') : "Datos no encontrados.";

        const processedData = {
            name: data.name.toUpperCase(),
            cries: data.cries.legacy, //latest legacy
            image: data.sprites.front_default,
            type: data.types[0].type.name,
            weight: data.weight / 10,
            height: data.height / 10,
            description: description
        }

        setPokemon(processedData);
        setLoading(false);
        await playSound(processedData.cries);
        setTimeout(() => {
            hablarEntrada(description, data.name);
        }, 800);

    } catch (error) {
        console.error("Error en la conexión con la PokéAPI", error);
    }
};

​
Sprite URLs and Types

PokéAPI provides multiple sprite versions:
Sprite TypePathFormatUse Case
Default Frontsprites.front_defaultPNGPrimary display, pixel art style
Dream Worldsprites.other.dream_world.front_defaultSVGHigh-quality vector graphics
Official Artworksprites.other['official-artwork'].front_defaultPNGOfficial promotional art

​
Example Usage

// Using pixel art sprite (288x288px for proper pixelated rendering)
<Image
    source={{ uri: data.sprites.front_default }}
    style={{
        width: 288,
        height: 288,
        imageRendering: 'pixelated'
    }}
    resizeMode="contain"
/>

​
Flavor Text Extraction

The app extracts Spanish (es) flavor text from the species data. The text requires cleaning to remove form feed characters (\f).

​
Spanish Flavor Text Pattern

const entry = species.flavor_text_entries.find(e => e.language.name === 'es');
const description = entry 
    ? entry.flavor_text.replace(/\f/g, ' ') 
    : "Datos no encontrados.";

​
Available Languages

Common language codes in flavor_text_entries:
  • en - English
  • es - Spanish (Español)
  • ja - Japanese
  • fr - French
  • de - German
  • it - Italian
  • ko - Korean

​
Unit Conversions

PokéAPI returns measurements in specific units that need conversion: 
// Weight: hectograms → kilograms
const weightKg = data.weight / 10;
// Example: 60 → 6.0 kg

// Height: decimetres → meters  
const heightM = data.height / 10;
// Example: 4 → 0.4 m

​
Error Handling

The integration includes basic error handling for network failures: 
try {
    const [resData, resSpecies] = await Promise.all([
        fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`),
        fetch(`https://pokeapi.co/api/v2/pokemon-species/${pokemonId}`)
    ]);
    
    const data = await resData.json();
    const species = await resSpecies.json();
    
    // Process data...
    
} catch (error) {
    console.error("Error en la conexión con la PokéAPI", error);
    // Consider: Show error state to user, retry mechanism
}
  • Response validation: Check HTTP status codes before parsing JSON
  • User feedback: Display error messages in the UI instead of just console logging
  • Retry logic: Implement exponential backoff for failed requests
  • Caching: Store fetched data locally to reduce API calls
// Enhanced error handling example
if (!resData.ok || !resSpecies.ok) {
    throw new Error(`HTTP error! status: ${resData.status}`);
}

​
Complete Fetch Example

import { useEffect, useState } from 'react';

export const usePokemonData = (pokemonId) => {
    const [pokemon, setPokemon] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                setLoading(true);
                const id = parseInt(pokemonId);
                
                const [resData, resSpecies] = await Promise.all([
                    fetch(`https://pokeapi.co/api/v2/pokemon/${id}`),
                    fetch(`https://pokeapi.co/api/v2/pokemon-species/${id}`)
                ]);

                if (!resData.ok || !resSpecies.ok) {
                    throw new Error('Failed to fetch Pokémon data');
                }

                const data = await resData.json();
                const species = await resSpecies.json();

                // Extract Spanish description
                const entry = species.flavor_text_entries.find(
                    e => e.language.name === 'es'
                );
                const description = entry 
                    ? entry.flavor_text.replace(/\f/g, ' ') 
                    : "Datos no encontrados.";

                // Process and structure the data
                const processed = {
                    name: data.name.toUpperCase(),
                    image: data.sprites.front_default,
                    type: data.types[0].type.name,
                    weight: data.weight / 10,  // hectograms to kg
                    height: data.height / 10,  // decimetres to m
                    cry: data.cries.legacy,
                    description: description
                };

                setPokemon(processed);
            } catch (err) {
                setError(err.message);
                console.error('Error fetching Pokémon data:', err);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [pokemonId]);

    return { pokemon, loading, error };
};

​
Rate Limiting

PokéAPI has fair-use limits. Best practices:
  • Cache responses locally
  • Avoid rapid successive requests
  • Use Promise.all() for parallel requests when fetching related data
  • Consider implementing request debouncing for search features

​
Additional Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us