NGB

Work
Lately
"–"
BAY 20:32
NYC 23:32
LDN 03:32
BER 04:32
TYO 12:32
AGS customer dashboard showing product categories like Slot Games, Slot Cabinets, Tables, and iGaming, with resources including Knowledge Base and AGS Academy, displayed in a dark-themed interface.

AGS Portal

2024–25
Product Design & Development

My client, AGS, is a company that produces gaming equipment used in casinos worldwide. The marketing materials and other documents related to their machines was previously scattered across several sites like Wordpress and Dropbox which lacked unison and ease of navigation for their customers. Their ask was a customer portal with a managed user database that centralized these resources while keeping them restricted to the general public. I designed and built the application from scratch to meet their feature requests.

My solution leverages the Auth.js library to configure two separate identity providers: Auth0 for customers and Microsoft Entra ID for employees. User accounts are stored in a Postgres database managed by a Prisma ORM to provide an object-oriented programming layer for interacting with the data.

AGS Customer Login page with email input field, purple 'Log in with credentials' button, and options for AGS employee login and new user registration.
AGS Employee Login page with a purple button for logging in using Microsoft Entra ID, displayed on a black background with registration option.

Registration flow

Customers must register for an account and receive AGS approval before gaining access. The registration flow guides the user through a series of forms to collect their personal and company information.

A registration screen with the ags logo (featuring an orange play button triangle next to white letters) on a black background. The page displays "Complete Registration" as a heading, with an email address "nicolai+000@ngb.studio" shown below it. There is an empty text field labeled "Name" and a purple button labeled "Next" at the bottom of the screen.
A verification code screen with the 'ags' logo (featuring an orange play button triangle next to white letters) on a black background. The page displays 'Verify Code' as a heading, followed by 'Input the code sent to your email' as instructions. Below are four empty input boxes for entering the verification code, and a purple button labeled 'Verify' at the bottom of the screen.
A registration screen with the ags logo (featuring an orange play button triangle next to white letters) on a black background. The page displays "Complete Registration" as a heading, with an email address "nicolai+000@ngb.studio" shown below it. There is an empty text field labeled "Name" and a purple button labeled "Next" at the bottom of the screen.
A registration screen with the ags logo (featuring an orange play button triangle next to white letters) on a black background. The page displays "Complete Registration" as a heading, with an email address "nicolai+000@ngb.studio" shown below it. The form contains five required fields marked with asterisks: Company/Casino Name, Business Address, City, State, and Country. All fields are empty text inputs. A purple button labeled "Next" appears at the bottom of the screen.
A registration screen with the ags logo (featuring an orange play button triangle next to white letters) on a black background. The page displays "Complete Registration" as a heading, with an email address "nicolai+000@ngb.studio" shown below it. The form contains fields for Business Phone (required, filled with "000-000-0000"), Phone Extension (filled with "000"), Department (empty), and Position (empty). At the bottom is an unchecked checkbox for "Accept Terms and Conditions (view here)*" with text "I accept the terms and conditions" next to it. A purple button labeled "Next" appears at the bottom of the screen.
A registration screen with the ags logo (featuring an orange play button triangle next to white letters) on a black background. The page displays "Complete Registration" as a heading, with an email address "nicolai+000@ngb.studio" shown below it. The form asks "What are you planning on using the portal for?" with four unchecked checkbox options: "Accessing game assets / info", "Cut sheets / PAR sheets", "Help Center", and "Training". A purple button labeled "Submit" appears at the bottom of the screen.
This image shows a registration confirmation screen with white text on a black background. The heading reads "Registration Submitted" followed by text that states: "You have successfully registered for an account. Please allow up to 48 hours to process. An email confirming your access will be sent to nicolai+test@ngb.studio when approved.

Portal

The portal’s design is simple and lightweight allowing AGS’s graphics and brand identity to stand out. The page layout utilizes a tile-based grid system which is reused in subsequent pages allowing for reusable components in the frontend. This modular approach creates consistency across the platform and allows for navigation items to be easily added, removed, and reordered to the client’s requests.

A webpage displaying a collection of slot games with a black background. At the top is the "AGS" logo and a navigation bar showing the logged in user's name and "Log out" options. The main section is titled "Slot Games" with a search bar and filter options for "Family" and "Class". Below are grid-displayed slot game thumbnails including: Boo Bucks Fangtastic, Open Stud Poker, Fizzy Frenzy, Golden Boat, Dragon Dai Baccarat, Griffin Kingdom, Dollar Shot Diamond, Long Bao Bao, Colossal Stars, Da Da Jin Bao Treasure, Gold Dragon Red, and Jack of Sapphires. Each game card shows the title, subtitle, and class designation (Class 2 or Class 3).
A webpage showing filtered slot game results with a black background. The AGS logo appears in the top-left corner, with "username" and "Log out" options in the top-right. The page is titled "Slot Games" and displays a search field with active filters shown as tags below: "Colossal Diamonds," "Werewolf," "Rise N Spin," "Jackpot Gate," and "Class 2," along with a "Clear all" option. The Family dropdown shows "(4)" and Class dropdown shows "(1)". Three slot games are displayed in a grid: "Colossal Stars," "Cai Shen Magic," and "Colossal Diamonds." Each game card includes the title, subtitle, and class designations (Class 2 and Class 3).

Admin

These views show only for internal AGS employees and allow them to manage their customer user base. Customers that register for an account using an allowlisted email are granted immediate access without requiring explicit AGS admin approval.

A webpage displaying an allowlist management interface with a black background. The AGS logo appears in the top-left corner, with the user's name and "Log out" options in the top-right. The page shows "admin" above the main "Allowlist" heading. There's a purple "Add domain" button in the top-right of the content area. The interface shows "273 domains" and lists several domain names including casino and gaming websites (4baymills.com, 500clubcasino.com, 7cedars.com, 7cedarsresort.com, 7clans.com, 7th-streetcasino.com, abqdowns.com, affinitygaming.com, agco.ca, aglc.ca, aguacaliente.net, airportslots.com). Each domain has an "Active" toggle switch (all enabled) and a trash icon for deletion.
A webpage displaying a registration management interface with a black background. The AGS logo appears in the top-left corner, with "[username]" and "Log out" options in the top-right. The page shows "Admin" above the main "Registrations" heading. The interface is divided into three sections: "Pending", "Approved", and "Denied". Under "Pending" is one registration (with an ID) with an email address and "Deny"/"Approve" buttons. The "Approved" section shows three registrations with different IDs, including an entry with the user's name, all with corresponding email addresses and "Delete account" buttons. The "Denied" section shows "No data found".

Nicolai Garcia Beckmann