Visit LEDU token page

How to Build a Tournament Web App in React.JS

How to Build a Tournament Web App in React.JS

  • English
  • Programming
  • React.jsReact.js
  • (4493)
  • Project length: 7h 19m

In this project we are going to build a web based system that is used by tournament and league organizers to manage their events. All the work involved in running a tournament like adding teams, creating groups, managing matches, will be done through this app.



This tutorial will cover all the details (resources, tools, languages etc) that are necessary to build a Tournament Web App. We will be using the ReactJS framework along with Redux later on.

What are the requirements?

  • Basic knowledge in JSON

What is the target audience?

  • Those who want to build apps with the React.JS framework
  • Those that want to build a functional web app

When are the streaming sessions (streaming schedule)?

Weekly Mondays, Tuesdays, Thursdays @ 10:00 AM EST!

Project Outline

Session 1: Setting up the Environment and Basic Routing config

  • Setting up initial project structure
  • Installing React-Router
  • Installing React-Redux
  • Create an initial home page

Session 2: Implementing Teams and Match objects.

  • Create team object
  • Create match object w/ necessary functions

Session 3: CRUD for Teams and Match Manager system

  • Forms for creating teams
  • Add ability to change match score
  • If the match has ended, be able to flag it as completed

Session 4: Tournament Generator

  • Implement the functionality that generates a tournament
  • Be able to start a tournament with a selection of teams
  • New set of matches generated from resulting pool of winners of round

Session 5: Tournament Viewer

  • Be able to filter between ongoing and finished matches
  • Be able to click a match to view its progress
  • When final match completed. The tournament has officially ended.


Average rating

4(4493 Reviews)