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
  • (1041)
  • 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.

Overview

Introduction

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?

  • HTML/CSS/JS
  • 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.

Reviews

Average rating

4(1041 Reviews)