Mo.

Building a Sign-in app

Mo/February 26, 2025/7 min read
Building a Sign-in app
Sign-in Made Simple – A Look at the Kiosk Interface.

Replacing the Old Sign-in System: How I Helped Develop a Bespoke Sign-in App for Schools

Introduction

Getting staff and visitors onto school premises quickly, securely, and without a fuss is no small task. The old Sign-in App schools relied on was showing its age—clunky, slow, and poorly suited to today’s security and compliance demands.

To tackle this, I worked with a backend developer to build a custom Sign-in App from the ground up, ditching the outdated system for something faster, more adaptable, and properly integrated. It now sits as a wall-mounted touchscreen kiosk in the main reception of two schools, working seamlessly with RFID readers, barcode scanners, and badge printers to make check-ins smooth and reliable.

In this post, I will explain why the old system had to go, how the new app functions, and the tech that powers it.

Why We Ditched the Old Sign-in App

The previous app wasn’t just inconvenient—it was a bottleneck. Here’s why we decided it was time for a change:

  1. Slow Sign-ins

    • Staff faced a tedious multi-step process to prove who they were.
    • Visitors had to manually type in far too many details, leading to queues snaking through reception.
    • The interface wasn’t built for touchscreens, so every tap felt awkward and unintuitive.

  2. No Support for Modern Hardware

    • RFID card readers were present but unreliable, sometimes failing to register staff sign-ins properly.
    • No barcode scanning for visitor sign-outs, leaving gaps in the logs.
    • Real-time tracking was nonexistent, so knowing who was actually on-site was anyone’s guess.

  3. Lagging Performance and Zero Flexibility

    • The system chugged along when handling sign-ins, grinding reception to a halt.
    • Customising visitor processes to meet safeguarding rules wasn’t an option.
    • Schools were stuck waiting on external support for updates, with fixes arriving at a snail’s pace.

  4. Security and Compliance Shortfalls

    • No way to enforce safeguarding agreements upfront.
    • Bare-bones reporting made auditing visitor data a headache.
    • The design was stuck in the past, falling short of modern security expectations.

By building a new app from scratch, we’ve swept these problems aside, delivering a check-in experience that’s quick, secure, and fit for purpose.

How the New Sign-in App Operates

The app caters to both staff and visitors with tailored workflows, balancing speed, security, and compliance.

1. Staff Sign-in & Sign-out

Staff have two straightforward options:

  • RFID Card Tap (The Quick Way)
    Tap an ID card on the RFID reader next to the touchscreen. Identity confirmed, signed in—done. Same goes for signing out.

  • Manual Sign-in (The Backup)
    Forgot your card? No bother. Type the first initial of your first name and surname, pick your name from the list on-screen, and you’re signed in or out depending on your current sign-in status.

2. Visitor Sign-in & Sign-out

Visitors get a more structured process for the purpose of student safeguarding:

  • Visitor Sign-in Steps:

    • Safeguarding Agreement: Read and accept the school’s policy before going further.
    • Details Entry: Input first name, surname, company (if relevant), who they’re visiting, and vehicle reg if they’ve driven.
    • Photo Snap: The kiosk’s camera takes a quick picture for ID purposes.
    • Badge Printing: Out pops a badge with their photo, name, and visit details—worn at all times on-site.

  • Visitor Sign-out:
    Scan the badge at the barcode reader, and the system logs them out, keeping records spot-on.

The Technical Nuts and Bolts

We built the app with a modern setup to ensure it’s fast, secure, and plays nicely with hardware.

  • Tech Stack:

    • Frontend: React Native for Windows (kiosk interface)
    • Backend: C# (.NET)
    • Database: MySQL
    • CI/CD & Management: Azure DevOps

  • Key Features:

    1. React Native for Windows (Frontend)

      • Crafted a slick, touchscreen-optimised UI for the kiosks.
      • Hooked up RFID readers for staff taps and built a guided flow for visitors.
      • Added barcode scanning for speedy sign-outs.

    2. C# Backend and API

      • Developed a robust RESTful API in C# to handle all sign-in requests.
      • Tied it into MySQL for storing logs, visitor info, and staff records.
      • Enabled real-time tracking of who’s on-site.

    3. Hardware Integration

      • RFID Readers: Fast staff check-ins with ID cards.
      • Barcode Scanners: Quick badge scans for visitor exits.
      • Thermal Printers: Instant badge printing with all the essentials.

    4. Azure DevOps

      • Automated deployments with pipelines.
      • Kept code and issues in check for a tidy workflow.

My Role as a Front-End Developer

As the front-end developer on the Sign-in App, I lead the creation of a responsive, touchscreen-optimised kiosk interface using React Native for Windows. My focus was on delivering a seamless check-in experience for staff and visitors, integrating hardware smoothly while keeping the app fast and user-friendly.

What I Did:

  1. Designed a Touchscreen-Optimised UI

    • I built an intuitive interface tailored for wall-mounted kiosks, ensuring staff could tap RFID cards and visitors could breeze through sign-in steps. Clear layouts and big, tappable buttons cut down on frustration and errors.

  2. Integrated Hardware Seamlessly

    • I wired up RFID readers for instant staff check-ins and barcode scanners for visitor sign-outs, making sure the app responded to hardware inputs in real time. I also linked the thermal printers to churn out badges with photos and details on the spot.

  3. Streamlined Visitor Workflow

    • I coded a step-by-step flow—safeguarding agreement, data entry, photo capture—that guides visitors without overwhelming them. Dropdowns for staff selection and quick inputs for vehicle regs kept it snappy.

  4. Collaborated with a Backend Developer

    • I worked with a backend developer to connect the frontend to the RESTful API, ensuring sign-in data hit the MySQL database accurately and live tracking stayed up to date.

Challenges and Wins:

  • Challenge: Getting hardware like RFID readers and printers to play nicely with React Native for Windows. I dug into device APIs and tested relentlessly to iron out quirks.
  • Win: Watching staff tap their cards and visitors scan badges during rollout—proof the app could handle real-world hustle without a hitch.

My efforts on the frontend turned a clunky process into a slick, hardware-driven system schools can trust. It’s been satisfying to see reception queues shrink and security tighten up thanks to a tool I helped shape.

Results & Impact

Swapping out the old app for this custom-built one has made a real difference:

  1. Quicker Check-ins & Sign-outs

    • Staff tap and go—no more hold-ups.
    • Visitors glide through a clear, efficient process.

  2. Tighter Security & Compliance

    • Photos and badges make tracking a breeze.
    • Mandatory safeguarding steps lock in policy adherence.
    • RFID and barcodes keep records bang-on.

  3. Better Emergency Preparedness

    • Live logs show who’s on-site at a glance.
    • Fire marshals can double-check headcounts in a flash.

Wrapping Up

The new Sign-in App has overhauled how the two schools handle staff and visitor access. It’s faster, safer, and far more practical than what came before. With RFID, barcode scanning, and badge printing baked in, we’ve:

  • Cut queues and slashed check-in times.
  • Bolstered security with photos and safeguarding checks.
  • Given schools real-time visibility for safety.

What’s Next?

In future posts, I’ll dig into the Admin Console and Fire Evacuation App—pieces that tie into this system for a full-on Visitor Management setup. Keep an eye out for the technical hurdles, fixes, and lessons we picked up along the way.