How to Build a Tournament Web App in React.JS
- 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!
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.