Skip to content
Business systemsCustomer portal

Customer Portal

A secure self-service portal where business customers follow orders and projects, pay invoices, download documents and open support tickets — with a staff side for the team behind it.

Project facts

Project type
Customer portal
Category
Business systems
Industry
B2B services & suppliers
Technology stack
  • Next.js
  • React
  • TypeScript
  • PostgreSQL
  • Prisma
  • WebSockets
  • S3-compatible storage
Customer portal dashboard with open orders, invoices due, support tickets, a project progress timeline and recent documents

Overview

This demonstration project shows a customer portal for a B2B supplier of equipment and services. Each customer company gets its own secure area with several users: open orders with delivery tracking, a project timeline, invoices they can pay online, shared documents and a support channel with ticket history.

On the staff side, the team sees every customer account, works a shared support queue and can view the portal exactly as a customer sees it. The same pattern suits agencies, installers, logistics providers and software vendors.

The challenge

Without a portal, customers ask the same questions by phone and email: where is my order, can you resend that invoice, what is the status of the project, who handles my issue? Answers depend on who picks up, documents are lost in inboxes, and staff spend hours on requests the customer could handle themselves. Sharing documents by email also makes access hard to control.

The solution

The concept gives customers one place for everything that concerns their account. Orders show live status and tracking, projects show phases and updates, invoices can be paid online, and documents are shared per account with access controlled by role. Support runs through tickets with attachments and a clear status, so both sides see the full history. Staff work from a queue with priorities and can assign, answer and close tickets.

Key features

  • Customer accounts with multiple users and roles
  • Order status and delivery tracking
  • Project timeline with phases and published updates
  • Invoices with online payment and PDF download
  • Document sharing per account with controlled access
  • Support tickets with attachments, priority and status
  • Staff queue with assignment and response times
  • “View as customer” for support staff

Who it is for

  • B2B suppliers and service companies with recurring customers
  • Installers and agencies running projects for clients
  • Teams answering the same status questions every day
  • Companies that share contracts and reports by email today

Technical approach

One Next.js application serves the customer portal and the staff side, with every query scoped to the customer account and role on the server. PostgreSQL via Prisma stores accounts, users, orders, projects, invoices, documents and tickets. Files are stored in S3-compatible storage and served through short-lived signed links, ticket updates arrive live over WebSockets, and single sign-on can be offered to larger customers through OpenID Connect.

Database
Infrastructure
Integrations
MollieOpenID ConnectSMTP

Screens

Customer-facing interface

Support ticket conversation between a customer and a support engineer with attachments and ticket details
Support ticket conversation between a customer and a support engineer with attachments and ticket details

Admin interface

Staff support queue listing tickets per customer with priority and status, plus tickets by category
Staff support queue listing tickets per customer with priority and status, plus tickets by category

Mobile & responsive views

Three phone screens of the customer portal: account home, order tracking and support tickets
Three phone screens of the customer portal: account home, order tracking and support tickets

Services behind this project

The work in this case study maps onto these services. Each page explains scope, process and what you receive.

Related projects

All projects
  • SaaS workspace dashboard with project counts, activity chart, project progress table and plan usage
    SaaS platformsSaaS platform

    SaaS Management Platform

    A multi-tenant SaaS foundation with workspaces, members and roles, subscription billing, usage limits, an audit log and an operator console for the team that runs the product.

    • Next.js
    • React
    • TypeScript
    • PostgreSQL
    • Prisma
    • +4
  • CRM sales pipeline with five stages from new lead to won, each deal showing value, owner and next step
    Business systemsCRM system

    Custom CRM System

    A CRM shaped around one sales process: lead capture from the website and WhatsApp, a visual pipeline, contact timelines, follow-up tasks, quotes and a sales dashboard.

    • Next.js
    • React
    • TypeScript
    • PostgreSQL
    • Prisma
    • +2
  • Staff week calendar with colour-coded consultations, treatments, group sessions and online calls, plus staff utilisation
    Business systemsBooking system

    Booking & Reservation Platform

    An online booking system with live availability, staff calendars, deposits, automatic reminders by email and WhatsApp, and an admin view for bookings, no-shows and capacity.

    • Next.js
    • React
    • TypeScript
    • PostgreSQL
    • Prisma
    • +3

Questions about this type of project

Is this portal in use by a real company?

No. It is a demonstration project with sample customer accounts, orders and tickets. It shows how Saad builds a secure customer portal.

How is one customer prevented from seeing another customer's data?

Every record belongs to a customer account, and the server checks the signed-in user's account and role on every request. Files are delivered through short-lived signed links, so a copied link stops working.

Can the portal connect to our existing systems?

Usually yes. Orders, invoices or project data can be read from an existing ERP, CRM or accounting system through its API, so the portal shows the same information your team works with.

Want a similar project?

Tell Saad what you need. You get a clear scope, a phased plan and direct contact with the developer who builds it — no middlemen.

  • Direct, clear communication

    You talk directly to the engineer writing the code — no sales intermediaries, no vague delivery dates.

  • Fully custom solutions

    No ready-made WordPress themes or copied code — every line is written to fit your business's exact requirements and scale.

  • From idea to launch

    Help shaping the specification and turning a rough concept into a real, usable digital product.

The request form opens with this type of project already selected.