Bracket Builder

Bracket Builder is a web application for quickly creating, saving and sharing tournament brackets. The goal of the project was to build a simple tool that can be used for small tournaments with friends, school events, sports competitions, esports matches or other events. Instead of creating a bracket manually, users can set up their tournament digitally and share it with others through a link.

In small tournaments, it is easy to lose track of participants, scores and upcoming matches. Paper brackets can get messy, and improvised notes are often not practical, especially when you are outside or on the go. Bracket Builder solves this problem by offering a digital bracket that is easy to use on a computer or phone. This makes it useful for situations like playing in a park, at a swimming pool or at a casual event with friends. The application keeps the structure clear and makes it simple to update results during the tournament.

The application starts with a create page where the user defines the basic settings of the bracket. Currently, the user can choose between different participant counts and match formats such as Best of 1, Best of 3 and Best of 5. On the next page, the matches are displayed in a bracket layout. The user enters player names and can update the scores with plus and minus buttons. When a player wins a match, the winner is automatically moved into the next round. After finishing the bracket, the user can save it. Saved brackets can be opened through a view page, edited by the creator and shared with others through a copy-link button.

The design of Bracket Builder focuses on simplicity and clarity. I used rounded cards, clear spacing, soft shadows and a strong primary color for important actions such as creating, saving or editing a bracket. The interface is built around reusable components like the header, footer, cards, buttons and form elements. The bracket layout is displayed in columns, so users can easily follow the tournament from the first round to the final.

Bracket Builder was built with PHP, PostgreSQL, HTML, CSS and JavaScript. PHP is used for server-side logic, form processing and database communication. PostgreSQL stores users, brackets and matches. HTML provides the structure of the pages, while CSS is responsible for the visual layout, responsive design and reusable components. JavaScript handles the interactive parts of the application, such as updating scores, detecting winners, moving them into the next match and copying share links.