Front end

Front-end

Below is a crude representation of the Copa front-end. More specifically, each rounded rectangle represents a separate page on the website (URL address). Arrows represents links, i.e. how users may navigate the application. Trapezoids are intended to group some pages into broader categories (drop-down menus in the app).

flowchart LR
    notifs(Notifications)

    home((Home page)) --> tournament[/Tournament\]

    home --> profile(User profile)
    subgraph current/running tournament
    tournament --> parts(Participants)
    tournament --> fixts(Matches)
    tournament --> groups(Group stage)
    tournament --> bracket(Playoff bracket)
    tournament --> rules(Rules)
    fixts --> match(Match page)
    end

    home --> match
    home --> team(Team profile)

    home --> alltime[/All-time\]
    alltime --> hof(Hall of Fame)
    alltime --> allteams(All teams)

    parts --> team
    match --> team
    team <--> profile

    home --> dashboard(Admin dashboard)
    subgraph admin
    dashboard --> wheel(Drawing wheel)
    dashboard --> struct(Bracket creation)
    end

    home --> about(About)

Loading

Notice that the namespaces with a highlighted background (+ 'notifications') are the ones that change from tournament to tournament. The remaining pages are visible to the users at all times.

What is shown on the pages

Most pages have conditional logic to determine what to display at a given timepoint. This is not directly reported in the documentation for all such occurences, but below is an example of the particularly overloaded home page.

flowchart TB
    id00(("Main page"))
    --> t[/Tournament/]
    --> id0{"Is registration date set?"} -->|Yes| id1{"Did registration begin?"}
    id0 -->|No| id3[/"Registration will begin shortly."/] 
    id3 --> END(("end"))

    id1 --> |Yes| id2{"Did registration end?"} 
    id1 --> |No| id3

    id2 -->|Yes| id5{Is tournament over?} 
    id2 --> |No| id4[Offer registration prompt]
    id4 --> END
    id5 --> |Yes| id6[Display winner's tribute] 
    id5 --> |No| id7[Display current tournament state]
    id6 & id7 --> END

Loading

The notation employed is in correspondance with the IB guidelines.

Design style

Copa is designed around 4 vibrant colors:

In addition, you may find an AdobeXD file outlining the page layouts here. Below is a picture to give a rough idea, and of course the most up-to-date resource is the application itself.

Technologies used

The front-end is built with React.js, in Typescript. If you're looking to contribute, it's recommended you familiarize yourself with state management and typing.

Currently, there are no automated tests on the front-end (besides those in production :) ), but this will be a priority for me once I get to it.