LoL Champion Hub

A web application built with React and TypeScript that displays League of Legends champion information using Riot's Data Dragon API.

Features

• Champion List: Browse all champions available in League of Legends.
• Champion Details: Click on a champion to view detailed information including:
  • Splash Art & Lore
  • Base Stats & Stats Per Level
  • Abilities (Passive, Q, W, E, R) with descriptions
  • Gameplay Tips (Playing As / Playing Against)
• Search: Quickly find champions by name.
• Role Filtering: Filter the champion list by primary roles (Assassin, Fighter, Mage, Marksman, Support, Tank).
• Language Selection: View champion data in multiple languages supported by Data Dragon (e.g., English, Türkçe, 한국어, Español, Deutsch, Français, etc.).
• Dark Theme: Uses a dark theme for comfortable viewing.

Tech Stack

• Frontend: React, TypeScript
• Build Tool: Vite
• Styling: CSS
• Data Source: Riot Data Dragon API (https://developer.riotgames.com/docs/lol#data-dragon)

Setup and Installation

1. Clone the repository:

   git clone https://github.com/factaxd/lol-hub.git 
   cd lol-hub

2. Install dependencies: Using npm:

   npm install

   or using yarn:

   yarn install

Running the Project

To start the development server:

Using npm:

npm run dev

or using yarn:

yarn dev

This will usually start the application on http://localhost:5173 (or the next available port). Open your browser and navigate to the provided URL.

Building for Production

To create a production-ready build:

Using npm:

npm run build

or using yarn:

yarn build

This will create a dist directory with the optimized static assets.

Deployment

This project is configured for easy deployment on Vercel.

1. Push your code to a Git repository (GitHub, GitLab, Bitbucket).
2. Import your project into Vercel.
3. Vercel should automatically detect the Vite framework, use the build script (npm run build), and deploy the contents of the dist directory.
4. The included vercel.json file explicitly defines these settings for consistency.

https://lol-hub.vercel.app/