Skip to main content

​
Quickstart Guide

Get Crafter LoL up and running on your local machine in just a few minutes. This guide will walk you through cloning the repository, setting up the backend, and launching the frontend.

​
Prerequisites

Before you begin, make sure you have the following installed:

Java 17+

Required for running the Spring Boot backend

Maven 3.6+

Build tool for the Java backend

Node.js 16+

Required for the React frontend
You can verify your installations by running java -version, mvn -version, and node -version in your terminal.

​
Installation Steps

1

Clone the repository

Start by cloning the Crafter LoL repository to your local machine.
git clone https://github.com/Jordavid/Craffter_lol.git
cd Craffter_lol
The repository contains two main directories:
  • Back/crafter - Spring Boot backend
  • Front/Crafter_League_of_Legends - React frontend
2

Set up and start the backend

Navigate to the backend directory and start the Spring Boot server.
cd Back/crafter
mvn spring-boot:run
The backend will:
  • Start on http://localhost:5000
  • Fetch League of Legends item data from the Data Dragon API
  • Cache item data for fast responses
  • Expose REST endpoints at /api/game/*
You should see output similar to this:
INFO  Fetching items from Data Dragon API - Version: 16.3.1, Language: es_MX
INFO  Successfully fetched and cached 200 items
INFO  Found 150 craftable items out of 200 total items
INFO  Tomcat started on port(s): 5000 (http)
INFO  Started CrafterApplication in 3.456 seconds
The backend requires internet access to fetch item data from the Riot Games Data Dragon API on first startup.
3

Launch the frontend

In a new terminal window, navigate to the frontend directory and start the React app.
cd Front/Crafter_League_of_Legends
npm install
npm run dev
The frontend will:
  • Install all dependencies (React, Axios, Framer Motion, etc.)
  • Start the Vite dev server
  • Open your browser automatically to http://localhost:5173
If your browser doesn’t open automatically, check the terminal output for the exact URL and port number.
4

Start playing!

Once both servers are running, you can start playing:
  1. The game will load and display a random craftable item in the center
  2. Select the correct component items from the options around it
  3. Click the submit button to check your answer
  4. Earn points for correct answers and track your score!
Start with Easy difficulty to learn the game mechanics, then challenge yourself with Medium or Hard modes.

​
Configuration Options

​
Backend Configuration

The backend uses default settings that work out of the box. If you need to customize the configuration, edit Back/crafter/src/main/resources/application.properties: 
# Data Dragon API Configuration
ddragon.version=16.3.1
ddragon.language=es_MX
ddragon.base.url=https://ddragon.leagueoflegends.com

# Server Port
server.port=5000

# Cache Configuration
spring.cache.type=caffeine
spring.cache.caffeine.spec=expireAfterWrite=1h,maximumSize=500

​
Frontend Configuration

The frontend connects to the backend API. If you changed the backend port, update the frontend configuration: 
VITE_API_URL=http://localhost:5000/api
Create this .env file in Front/Crafter_League_of_Legends/ if it doesn’t exist.

​
Verification

After completing the setup, verify everything is working:
Test the backend API by fetching a random question:
curl http://localhost:5000/api/game/question?difficulty=MEDIUM
You should receive a JSON response with a target item and component options.
Open the browser console (F12) and check for any errors. You should see successful API calls to the backend:
GET http://localhost:5000/api/game/question?difficulty=MEDIUM 200 OK

​
Troubleshooting

If port 5000 is already in use, you can change it:
  1. Edit application.properties and set server.port=8081
  2. Update the frontend .env file: VITE_API_URL=http://localhost:8081/api
  3. Restart both servers
The backend includes CORS configuration for http://localhost:5173. If your frontend runs on a different port:
  1. Edit Back/crafter/src/main/java/.../config/CorsConfig.java
  2. Add your frontend URL to the allowedOrigins list
  3. Restart the backend
If the backend can’t fetch Data Dragon data:
  • Check your internet connection
  • Verify the Data Dragon API is accessible: https://ddragon.leagueoflegends.com/
  • Try updating the ddragon.version in application.properties to a recent patch
If the frontend can’t reach the backend:
  1. Verify the backend is running: curl http://localhost:5000/api/game/question
  2. Check the frontend console for CORS or network errors
  3. Ensure the VITE_API_URL in your .env matches the backend URL
  4. Restart the frontend dev server after changing .env files

​
Next Steps

Now that you have Crafter LoL running, explore these guides to learn more:

How to Play

Learn the gameplay mechanics and controls

Difficulty Levels

Understand the different challenge modes

Development Setup

Set up a full development environment

API Reference

Explore the backend API endpoints
Join the community on GitHub to report issues, suggest features, or contribute to the project!

Build docs developers (and LLMs) love

Get started for freeTalk to us