Developer Hub
🔮 For applications
Guides & Tutorials
Tutorial: build your dApp
Overview

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. Switch network and mode change

    • Create a UI that will allow users to switch network and change mode in the application.

  4. Create a page with sport events

    • Display a list of sport events that users can select and view details on.
    • Implement functionality that automatically updates the odds values to reflect changes in real-time.

  5. Create a page with game information

    • Create a dedicated page for each sport event that displays the available markets and odds buttons.

  6. Allow users to place bets

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

  7. Create a page for users to view and redeem their bets

    • 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.
Getting StartedStep 1: Setup Your Project