Relay — Build Story
INTERNAL PLATFORM · 2026

Relay — from idea to live product.

Relay is a live company contact directory built for a small to medium-sized enterprise. Instead of updating desk phones one by one, staff now make changes once and every handset updates automatically.

ROLE Design, build, deploy
YEAR 2026
SCOPE Web app, live directory feed, cloud hosting
50
Handsets connected
7
Working app screens
~$9/mo
Infrastructure cost
THE PROBLEM

The business uses Yealink desk phones, and every handset needs the same contact directory. Before Relay, staff relied on printed extension lists, which often became outdated and led to different versions being used across the business.

The solution was to create one central source of truth. Staff update the directory in one place, and every phone pulls the latest version automatically.

DESIGN

Designed before a line of code.

The product was fully designed before development began. This meant the screens, themes and interactions were properly thought through early, which made the build stage much smoother.

A lot of care went into making the design consistent. Colours, transparency, spacing and styling were defined clearly from the start, so the finished product stayed close to the original vision.

Contacts DIRECTORY · 24
NAMEEXTDEPARTMENT
AMArjun Mehta
2041 Dispatch
ECEmily Carter
2113 Front desk
JWJames Whitfield
2205 Facilities
AIAnanya Iyer
2018 Accounts
DBDaniel Brooks
2350 Security
The contacts table — frosted glass over ambient colour. Follows the page theme; demo data shown.
BUILD

A lightweight web app, usable early.

Relay was built as a lightweight web app with seven working screens, including contact management, import and export, and an audit log. The app was made usable early on, before the live cloud setup was added later.

This made development more flexible and reduced friction during the build. It also meant the product could still run in a local demo mode without needing the full live environment.

LAUNCH

Rolled out in stages.

The rollout happened in stages, moving from source control and hosting through to sign-in, database setup, the phone directory feed and final hardening. Once complete, every update to the main codebase could be deployed automatically.

The most important test was simple: a real Yealink handset had to load the live directory successfully. It did, which proved the system worked end to end.

<YealinkIPPhoneBook>
  <Title>AnantX Directory</Title>
  <Menu Name="AnantX">
    <Unit Name="Arjun Mehta" Phone1="2041"/>
    <Unit Name="Emily Carter" Phone1="2113"/>
    <Unit Name="James Whitfield" Phone1="2205"/>
    <Unit Name="Ananya Iyer" Phone1="2018"/>
    <Unit Name="Daniel Brooks" Phone1="2350"/>
  </Menu>
</YealinkIPPhoneBook>
The published feed at /api/phonebook.xml — one endpoint every handset reads on its own. Follows the page theme.
SECURITY AND IMPROVEMENTS

Locked down to invited admins.

Access was tightened so only invited admins could manage the directory. The product also gained a custom domain, secure sign-out, and user settings that follow each admin across devices.

A few lessons stood out during the build. Some platform features required a paid tier, sign-in needed extra configuration to work properly, and one part of the hosting setup handled web addresses differently than expected.

WHAT'S NEXT

The next step is to support multiple contact lists, so different teams or sites can manage their own directories. After that, the same approach could be extended beyond desk phones to mobile devices as well.

Relay is now live, and staff no longer need to re-enter contacts on individual handsets.

STACK
React 18 TypeScript Vite Azure Static Web Apps Azure Functions Cosmos DB Entra ID SSO GitHub Actions Yealink XML
DESIGNED & BUILT BY KRUPAL TANDEL
Open live demo → Get in touch
Ask Cipher about Krupal… AI
Cipher PORTFOLIO ASSISTANT
online
{{ turn.text }}
{{ turn.text }}
{{ turn.note }}
{{ turn.eyebrow }}
EMAILk@tandel.uk
LINKEDINin/krupaltandel
SUGGESTED
Cipher answers from Krupal's portfolio · may be imperfect