Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
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) 4 reviews

43 learners

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

What you will learn!

  • 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

382

Learners

35

Reviews

9

Answers

4.6

Rating

3

Courses

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

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

Curriculum

All

23 lectures ∙ (2hr 40min)

Published: 
Last updated: 

Reviews

All

4 reviews

5.0

4 reviews

  • 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 8

        Average Rating 5.0

        5

        100% enrolled

        It's so fun

        • kimszin16481님의 프로필 이미지
          kimszin16481

          Reviews 2

          Average Rating 5.0

          5

          30% enrolled

          $13.20

          neneee's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!