{"id":18515322,"url":"https://github.com/wafflepie/brakket","last_synced_at":"2025-04-22T18:45:29.555Z","repository":{"id":115199523,"uuid":"126620265","full_name":"wafflepie/brakket","owner":"wafflepie","description":"Vue.js application for tournament brackets.","archived":false,"fork":false,"pushed_at":"2018-05-17T10:16:20.000Z","size":490,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T17:41:29.518Z","etag":null,"topics":["javascript","mongoose","nodejs","socket-io","vue","vuex"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wafflepie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-24T16:51:22.000Z","updated_at":"2024-08-16T04:06:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"3c662662-2bbd-47c2-9de4-4c80142b43c4","html_url":"https://github.com/wafflepie/brakket","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wafflepie%2Fbrakket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wafflepie%2Fbrakket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wafflepie%2Fbrakket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wafflepie%2Fbrakket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wafflepie","download_url":"https://codeload.github.com/wafflepie/brakket/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250300772,"owners_count":21408003,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","mongoose","nodejs","socket-io","vue","vuex"],"created_at":"2024-11-06T15:47:19.791Z","updated_at":"2025-04-22T18:45:29.529Z","avatar_url":"https://github.com/wafflepie.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# brakket\n\nOffline-first web application for creating and managing tournament brackets.\n\n* Socket.IO is used for client-server communication.\n* Vue.js is used to present the data in the browser.\n* Mongoose is used to persist the data to a MongoDB database.\n\nThe application is configured and ready to be deployed to Heroku alongside an mLab database.\n\n## Core concepts\n\nAs of yet, the application supports only classic single-elimination tournaments.\n\n### Participants\n\nThe number of participants is up to you, it does not have to be a power of two. The empty slots are filled with a placeholder and the home side always advances to the next round. You can choose to name the participants or just keep them numbered.\n\n### Sharing tournaments\n\nThe application doesn't require any signing up or logging in. If you want to share a tournament with somebody, just send them a URL.\n\nRemember not to send YOUR URL to anyone, as that would give them your permissions to the tournament! Instead, you can click the Share icon and proceed from there.\n\nYou can see the changes to the results in real time, similar to e.g. Google Docs. Open the same tournament in two windows, place them next to each other and see for yourself!\n\n## Source structure\n\nThe source code of the application can essentially be divided into three parts.\n\n### Server-side code (`src/server`)\n\nThe `index.js` file is the entry point for the entire back end. We establish a connection to the database and start both the HTTP server and the Socket.IO server here.\n\nThe `src/server/models` folder contains our Mongoose schemas and models.\n\n`src/server/routes` handles all of our server-side business logic.\n\n* `routes.js` uses a common Node.js dependency injection pattern (exporting a function). All the application event types (routes) are handled here, akin to a controller in a classic MVC model.\n\n* `utils.js` contains some common logic used throughout the route handlers.\n\n### Client-side code (`src/client`)\n\nAs with the server-side code, the `index.js` file is the entry point of the application.\n\nThe `src/client/components`, `src/client/containers` and `src/client/pages` folders contain the Vue.js components used throughout the application. Containers and views may access the Vuex store, components may not.\n\n`src/client/domain` contains the domain logic for handling the participants, seeds and results of tournaments.\n\nThe contents of `src/client/store` are responsible for interaction with the Vuex store (alongside `src/client/selectors`, which contains functions for accessing computed data).\n\nOther folders are not as important and you can probably figure them out yourself.\n\n### Common code (`src/common`)\n\nNot much happening over here, except for some constants that are shared with both the server-side and the client-side code.\n\n## Local development\n\n### Prerequisites\n\nMake sure that you have these tools installed and added to your `PATH`.\n\n* [MongoDB](https://www.mongodb.com/download-center?jmp=nav#community)\n* [Node.js](https://nodejs.org/en/) v8.9.4 or higher (but not v10)\n* [Yarn](https://yarnpkg.com/en/docs/install)\n\nYou can check that everything is properly set up by typing these commands into your terminal:\n\n```sh\nnode -v\nyarn -v\nmongod --version\n```\n\nIf all of these commands print the version, you're all set! If not, you may have forgotten to add them to `PATH`.\n\n### Installing application dependencies\n\nOpen a new terminal instance in the root directory of this application (which contains the `package.json` file) and run the `yarn` command.\n\n### Starting the application\n\nYou need to have a database running to start the application. You can start the database using the `yarn mongo` command.\n\nNow you need to run `yarn start` alongside the database. This can be achieved by opening a second terminal instance and running the command in it. If you've done everything correctly, a browser tab pointing to `localhost:8080` will open shortly.\n\n### Building the application for deployment\n\nThe client-side code can be built for deployment using the `yarn build` command. The server-side code is meant to be deployed as-is and will handle the built assets without any further interaction.\n\n## Domain type reference\n\nAlthough this project does not use Flow, this type reference can help you understand the domain model structure a bit better.\n\n```js\ntype Participants = Array\u003cstring\u003e\ntype Seed = Array\u003c{ home: number, away: ?number }\u003e\ntype Side = { score: ?number }\n\ntype Match = {\n  home: Side,\n  away: Side,\n  roundIndex: number,\n  matchIndex: number,\n}\n\ntype Round = Array\u003cMatch\u003e\ntype Results = Array\u003cRound\u003e\n\n// These types are used in selectors only.\ntype ExtendedSide = Side \u0026 { name: ?string }\n\ntype ExtendedMatch = {\n  home: ExtendedSide,\n  away: ExtendedSide,\n  roundIndex: number,\n  matchIndex: number,\n  winner: \"home\" | \"away\",\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwafflepie%2Fbrakket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwafflepie%2Fbrakket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwafflepie%2Fbrakket/lists"}