SERVITH Portal
Project Case Study
SERVITH Portal
A customer-exclusive operations portal that standardizes the service workflow from inquiry submission to quotes, email invoices, and project management. Built in 1 month as a solo Next.js app with Supabase SSR auth and a maintainable UI foundation.
View Live Project →Overview
SERVITH Portal is a customer-exclusive operations portal built to reduce operational overhead in website service delivery. The landing page communicates the core scope clearly: inquiries, quotes, and project management, with direct entry to authentication.
This project was delivered in 1 month as a solo build.
The Operational Problem
Small business web services often suffer from fragmented communication and inconsistent rules:
Requests scattered across email and messaging tools
Quotes repeated in different formats with poor traceability
Payment steps unclear or re-explained each time
Policy questions (refunds, ownership, hosting) re-litigated repeatedly
The Portal addresses this by standardizing the workflow and documenting the rules inside the product.
Objectives
Provide a single entry point for clients to initiate service requests and follow progress
Separate rough estimates in the Portal from formal invoicing by email
Make payment and refund rules explicit to reduce ambiguity
Offer a secure, predictable authentication flow with password recovery
Information Architecture
The structure is built around a simple sequence: enter, authenticate, understand the rules, then operate.
Landing
Positions the Portal and the operational scope (inquiries, quotes, project management)
Auth
Login with security guidance (log out after use, trusted devices)
Sign up with explicit agreement to Terms and Privacy Policy
Forgot password flow that sends a reset link by email
Terms & Privacy
Operational rules for quotes, invoices, payments, and data collection
Core Business Flow
1) Quotes in Portal, invoices by email
The Portal is positioned to show rough estimates per request, while formal invoices are issued by email with itemized details and payment instructions.
2) Payment model designed for operational clarity
Terms define two payment paths:
Full website projects: 30% non-refundable deposit to confirm, remaining 70% due on completion and publishing after full payment
Minor edits and feature additions: full upfront payment, refundable only if canceled before work begins
This reduces ambiguity and speeds up decision-making for both clients and operations.
3) Policies treated as a product feature
Terms also document key operational boundaries such as content legality responsibility, ownership of designs/source code, and hosting requirements.
4) Minimal personal data by default
The Privacy Policy states the Portal collects email address only, along with purpose, retention, and security measures.
Technical Implementation
Stack
| Area | Implementation | Notes |
|---|---|---|
| Framework | Next.js 15.2.4 + React 19 | App-level structure suitable for an operations portal |
| Auth and session | Supabase SSR (@supabase/ssr) | Server and client session handling |
| State | Redux Toolkit | Predictable state transitions for request-based UI flows |
| Forms | React Hook Form | Validation and consistent form UX |
| Nodemailer | Email-based flows (invoicing, notifications, password reset delivery) | |
| Tokens | jsonwebtoken | Token utilities for operational workflows where applicable |
| Upload UX | browser-image-compression | Client-side image compression for attachments when needed |
| Utilities | linkify-react, react-qr-code | Link rendering and QR support for operational extensions |
Implementation Highlights
Auth-first foundation so core flows are secure and stable from day one
Policies shipped inside the Portal to keep operational rules consistent and discoverable
A stack optimized for maintainability and incremental feature growth (inquiries, quotes, project management)
What This Case Study Demonstrates
Converting service operations into a productized workflow
Building secure client-facing portals with SSR authentication foundations
Designing for clarity and reduced friction in quote and payment processes
Shipping quickly with a maintainable, scalable Next.js and TypeScript stack
Live: https://portal.servith.com/
Timeline: 1 month
Role: Solo delivery (IA → auth/session → operational workflow alignment → policy)