⚔️ LoLStats

A React Native mobile app for League of Legends players. Browse all champions, check the current free rotation, track top-ranked players, look up any summoner, and manage your favorite champions — all in one place.

✨ Features

• 🛡️ Champions — Full champion list with portraits, lore, stats, search, and role filtering
• 🔄 Free Rotation — This week's free-to-play champions
• 🏆 Top Rank LoL — Challenger leaderboard (Ranked Solo/Duo)
• ♟️ Top Rank TFT — Top 50 across Challenger, Grandmaster & Master in Teamfight Tactics
• 🔍 Summoner Lookup — Search any player by Riot ID to view their ranked stats
• ⭐ Favorites — Star champions to quickly filter your favorites (persisted locally)
• 🌍 Region Selector — Switch between 16 regions (EUNE, EUW, NA, KR, etc.) with automatic data refetch

📸 Screenshots

Main Menu · Champions · Free Rotation · Rank LoL · Rank TFT · Summoner Lookup · Settings

🛠️ Tech Stack

• ⚛️ React Native 0.84 + TypeScript (strict mode)
• 🐻 Zustand — lightweight state management
• 🧭 React Navigation v7 — native stack navigation
• 💅 styled-components v6 — component styling
• 💾 AsyncStorage — local persistence for favorites and region
• 🎮 Riot Games API + Data Dragon — live game data (version fetched dynamically)

🚀 Getting Started

📋 Prerequisites

• Node.js >= 22
• Xcode (for iOS) or Android Studio (for Android)
• A Riot Games API key

1️⃣ Clone & install

git clone <repo-url>
cd lol-stats
npm install

2️⃣ Configure environment

cp .env.example .env

Edit .env:

RIOT_API_KEY=YOUR_RIOT_API_KEY_HERE
RIOT_REGION=eun1

Change RIOT_REGION to your region — na1, euw1, kr, br1, etc.

3️⃣ iOS setup

bundle config set --local path 'vendor/bundle'
bundle install
cd ios && bundle exec pod install && cd ..
npm run ios

If you see xcode-select: tool 'xcodebuild' requires Xcode, run:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

4️⃣ Android setup

npm run android

💻 Development

Command	Description
npm start	📦 Start Metro bundler
npm run ios	🍎 Build and run on iOS simulator
npm run android	🤖 Build and run on Android
npm test	🧪 Run Jest tests
npm run lint	🔎 Run ESLint
npx tsc --noEmit	✅ TypeScript type check

📁 Project Structure

src/
├── api/          # 🌐 Riot API functions + TypeScript types
├── config/       # ⚙️ Environment config, region mapping (16 regions), DDragon version
├── store/        # 🐻 Zustand store (global state)
├── hooks/        # 🪝 useRiotData (API loading + region refetch), useFavorites (AsyncStorage)
├── navigation/   # 🧭 react-navigation v7 stack + typed route params
├── screens/      # 📱 8 screens (Main, Champions, ChampionDescription, Rotation, RankLoL, RankTFT, SummonerLookup, Settings)
├── components/   # 🧩 ScreenHeader, ScreenBackground, ChampionRow, RankListScreen, RoleFilterBar, LoadingOverlay, EmptyState
└── theme/        # 🎨 Design tokens (colors, fonts, spacing, radius)