The client needed to modernise their customer enquiry management system to improve agent productivity, streamline customer interactions, and provide real-time collaboration capabilities. The legacy system lacked modern UI components, real-time notifications, and efficient workflow management, leading to delayed responses and suboptimal customer service experiences.
StorHub is a comprehensive customer enquiry management platform built as a modern Blazor Server application. The system enables Stor-Age agents to efficiently manage customer enquiries, handle complaints, track follow-ups, and coordinate store assignments in real-time.
The StorHub application features a clean, modern interface built with Ant Design components, providing an intuitive user experience for storage facility agents and managers.
- Dashboard View: Centralised enquiry management with tabular data presentation
- Enquiry Forms: Comprehensive forms for capturing customer information, unit preferences, and special requirements
- Real-time Status Updates: Live notifications when enquiries are updated or assigned
- Search and Filtering: Advanced search capabilities with store and territory filtering
- Responsive Design: Mobile-friendly interface for agents working across different devices
- Interactive Maps: Google Maps integration for location search and distance calculations
- Streamlined navigation with contextual sidebar components
- Error boundary implementation for graceful error handling
- Loading states and progress indicators for better user feedback
- Form validation with clear error messaging
- Real-time locking mechanism to prevent concurrent editing conflicts
Architecture
Backend Technologies
The system is built on the .NET Core framework, leveraging the latest features in C# for improved performance and scalability. Blazor Server is used for server-side rendering, allowing the UI to update in real time without full page reloads. Real-time communication is enabled via Azure SignalR Service, ensuring instant notifications and seamless collaboration. AutoMapper simplifies data transformation between models and DTOs, keeping the codebase clean and maintainable. Entity Framework provides robust and efficient database access with built-in ORM capabilities, reducing boilerplate code.
Frontend Technologies
The frontend uses a Blazor component-based architecture, promoting reusability and modular UI design. Ant Design is integrated to ensure a polished, professional, and consistent user interface across the application. Custom SCSS and modern CSS are used for fine-tuned styling and theme customisation. JavaScript integrations support client-side functionality like interactive maps using the Google Maps API.
Integration and Infrastructure
An Azure SQL Database serves as the primary data store, offering high availability and managed performance. Azure Redis Cache is used to speed up access to frequently used regions and store data. The system integrates with third-party APIs such as SiteLink and SpaceManager to support facility management features. Email notifications are handled through SendGrid, while SMS communications are managed via Clickatell. Google Maps is used for location services, including visual maps and distance calculations. Docker support enables containerised deployment using Windows containers, improving environment consistency and portability.
Testing & Quality Assurance
Comprehensive Unit Testing
A wide range of unit tests ensures that individual components behave correctly and helps catch regressions early.
Mocking & Dependency Isolation
Testing is enhanced with Moq and RichardSzalay.MockHttp, allowing isolation of dependencies and precise test control.
Behavior-Driven Assertions
FluentAssertions provides expressive, readable syntax for writing clear and intention-revealing tests.
Blazor UI Testing
bUnit is used to test Blazor components, ensuring the interactive frontend works as expected across scenarios.
Test Data Generation
AutoFixture automatically generates test data, reducing setup time and improving test coverage variability.
Test Coverage Analysis
Coverlet tracks how much of the codebase is exercised by tests, helping identify gaps and improve reliability.
Continuous Testing Support
Tests are fully integrated into the CI pipeline using NUnit and Microsoft.NET.Test.Sdk, supporting consistent, automated validation.
DevOps & CI/CD
Continuous Integration
Azure Pipelines automate building, testing, and validating code for every pull request or commit to the main branch.
Dockerized Testing Environments
Tests run in Docker containers, ensuring consistency across different development and CI environments.
Code Coverage & Quality Gates
SonarQube enforces quality gates and monitors code coverage, helping maintain a clean, maintainable, and test-validated codebase.
Design
StorHub's internal management portal was designed to streamline enquiry handling and agent workflows across multiple branches. Built entirely in Figma using a robust design system, the interface balances operational efficiency with user-centric interaction.
Key design considerations included:
Designed for Operational Clarity
The UI was tailored for internal sales teams, ensuring quick comprehension and task completion. Form layouts, tables, and filters were designed to minimise friction and enable agents to handle a high volume of enquiries with ease.
Task-Focused Navigation
Clear, segmented navigation (New Enquiry, Search, Complaint, Message / Callback) keeps the agent’s workflow focused. Buttons such as Create Follow-Up, Cancel Enquiry, and Save Changes are visually distinct and logically placed for efficient decision-making.
Structured Data Capture
Enquiry forms were laid out using a clean, spacious grid with consistent typography and spacing. Each field – from contact details to appointment dates – was designed using reusable components from the system library to ensure consistency and accuracy.
Modal Interactions for Critical Actions
Sensitive actions like cancelling an enquiry trigger a modal window that requires the agent to provide a cancellation reason and optional notes. This interaction pattern reduces the likelihood of accidental data loss and ensures accountability.
Priority & Assignment Management
For management users, store priorities and agent assignments were visually colour-coded (High, Medium, Low) to allow quick scanning. Agent assignment is facilitated with dropdowns and editable tokens, optimised for keyboard and mouse inputs.
Intelligent Search & Filtering
The enquiry list features dynamic filtering by contact, store, date, and type, allowing agents to instantly locate records within a high-volume system. Tags like Web, Message/Callback, and Complaints aid in classification and triage.
Responsive Panel System
The location search panel in the "New Enquiry" view demonstrates collapsible interface patterns, revealing store-level metadata (manager, contact details, amenities) alongside form inputs. This avoids interrupting user flow and supports multitasking.
Secure and Branded Login
The login screen adheres to StorHub's visual identity, using the brand’s colours and logo while maintaining a clear, accessible structure with form validation and password visibility toggles.
Consistent Design Language
The design system ensured visual consistency across the application, using defined colour tokens (e.g., red for primary actions), standardised spacing, and component variants for inputs, buttons, and tags.
By leveraging a modular design system and Figma’s collaborative workflows, the interface empowers both sales agents and managers to operate efficiently within a fast-paced environment. The result is a scalable, maintainable, and user-optimised internal tool tailored for real-world use.
Technical
The application was designed with scalability, security, and performance in mind, leveraging Microsoft Azure for cloud hosting and modern web technologies for development.
Tools
Development and Design Tools:
- Figma - UI/UX design and prototyping
- Visual Studio - Primary IDE for .NET development
- Azure DevOps - Source control, CI/CD pipelines, and project management
- PlantUML - Architecture diagrams and documentation
Backend Tools:
- .NET 6 - Core framework and runtime
- Blazor Server - Interactive web UI framework
- AutoMapper - Object mapping library
- FluentValidation- Model validation framework
- Azure SignalR - Real-time communication service
Cloud and Infrastructure Tools:
- Azure SQL Database - Primary database service
- Azure Redis Cache - Distributed caching solution
- Azure SignalR Service - Managed real-time messaging
- Azure Functions - Serverless compute for email/SMS services
- Azure Logic Apps - Workflow orchestration and integration
- Docker - Containerization platform
External Integrations:
- Google Maps API - Location and mapping services
- - SendGrid - Email delivery service
- - Clickatell - SMS messaging service
- - SiteLink API - Storage facility management system
- - SpaceManager API - Alternative facility management for StorageKing brand
Testing and Quality Assurance Tools:
- SpecFlow - Behaviour-driven development and acceptance testing
- xUnit - Unit testing framework
- Azure DevOps Pipelines - Automated testing and deployment
- Authentication
- Role-based authentication and collboration.
- Collaboration
- Real-time collaborative editing with locking mechanisms, comprehensive audit trail and logging, with Automated email and SMS notifications.
- Data Flow Architecture
- The system follows a clean architecture pattern with separated concerns - a Presentation Layer for Blazor components and pages, a Service Layer for business logic and external API orchestration, a Data Access Layer for the repository pattern with entity framework and an Integration Layer for external system connectors and message queues.
.webp)
.png)