강의

멘토링

커뮤니티

Programming

/

Web Development

Creating a League of Legends Match History Search Site with React.js + Node.js

This course is a practical, hands-on course where you will build your own 'League of Legends Match History Search Site' using React.js and Node.js, utilizing the Riot Games API. Students will naturally learn through hands-on practice, following the project step-by-step, covering everything from basic API usage, integration of frontend (React.js) and backend (Node.js, Express.js), to match history data visualization, and implementing op.gg-style UI. Rather than focusing on complex theories, this course is code-centric, allowing you to quickly experience results by 'building it yourself' through hands-on practice.

(5.0) 5 reviews

53 learners

Level Beginner

Course period Unlimited

  • neneee
실습 중심
실습 중심
프로젝트
프로젝트
포트폴리오
포트폴리오
React
React
Node.js
Node.js
api
api
Portfolio
Portfolio
Clone Coding
Clone Coding
실습 중심
실습 중심
프로젝트
프로젝트
포트폴리오
포트폴리오
React
React
Node.js
Node.js
api
api
Portfolio
Portfolio
Clone Coding
Clone Coding

What you will gain after the course

  • How to Use Riot Open API

  • Real-time Match History Search UI Development with React.js

  • Node.js & Express.js Backend Proxy Server Setup

  • Frontend-Backend Integration and Real-time Match Record Data Processing

Create your own LoL record search site 💡

In this lecture , we will create a League of Legends record search site that integrates with the Riot Games Open API using Node.js and React.js.
By separating the front-end and back-end, you will understand the REST API structure and practice retrieving actual match data, user authentication, data processing, and screen output through the Riot API.

Learn the entire process required for real-world projects, step by step, including building a backend using Node.js and Express, integrating with the Riot API, and developing a frontend using React.js .
You can directly implement op.gg-style match summary and detailed match screens , and gain practical development experience in API request flow, data processing, and UI configuration.

This course is a code-centric, hands-on course designed to help you naturally learn how to use the Riot API and create web services based on React.js and Node.js without complex theories.
Upon completion of this course , you will be equipped to create your own data search site using the Riot API.

👏 If you take all the lectures!

  • Understanding Proxy Server Architecture

  • How to use OpenAPI


Learn about these things

Building a Proxy Server Using React.js + Node.js 💻

Build a simple proxy server and implement a simple search engine like OP.GG. Learn the structure of API requests and responses and visualize your data.

Match list for full search

Analyzing the official API documentation and understanding the API 📃

Based on the official Riot Games Open API documentation , you will develop the ability to interpret API specifications and apply them to actual services.
Learn step-by-step, from how to read API call flow and specifications to how to utilize real-world data.

Riot Official API

Lecture materials provided 📖

We provide lecture code and configuration files using Notion.

Notion materials

Things to note before taking the course

Practice environment

  • Operating System and Version (OS): Windows 10, Windows 11, macOS

  • Tools used: Visual Studio Code, Postman

  • PC specifications: PC with basic specifications capable of Internet access

Learning Materials

  • Notion Markdown file provided

Player Knowledge and Precautions

  • Prior knowledge of React.js and Node.js is preferred.

  • Sign up for Riot

  • Unauthorized distribution and duplication are prohibited. Learning materials are also copyrighted, and any use other than for personal learning purposes is prohibited.

Recommended for
these people

Who is this course right for?

  • Beginner to intermediate developers who want to enhance their web development skills through hands-on projects utilizing React.js and Node.js

  • For those who want to create their own game match history site, data visualization service, etc., using the Riot Games API.

Need to know before starting?

  • React.js

  • Node.js

Hello
This is

502

Learners

54

Reviews

11

Answers

4.5

Rating

3

Courses

웹 개발을 하다가 게임 개발에 빠져 살고 있는 개발자 입니다!

항상 배우는 마음가짐으로!

Curriculum

All

23 lectures ∙ (2hr 40min)

Published: 
Last updated: 

Reviews

All

5 reviews

5.0

5 reviews

  • cksdyd219677님의 프로필 이미지
    cksdyd219677

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    It's great for quickly building something. After that, you need to study a bit more on your own.

    • hyuk394025809429님의 프로필 이미지
      hyuk394025809429

      Reviews 1

      Average Rating 5.0

      5

      30% enrolled

      • alsrl92956022님의 프로필 이미지
        alsrl92956022

        Reviews 2

        Average Rating 5.0

        5

        30% enrolled

        • ddoyoi님의 프로필 이미지
          ddoyoi

          Reviews 38

          Average Rating 5.0

          5

          100% enrolled

          It's so fun

          • kimszin16481님의 프로필 이미지
            kimszin16481

            Reviews 2

            Average Rating 5.0

            5

            30% enrolled

            Limited time deal ends in 17:53:04

            $11,550.00

            30%

            $13.20

            neneee's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!