1. Work
  2. Web and product engineering

Self-service portals: member networking and employee HR

Two self-service portals, one for a professional networking group's members and one for a company's employees, sharing role-aware views, admin view-as-user, notifications and live integration with back-office systems.

Problem

Two organisations ran the day-to-day life of their people through email, spreadsheets and word of mouth.

A professional networking group needed one place to track its members, the referrals they pass each other, the introductions they ask for and who attends each meeting, so that each member can see their own activity.

A company wanted its employees to see their own leave balances, timecards and documents, and its supervisors to approve timesheets, without leaving the intranet or copying records out of the back-office system that holds them.

Goal

Give each group one place to sign in and serve themselves: members manage their own networking activity and see it summarised, employees see their own HR information and submit time, supervisors approve in the same place, and administrators can manage roles and see exactly what a given user sees.

My role

Worked on both portals as part of a small team.

Solution

A member networking portal: a single-page React app with client-side routing and a sign-in gate, calling a REST API built on Express and backed by a relational database, with transactional email for invitations and notifications.

An employee self-service portal: a WordPress intranet extended with a custom plugin that connects to the company's back-office HR system, so staff and supervisors work with live records rather than copies.

How it works

Member networking portal.

New members join by invitation and complete their profile.

Members keep their own contacts, pass referrals to each other, and request introductions to people they want to meet, with a "who I want to meet" preference list that others can act on.

Meetings are recorded with attendance, and each member's dashboard summarises their referral activity and yearly attendance.

Announcements, events and in-app notifications keep the group informed, with email for the moments that matter.

Sign-in uses short-lived access tokens with a refresh token held in an HTTP-only cookie, plus CSRF protection.

Administrators manage roles and can switch into any member's view and back, to see and support exactly what that member sees.

Employee self-service portal.

The portal extends an existing intranet theme with a custom plugin.

The plugin talks to the HR system's API on the portal's behalf and exposes the results through portal pages and shortcodes: employee records, leave balances and timecards.

Staff enter timesheets in the portal, and supervisors review and approve them in the same place.

A staff directory, document and form libraries, useful links, a company calendar and announcements round out the intranet.

Administrators can switch into a user's view to help with support questions.

Technical challenges

Modelling a networking group's real workflow (referrals, introduction requests, attendance) so that each member's dashboard is meaningful rather than a list of records.

Token-based sign-in for a single-page app, with refresh tokens and CSRF protection.

Admin view-as-user, so support questions can be answered by seeing exactly what the user sees.

Presenting live data from a back-office HR system inside a familiar intranet, rather than copying it into another database.

Timesheet entry and approval that follow the company's supervisor structure.

Two very different stacks (a JavaScript single-page app with its own API, and a CMS-based intranet) delivering the same kind of self-service experience.

Capabilities

  • Invitation-based onboarding and member profiles
  • Contacts, referrals and introduction requests
  • "Who I want to meet" preferences
  • Meetings with attendance tracking and yearly statistics
  • Personal activity dashboards
  • Announcements, events and notifications, with transactional email
  • Role management and admin view-as-user
  • Employee records, leave balances and timecards from the HR system
  • Timesheet submission and supervisor approval
  • Staff directory, document and form libraries, links and company calendar

Technology

  • React and Vite single-page app
  • REST API on Express with a MySQL database
  • JWT access tokens and a refresh-token cookie
  • CSRF protection
  • Transactional email over SMTP
  • WordPress theme and plugin development in PHP
  • Shortcodes
  • Integration with a back-office HR system REST API
  • jQuery with DataTables
  • SCSS

Impact

The networking portal gives members one place to see and manage their own referrals, introductions and attendance. The staff portal lets employees look up their own leave and time, and supervisors approve timesheets against the system that holds the records. No usage figures are claimed.

Skills demonstrated

  • Modelling real organisational workflows
  • Back-office system integration
  • Working in a small team

Demo

Planned

Two small mocks on invented data. A fictional networking circle: invite a member, pass a referral, request an introduction, record a meeting's attendance, and switch into a member's view as the admin. A fictional company's staff portal against a small mock HR API: check a leave balance, submit a timesheet and approve it as the supervisor.

Not built yet. A demo here uses only invented names and data.

All work