Tutorial
Getting Started

Tutorial "Build your own betting dApp"

About this tutorial

Our detailed tutorial covers everything you need to build a betting website on the Azuro protocol, from environment setup to frontend development. Whether you're a seasoned developer or just starting out, our tutorial is designed to help you build a fully functional betting website.

Here is an example of the final result: https://github.com/Azuro-protocol/azuro-tutorial-app (opens in a new tab).

🚧

This tutorial assumes you have basic knowledge of JavaScript, React (Next.js), GraphQL and Web3.

Join the Conversation

If you have questions about anything related to Azuro Protocol or this tutorial, you're welcome to ask our community on Discord (opens in a new tab). Use #tech-talks (opens in a new tab) channel.

Tutorial contents

  1. Setup a project

    • Setup a new Next.js application that will serve as the basis for the project.
    • Install all the necessary dependencies required for the project to function correctly.

  2. Prepare users to connect their wallets

    • Implement a Web3 wallets connector that will enable users to connect their wallets to the application.
    • Create a UI button that will allow users to connect their wallets to the application.

  3. Create a page with sport events

    • Configure the GraphQL environment to enable the application to retrieve data regarding sports events.
    • Display a list of sport events that users can select and view details on.

  4. Create a sport event page

    • Create a dedicated page for each sport event that displays the available markets and odds buttons.
    • Implement functionality that automatically updates the odds values to reflect changes in real-time.

  5. Place a first bet

    • Implement smart contracts logic that enables users to place bets on the selected sports event.
    • Create an interface that allows users to place bets by selecting the desired market and entering the desired amount.

  6. Create a bets history page

    • Create a dedicated page that displays a list of all the bets placed by the user.
    • Implement logic that enables users to claim their winnings if they placed a winning bet.
Setup a Project