Setup a Project

Setup Next.js Project

In this guide we use React framework - Next.js. Don't worry if you are not familiar with Next.js. We will use it as a boilerplate, there will be nothing in the installed project that can cause you difficulties in further coding.

Open your terminal, cd into the directory you’d like to create the project, and run the following command:

npx create-next-app@latest ./azuro-betting-app

Note! During installation a terminal will prompt you with options to select. You need a very simple configuration for this tutorial

• Would you like to use TypeScript with this project? … No / Yes
• Would you like to use ESLint with this project? … No / Yes
• Would you like to use src/ directory with this project? … No / Yes
• Would you like to use experimental app/ directory with this project? … No / Yes
• What import alias would you like configured? … @/* (press Enter to skip)

You now have a new directory called azuro-betting-app. Let’s cd into it

cd azuro-betting-app

Styling

In this tutorial we will use TailwindCSS (opens in a new tab) to apply CSS styles to UI.

Execute the following commands in the app root directory

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update tailwind.config.js. Add paths to the files that will use Tailwind CSS, add .container styles and breakpoints

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.js",
    "./pages/**/*.js",
  ],
  theme: {
    container: {
      center: true,
      padding: '1rem',
      screens: {
        'sm': '600px',
        'md': '740px',
        'lg': '960px',
        'xl': '1024px',
        '2xl': '1280px',
      },
    },
    extend: {},
  },
  plugins: [],
}

Add the Tailwind CSS directives that Tailwind will use to inject its generated styles to a Global Stylesheet. Also add some styles for the feature usage.

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}
 
@layer components {
  .button {
    @apply py-1.5;
    @apply px-4;
    @apply text-white;
    @apply bg-blue-700;
    @apply rounded-md;
  }
 
  .button[disabled] {
    @apply opacity-50;
    @apply cursor-not-allowed;
  }
}

Packages

Install the packages which will be used during development

npm install @azuro-org/dictionaries @azuro-org/toolkit dayjs

Components and Business Logic

Create two folders for organizing project files: "components" for storing the components that will be created during this tutorial and "hooks" for the business logic.

mkdir components hooks

Clean Up

Clean up the application to prepare for the next steps.

1. Remove styles/Home.module.css
2. Remove pages/api folder

Great job! You have completed the setup and are now ready to dive into the exciting world of developing a betting website on the Azuro protocol. Get creative, explore the possibilities, and build amazing!