React
TypeScript
Django
PostgreSQL
Python
Stripe- Case type, status, contacts, and staff
- Documents and case history
Project
Trebble is a case management platform for law firms. It gives firms one place to manage cases, contacts, calendars, client messages, documents, referrals, and billing. It has two parts, a public website , and a web app where lawyers and staff do their daily work. We built everything using a React front end and a Django back end.
The Trebble public website.
The brief
Law firms deal with deadlines, documents, invoices, and private client information every day. The goal was to put everything into one secure system that a law firm could use for all of its work. Three things were important.
One system, not many
Many firms were using separate tools for calendars, email, billing, and spreadsheets. Trebble brings cases, scheduling, communication, and billing together in one place.
Five tools and a folder of spreadsheets, replaced by one app.
Confidentiality
Client information is confidential, so each person only sees what they should.
Who sees what
- Lawyers — all cases, documents, billing, and history
- Paralegals — their assigned cases and tasks
- Clients — only their own cases and messages
Data Structure
The platform needed clear records and links between them before we could build the interface.
- 01
Cases & matters
- 02
Time & expenses
- Time and expenses linked to a case
- Ready to create invoices
- 03
Invoices & payments
- Invoices created from tracked work
- Payments handled with Stripe
Architecture & Design
We split the project into two parts, a React application for the interface, and a Django back end for storing the data, managing accounts, and handling billing.
04tools
A decoupled architecture
The front end and back end are separate applications. The browser loads the interface once, then gets data when needed. Each part can be built, tested, and deployed on its own.
One design system
The platform has many modules, so they all needed the same look and feel. We built reusable components including tables, forms, cards, and dialogs. This keeps the interface consistent and makes new modules easier to build.
React on the front end
The interface is built with React, the library used by products such as Netflix and Airbnb. It is well suited for large web applications where people expect fast interaction without reloading the page. Every file is written in strict TypeScript, so data like cases, invoices, and contacts is checked while we write the code.
The dashboard showing invoices, cases, and tasks (client names redacted).
The dashboard gives a quick overview of the firm. It shows invoice totals, open and closed cases and outstanding tasks. All data comes live from the API.
Django on the back end
We chose Django, the Python framework behind products like Instagram. It is a mature framework with strong security features and is a good choice for applications with large amounts of data and administration. It includes authentication, permissions, an admin panel, and a reliable database layer for PostgreSQL.
Roles and permissions
The lawyer, paralegal, and client roles are managed by Django's authentication system. Each user only has access to the information they are supposed to see.
The business logic
The platform stores much more than contact details.
- 01
Cases & contacts
Each case stores its contacts, staff, documents, and history.
- 02
Time & billing
Track work and expenses, then create invoices from them.
- 03
REST API
One API provides data for the whole application.
Real-time communication and billing
These features help firms do their work inside Trebble instead of using other tools.
Messaging inside the platform
Law firms and clients can chat in real time inside Trebble. The platform also supports email and bulk email. Messages stay connected to the correct case instead of being spread across different inboxes.
Built-in chat between the law firm and its clients (contact names redacted).
Getting paid
Billing uses stripe. Invoices are created from tracked time and expenses, and payments are processed by Stripe, so payment card information is always kept secure.
The Stripe link in the dashboard sidebar.
Scheduling
The calendar is part of the platform, not an extra tool. Events are linked to cases, include reminders, and can become video meetings. Hearings, client calls, and deadlines all stay connected to the right case.
The calendar with case events, reminders, and video meetings.
What was shipped
We built Trebble into a complete platform where a law firm can manage cases, contacts, calendars, communication, documents, referrals, coverage, reports, and billing in one place.
- Modules in one app
- 8
- Separate codebases
- 2
- Marketing site load
- 1.9s
Cases, contacts, calendar, communication, referrals, coverage, reports, and billing.
One React application and one Django REST API.
Median load time on a first visit.
The platform uses one React application. Every module shares the same design system. The interface loads once and requests data only when needed, so moving between cases, the calendar, and chat feels fast.
The Django REST API manages the data, user accounts, and billing. It includes role-based permissions, structured records for cases, time, and invoices, stripe payments, and a full admin panel. New features can be added by creating new API endpoints instead of rebuilding the platform.
Standards and Security
Because Trebble stores confidential legal information, security was built in from the beginning. Authentication, sessions, and role-based permissions come from Django trusted security features, so only the right people can access each case. Payments are processed by Stripe, so payment card information stays with a PCI-compliant provider. Cases, invoices, time records, and messages all stay together in one connected system. The public website also loads in under two seconds on a first visit.
Conclusion
Trebble shows how a modern web platform can replace many separate tools with one connected system. From case management and calendars to messaging and billing, every feature works together through a shared React front end and a Django back end.
By building the platform from scratch, we created a strong foundation that is easy to extend with new features while giving law firms a faster and simpler way to manage their daily work.
