Azuro UI Builders Hackathon
This page contains helpful materials to succeed in the tasks. For all information about the hackathon, go to the hack's website (opens in a new tab).
Materials
Tutorials
GraphQL query descriptions (opens in a new tab)
The most helpful entities for this hack’s tasks are Game, Condition, Sport, League, and Country.
- The
Gameentity provides details about game status, participants, and the associated betting conditions. It’s useful for organizing games into categories like live, upcoming, or resolved, and showing detailed game-level data (e.g., participants, turnover). Conditionentity is helful for building markets around individual game conditions and fetching the latest odds. You can use this entity to show bettors the markets available within a game.Country, League, Sportentities help in organizing betting markets and displaying relevant statistics by region, league, or sport. Great for creating custom market views, where users can explore betting opportunities by region or sport. You can also organize games by league or tournament.
Workshop recording: https://www.youtube.com/watch?v=FHuZlybJAw0&ab_channel=AzuroChannel (opens in a new tab)
How to build an app on Azuro (opens in a new tab)
How to fetch and filter games (opens in a new tab)
How to group and sort outcomes & markets (opens in a new tab)
SDK knowledge base (opens in a new tab)
Toolkit knowledge base (opens in a new tab)
Templates
Main Azuro template (opens in a new tab) (follow this template's project structure and tech stack even if you take the orderbook template as a basis for your design)
Orderbook-style template (opens in a new tab)
Task clarifications
Bonus feature: Historical price chart that reflects market dynamics
Fetch historical odds / prices for each pre-match event and display their dynamic change over time in the form of an interactive diagram.
- Transform Azuro’s AMM data into a historical line chart format
- The chart’s x-axis to denote the time period, while the y-axis denotes odds (in form of percentages). Users should be able to select shorter/longer time periods — the chart will zoom in/out (i.e., zooming in to view daily odds and zooming out to view monthly odds).
- Chart should display the exact percentage odds and timestamp when hovering on a specific point
Example:
Motivating your design choices
Design choices in your project shouldn't be merely cosmetic; they should be driven by a clear idea. Therefore, we suggest creating a new UI tailored to a specific end-user persona or use case. Who is your potential user? Is he/she a degen who's unfamiliar with prediction markets and wants to earn fast by betting on the best odds? Then organize the data to display the top events with best odds on your home screen. Is your user a sports betting pro? Then organize the data to display events as a series of championship brackets for separate sports events, etc. Feel free to add new elements, such as a placeholder for promotional banners - you can get inspiration in apps built on Azuro.
Here's how you might approach motivating your design choices by a user persona. For example, you might delineate different demographics based on their age, level of betting expertise, crypto use behavior, location, etc.
User persona map example
Support
https://discord.com/channels/880927413742219374/1280121816987467880 (opens in a new tab)