Mohamed Abdelawal Law Office
A public practice site, and the office system behind it
- 18
- Modules delivered
- 2
- Languages, full RTL
- 5
- Role types
- 0
- Paper case files left
- Industry
- Legal tech
- Platform
- Website · Web app
- Year
- 2026
- Duration
- 6 weeks
- Our role
- Product design · Architecture · Full build · Ongoing support
01 The brief
A working law office in Alexandria was running its entire practice on paper files, a shared drive and a WhatsApp group. Hearing dates were tracked by whoever remembered them. Powers of attorney lived in a filing cabinet. Nobody could answer "what does this client owe us?" without an afternoon of arithmetic.
They needed one system — in Arabic, for staff who had never used software more complex than Word, and without a migration that would stop the office working for a week.
They also had no presence at all. A practice with thirty-five years behind it could not be found by anyone who did not already know its phone number. So the work came in two halves: a public site that argues for the office, and the system that runs it once a client says yes.
Everything is in Arabic, mirrored properly, and the hearing calendar has not missed a date since launch.
02 What we built
The public site is a static Arabic build: a home page that states the practice, six practice-area pages with their own scope and FAQs, a legal-articles section written for the questions clients actually search, and a contact page whose enquiry form names its practice area. It is the front door of the practice, and its header carries a client-portal link straight into the system.
Behind that link is the system. Each case carries its own overview, parties, documents, appointments and financials as tabs on one record — so a lawyer opening a file at 8am sees the hearing, the opposing counsel and the outstanding balance without leaving the page.
Clients and lawyers get the same treatment: a profile that gathers their cases, contacts, powers of attorney and financial position in one place. The agenda view rolls every hearing across the office into a single calendar, and office attendance is tracked against it.
The money side finally became visible. Expenses, HR payroll and a guided month-closing routine sit alongside client and case financials. The office closes a month in under an hour instead of a week.
03 Architecture
The decisions that make a system like this survive contact with a real office are mostly invisible from the outside.
Role-based access
Five role types enforced twice — route guards in the client, row-level policies in the database. A paralegal never loads a payroll record, even by URL.
True right-to-left
Direction-aware layout via logical properties, mirrored iconography and Arabic-Indic numerals — not a stylesheet flipped at the last minute.
Supabase backend
Postgres, auth and file storage with typed clients, so the team spends its time on features instead of infrastructure.
Nine settings modules
Courts, case types, countries and expense types are all editable by the office. Adding a new court does not require a developer.
Built with
- Angular 21
- TypeScript
- Supabase
- PostgreSQL
- Tailwind CSS
Inside the product
Screens
The public site
The half of the project the public sees: an Arabic-first practice site that states who the office is, what it argues, and how to reach it — with the client portal one click away in the header.
Practice areas
Six practice areas, each with its own page, scope and frequently asked questions — so somebody searching for a specific problem lands on the answer rather than a phone number.
Behind the portal
Past the client portal is the other half — the system the office runs on. Open it and see the practice whole: the active caseload, what is being heard today, live powers of attorney, and where the money is.
Hearings agenda
Every hearing for every lawyer in one week view. This is the screen that stopped the office losing dates to a WhatsApp group.
More of the system
Each area sets out what the work covers and answers the questions clients actually ask, with a consultation call to action pinned beside it.
Plain-language explainers of procedures clients ask about most, filterable by area — the part of the site that earns search traffic instead of buying it.
Where the public half hands over to the private one: an enquiry names its practice area, and the office picks it up as the first record of what may become a case.
Hundreds of clients with their identity documents, contact routes and status — searchable in a second instead of found in a drawer.
One client, everything about them: their cases, contacts, powers of attorney and outstanding balance on a single record.
The registry that used to be a filing cabinet: scope, issuing office, expiry, and which lawyers each document actually authorises.
A case file and every movement on it — sessions, decisions, what was filed, and what is required before the next date.
Five role types, enforced in the client and again in the database. A paralegal cannot reach a payroll record, even by typing the URL.
Results
We stopped losing hearing dates in the first month. The partners can see the whole office from their phone now.
