myLeagueCard is an innovative and user-friendly web application, specifically designed for League of Legends players seeking to showcase their in-game prowess and achievements.
Using Riot's API, myLeagueCard fetches and processes user's game data to present a comprehensive summary of the player's performance, including win rates, losses, and their top 3 champion masteries.
Users can further customize their profile card by selecting their favorite champion as the card's background, and can download the card as a PNG file to share with the community.
-
Clone the repository:
git clone https://github.com/John4E656F/myleaguecard.git
-
Install the dependencies:
yarn install
-
Obtain a developer API key from Riot Games:
Visit the Riot Developer Portal, sign in with your account and register a project to obtain your API key.
-
Configure your Riot API key:
Open the
.env
file in the root directory of your project. Insert your key as the value ofVITE_API
. Be careful not to commit this file to your public repository.VITE_API=your-riot-api-key
-
Start the application:
yarn dev
- Fetch and display user data from Riot's API
- Calculate win rates and other stats
- Display top 3 champion masteries
- Allow users to select their main champion as the card's background
- Downloadable profile card as PNG file
- Vite
- @vitejs/plugin-react
- ESLint
- eslint-plugin-react
- eslint-plugin-react-hooks
- eslint-plugin-react-refresh
Contributions are always welcome! Please read the contribution guidelines first.