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 ./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? › No / Yes
• Would you like to use ESLint? › No / Yes
• Would you like to use Tailwind CSS? … No / Yes
• Would you like to use src/ directory? › No / Yes
• Would you like to use App Router? (recommended) › No / Yes
• Would you like to customize the default import alias (@/*)? › No / Yes

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. We’ve already set it up with Next.js boilerplate. Let's make some tweaks.

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

import type { Config } from 'tailwindcss'
 
const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        'md': '960px',
      },
    },
    extend: {},
  },
  plugins: [],
}
 
export default config

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. Update src/app/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
 
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
 
@layer components {
.no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }
 
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
 
  .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/sdk dayjs clsx wagmi viem

Components and Business Logic

Create a folder "components" for storing the components that will be created during this tutorial.

mkdir src/components

To simplify our pages structure in the example app, we will use one page for top events and exact sport. To do it, we need to create folders in src/app according to our urls. Read more about Next.JS routing in their doc (opens in a new tab).

mkdir -p src/app/events/\[sport\]

Then create file page.tsx in the new folder (src/app/events/[sport]/page.tsx):

export default function EventsPage() {
 
  return (
    <></>
  )
}

Next.config

Let's add redirect from root page / to /events/top and add some tweaks to config. Open file next.config.js and paste next code:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer, dev, webpack }) => {
    config.resolve.fallback = {
      fs: false,
      net: false,
      tls: false
    }
 
    config.externals.push(
      'pino-pretty',
      'lokijs',
      'encoding'
    )
 
    return config
  },
  async redirects() {
    return [
      {
        source: '/',
        destination: '/events/top',
        permanent: false
      }
    ]
  }
}
 
module.exports = nextConfig

🚀 Congratulations! Setup complete. Time to innovate in the Azuro protocol universe. Unleash your creativity and construct a standout betting website! 🌟