About Arena

Arena is a gaming platform that makes it easy and fun for office teams to play games together online.

Combining robust backend services with engaging gameplay, Arena delivers a smooth, interactive experience directly in your browser.

• Website & Authentication: Built with Next.js, featuring secure sign-in powered by NextAuth and Azure AD (via Azure Entra OpenID).
• Player Progress & Leaderboards: Managed through PlayFab, tracking stats, achievements, leaderboards, and virtual currencies.
• Game Experience: Developed in Unity WebGL, supporting both single-player and multiplayer game modes.
• Real-Time Multiplayer: Enabled by Photon Fusion 2 for seamless multiplayer interactions.

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, setup the database:

npm run db:init

This will:

• Create a data directory in your project root
• Initialize a SQLite database (games.db) with the required tables:
  • games table for storing game metadata (title, description, thumbnail, etc.)
  • game_categories table for storing game categories
• Set up proper foreign key relationships between tables

Second, setup environment variables:

• Copy .env.template to .env.local
• Update the values in .env.local with your specific configuration

Third, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result. This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Database Management

The application uses SQLite for local data storage. The database file is located at data/games.db.

Database Schema

games table:

• id (INTEGER PRIMARY KEY) - Unique game identifier
• buildName (TEXT NOT NULL) - Internal build name for the game
• title (TEXT NOT NULL) - Display title of the game
• description (TEXT) - Game description
• thumbnail (TEXT) - Path to thumbnail image
• details (TEXT) - Additional game details
• publisher (TEXT) - Game publisher information
• buildType (TEXT DEFAULT 'unity') - Type of build ('unity' or 'html')

game_categories table:

• id (INTEGER PRIMARY KEY AUTOINCREMENT) - Category identifier
• game_id (INTEGER NOT NULL) - Foreign key to games table
• category (TEXT NOT NULL) - Category name

Database Operations

• Initialize database: npx tsx scripts/init-db.ts
• Reset database: Delete data/games.db and run the initialization script again
• View database: Use any SQLite browser tool to inspect data/games.db

Learn More

To learn more about Arena, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Azure - learn about Azure authentication.
• PlayFab Documentation - learn about playfab and playfab API.
• Unity Documentation - learn about unity.
• Fusion 2 Documentation - learn about Fusion2 Multiplayer SDK for Unity.
• React Unity WebGL Documentation - learn about unity and web integration.
• Three Js Documentation - learn about three js.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Screenshots