Mo.

Building an Admin Dashboard app

Mo/February 27, 2025/6 min read
Building an Admin Dashboard app
The Admin Dashboard UI – A Clean and Functional Interface.

Upgrading the Admin Console: Replacing an Outdated System with a Modern Visitor Management Solution

Introduction

For schools, especially multi-academy trusts, keeping tabs on staff and visitors in real-time is vital—not just for security, but for keeping day-to-day operations running smoothly. The old Admin Console, though, was past its prime: a clunky interface and a poor user experience turned routine tasks into a nightmare for reception staff.

To sort this out, I worked with a backend developer to developer a new Admin Console App—replacing an outdated tool for a performative and intuitive solution. This upgraded app tracks staff and visitors on the fly, lets receptionists handle sign-ins and sign-outs with ease, and slots neatly into fire evacuation processes. In this post, I will explain why the old system had to go, how the new one works, the tech used to build it and my role.

Why We Replaced the Old Admin Console

The previous third-party application had some issues that had a negative impact on efficiency, usability, and security.

  1. Dated Design and a Poor User Experience

    • The interface was a nightmare to navigate—finding anything quickly was a hard for receptionists.
    • Data loading was slow and search tools was a UI/UX disaster.
    • It wasn’t built for modern screens, so it stumbled across different devices.

  2. Bare-Bones Features

    • No option for reception staff to manually clock users in or out if someone forgot.
    • Lost a visitor badge? Tough luck—you’d have to start the whole sign-in process again.
    • Without a central staff list, verifying whether someone was a staff member was difficult.

  3. No Real-Time Insight or Records

    • You couldn’t see who was on-site at a glance—live tracking was nonexistent.
    • Past logs were inaccurate, making it hard to trust the data provided.
    • Printing evacuation reports was slow, dragging out emergency fire drills.

By scrapping the old console, we’ve delivered a performative in-house system that actually helped reception teams and admins.

How the New Admin Dashboard Works

The new Admin Console App is a web-based app that puts receptionists and administrators in the driver’s seat of the visitor management system. Here’s the rundown:

  1. Spotting Who’s Signed In

    • The main screen shows a live tally of all staff and visitors currently on-site.
    • Need to find someone specific? Search, filter, or sort the list.

  2. Handling Sign-Ins and Sign-Outs by Hand

    • If a staff member forgets their RFID tap, reception can log them in manually.
    • Visitors can be clocked in or out too, keeping the records spot-on.
    • Every tweak gets logged automatically for the paper trail.

  3. Reprinting Visitor Badges

    • Badge gone AWOL? Reception can whip up a fresh one on the spot—no need to re-enter details.
    • It still shows the visitor’s name, photo, company, and host info.

  4. Pulling Fire Evacuation Reports

    • At any time, you can print out a list of everyone signed in for fire drills.
    • Admins can tick people off as accounted for during evacuations.

  5. Checking the Staff Directory

    • A full staff list is built in—handy for ID checks.
    • Search by name, department, or role without breaking a sweat.

  6. Tracking Sign-In/Out History

    • The console keeps a record of every entry and exit.
    • Filter by date, name, or type (staff or visitor) to drill down.
    • Timestamps show exactly when someone came or went.

The Tech Behind It

We’ve kitted out the Admin Console with a modern tech stack to keep it fast, secure, and slick with data.

Tech Line-Up:

  • Frontend: React.js (for the web-based dashboard)
  • Backend: C# (.NET)
  • Database: MySQL
  • CI/CD & Project Management: Azure DevOps

Key Features:

  1. React.js Frontend (UI & UX Overhaul)

    • Responsive design that works a treat on any device.
    • Fast search and filtering to pinpoint records in seconds.
    • Live updates keep the signed-in list up to date.

  2. C# Backend and API Work

    • Secure RESTful APIs handle sign-ins, log pulls, and badge printing.
    • MySQL integration means data is stored and fetched in a flash.
    • Access is locked down to authorised users only.

  3. Hardware Tie-Ins

    • Thermal Printer: Prints out replacement visitor badges on demand.

  4. Azure DevOps for CI/CD & Deployment

    • Automated pipelines keep updates rolling out smoothly.
    • Version control and issue tracking keep the whole show on track.

My Role as a Front-End Developer

As the Front-End Developer on this project, I was responsible for taking the UI designs and developing it into a functional application.

  • Design Implementation: I collaborated with a designer to translate the UI/UX concepts into functional, interactive features. This involved crafting layouts, ensuring responsiveness across devices, and refining user interactions.

  • React.js Development: I built the entire frontend using React.js to ensure a dynamic, fast, and efficient interface. My responsibilities included managing the component architecture, implementing state management, and ensuring real-time updates for the signed-in list and other key features.

  • Performance Optimisation: I worked on optimising the performance of the dashboard by utilising techniques like lazy loading and efficient state updates to ensure a smooth experience even with large volumes of data.

  • Collaborating on API Integration: I worked closely with the backend team to integrate and consume RESTful APIs, ensuring data was displayed accurately and efficiently in the app, and that user actions, like sign-ins and badge printing, were seamlessly executed.

  • Ensuring Cross-Device Compatibility: Since the Admin Console had to work across various devices, I took care to make sure the dashboard was fully responsive, ensuring a consistent and high-quality experience on desktops, tablets, and mobile devices.

Results & Impact

Switching from the old Admin Console to this custom solution that I helped to develop has brought major improvements in efficiency, usability, and security.

  1. Improved Reception Workflows

    • Sign-ins and sign-outs happen in no time.
    • Live search and filters make tracking down people a breeze.

  2. Tighter Security & Accountability

    • Every action is recorded, creating a clear record.
    • Any changes made manually are tracked, keeping the data accurate.

  3. Better Fire Safety Prep

    • Instant evacuation lists speed up roll calls when it counts.
    • Real-time updates replace the slow process of outdated paper records.

Conclusion

The new Admin Console App has completely changed how schools manage visitors, replacing the old system with a fast, easy-to-use solution. With features like live tracking, manual overrides, badge reprints, and evacuation reports, I helped to:

  • Get rid of the old system’s hold-ups.
  • Make security and tracking clearer for every sign-in and sign-out.
  • Give receptionists and admins an easier, better tool to use.