Skip to main content

Prerequisites

Before you begin, ensure you have the following installed on your system:

Java 17

Required for Spring Boot backend

Maven 3.9+

Build tool for Java backend

Node.js 18+

Required for React frontend

Backend Setup

1

Clone the Repository

git clone <repository-url>
cd crafter-lol
2

Navigate to Backend Directory

cd source/Back/crafter
3

Install Dependencies

Maven will automatically download dependencies when you build:
mvn clean install
The backend uses Spring Boot 4.0.3 with Java 17. Key dependencies include:
  • Spring Boot Web for REST APIs
  • Spring WebFlux for reactive WebClient
  • Spring Cache with Caffeine for caching
  • Lombok for reduced boilerplate
4

Configure Environment Variables

Create an application.properties file or set environment variables:
PORT=5000
CORS_ORIGINS=http://localhost:5173
See Environment Configuration for full details.
5

Run the Backend

mvn spring-boot:run
The server will start on http://localhost:5000

Frontend Setup

1

Navigate to Frontend Directory

cd source/Front/Crafter_League_of_Legends
2

Install Dependencies

npm install
The frontend uses:
  • React 19.2.0 for UI
  • Vite 7.3.1 for fast development and building
  • Axios 1.13.5 for HTTP requests
  • Framer Motion 12.34.3 for animations
3

Configure Environment Variables

Create a .env file in the frontend root:
VITE_API_URL=http://localhost:5000/api
4

Run the Development Server

npm run dev
The app will be available at http://localhost:5173

Verify Installation

1

Check Backend Health

Open your browser and navigate to:
http://localhost:5000/api/game/question
You should receive a JSON response with game data.
2

Check Frontend

Open http://localhost:5173 in your browser. You should see the game interface load with items from Data Dragon.

Common Issues

If port 5000 or 5173 is already in use:Backend: Change the port in application.properties:
server.port=5000
Frontend: Vite will automatically try the next available port, or you can specify one:
npm run dev -- --port 3000
Ensure the CORS_ORIGINS environment variable in the backend matches your frontend URL:
cors.allowed.origins=http://localhost:5173
Ensure you’re using Java 17:
java -version
If not, install Java 17 and set JAVA_HOME appropriately.
If you’re experiencing timeouts, check your internet connection. The backend fetches item data from:
https://ddragon.leagueoflegends.com

Next Steps

Environment Configuration

Learn about all environment variables and configuration options

Backend Architecture

Understand the Spring Boot backend structure

Frontend Architecture

Explore the React/Vite frontend architecture

Data Dragon Integration

Deep dive into API integration and caching

Build docs developers (and LLMs) love