🔴 Pokédex

My first React Native mobile app — a Pokédex that lets you browse and explore the original 150 Pokémon, built with Expo and powered by the free PokéAPI.

---

📱 Features

🏠 Home Screen

• Displays a 2-column grid of the first 150 Pokémon
• Each card is color-coded by type (e.g. 🟢 Grass, 🔵 Water, 🔴 Fire)
• Shows the Pokémon's name, primary type, and front sprite
• Tapping a card navigates to the Details page

🔍 Details Page

• Full Pokémon profile including:
  • Name & primary type with matching type background color
  • Sprite gallery — front, back, shiny variants (scrollable horizontally)
  • Gender toggle — switch between male/female sprites
  • Base stats (HP, Attack, Defense, etc.)
  • Abilities with hidden ability labels
  • Held items with version rarity details
  • Base experience, height & weight

---

🛠️ Tech Stack

Technology	Version	Purpose
React Native	0.81.5	Core mobile framework
Expo	~54.0	Development platform & tooling
Expo Router	~6.0	File-based navigation
NativeWind	^5.0.0-preview	Tailwind CSS for React Native
Tailwind CSS	^4.3	Utility-first styling
clsx	^2.1	Conditional class name merging
PokéAPI	v2	Open-source Pokémon data
TypeScript	~5.9	Type safety

---

📁 Project Structure

pokedex/
├── app/
│   ├── _layout.tsx       # Root stack navigator (Pokédex + Details screens)
│   ├── index.tsx         # Home screen — Pokémon grid list
│   ├── details.tsx       # Details screen — full Pokémon profile
│   └── global.css        # NativeWind / Tailwind global styles
├── lib/
│   └── utils.tsx         # Helpers: getTypeColor(), capitalizeTxt(), getPokemonImage()
├── type.d.ts             # Global TypeScript interfaces (PokemonDetail, Sprites, etc.)
├── app.json              # Expo app configuration
└── package.json

---

🌐 API

This app fetches data from the free, open-source PokéAPI — no API key required.

Endpoint	Usage
GET /api/v2/pokemon/?limit=150	Fetch list of first 150 Pokémon
GET /api/v2/pokemon/{name}	Fetch detailed data for a single Pokémon

Each list item is enriched by fetching its individual detail URL to retrieve sprites and types.

---

🚀 Getting Started

Prerequisites

• Node.js (v18+)
• Expo Go app on your phone, or an Android/iOS emulator

Installation

# 1. Clone the repo
git clone https://github.com/RHEM-01/pokedex.git
cd pokedex

# 2. Install dependencies
npm install

# 3. Start the dev server
npx expo start

Running the app

After running npx expo start, you can open the app in:

• 📱 Expo Go — scan the QR code with your phone
• 🤖 Android emulator — press a
• 🍎 iOS simulator — press i
• 🌐 Web browser — press w

---

🏗️ Architecture Notes

• File-based routing via Expo Router — app/index.tsx is the home screen, app/details.tsx is the details screen
• Type-based card theming — getTypeColor() in lib/utils.tsx maps each Pokémon type to a Tailwind background class, composed with clsx for clean conditional styling
• Gender-aware sprites — the details screen toggles between male/female sprite sets using local state
• Global TypeScript types — all PokéAPI response shapes are declared in type.d.ts and available globally without importing
• New Architecture enabled — newArchEnabled: true in app.json (Fabric renderer + JSI)

---

📦 Key Dependencies

{
  "nativewind": "^5.0.0-preview.4",
  "clsx": "^2.1.1",
  "expo-router": "~6.0.23",
  "expo-image": "~3.0.11",
  "react-native-reanimated": "~4.1.1"
}

---

🙌 Acknowledgements

• PokéAPI — free, open-source Pokémon REST API
• Expo — making React Native development smooth
• NativeWind — bringing Tailwind to mobile

---

Built as my first React Native project — learning Expo, file-based routing, and mobile styling with NativeWind. 🎉