Case study · Software development
Every advance,checkable from a phone
Mejid & Co regularly pays expenses on behalf of its clients and is then reimbursed. MZ Informatique designed MejidCo, an installable web app connecting the company with its clients: advances, refunds, folders and receipts, push notifications included.
Welcome, Client A
Recent transactions
- Cash advanceFolder A · dd/mm/yyyy-100.00 €
- RefundFolder A · dd/mm/yyyy100.00 €
- Cash advanceFolder B · dd/mm/yyyy-200.00 €
Recent folders
- Folder AFolder description
- Client
- Mejid & Co
- Sector
- Private services · property management, car rental, VIP welcome
- Format
- Installable web app (PWA), in French and English
- Our role
- Design and development of the app
Six chapters
01
Expenses paid on behalf of clients
Mejid & Co offers its clients a range of services. In the course of these services, the company regularly pays expenses on behalf of its clients and is then reimbursed. These are disbursements.
The services
- Property management
- Car rental with or without a driver
- VIP welcome
- Hotel booking
The life of a disbursement
- The expensePaid on the client's behalf.
- The clientEach expense is linked to them.
- The folderSometimes it belongs to a folder.
- The receiptThe document backs the entry.
- The refundMejid & Co is reimbursed.
Clients check this information on their phones, in French or English. MZ Informatique designed MejidCo to handle this.
02
What the client needs to be able to check
An advance is only useful to a client if they can check it: the amount, the payment date, the folder it relates to and the receipt.
2Transaction date: dd/mm/yyyy
1-100.00 €
Cash advance
Description of the entry
- The amountFront and centre, at the top of the detail.
- The payment dateShown above the entry.
- The related folderA direct link to the folder.
- The receiptReadable inside the app, PDFs and HEIC photos included.
03
Notified, without opening the app
Clients needed to be told about new entries without having to open the app to check. A new disbursement, folder or document had to trigger a notification on their phone, including on iPhone, where web notifications only work once the app has been added to the home screen.
MejidConowA new transaction was added to your account.- MejidConowA new folder was added to your account.
- MejidConowA new file was added to your account.
How a notification travels
- CreationA transaction, folder or file is added.
- PocketBase hookServer-side logic finds the right client.
- OneSignalThe notification goes out, in French or English.
- PhoneThe client is notified.
The built-in guide, on iPhone
- Add the app to the home screen
- Open it from its icon
- Enable notifications
04
Two areas, depending on the role
The app has two separate areas depending on the user's role. One serves clients, the other the Mejid & Co team. The tool had to work just as well on a computer for the team as on a phone for clients.
- Dashboard
- Cash advance
- Folders
- Services
| User | Title | Amount | Date | |
|---|---|---|---|---|
| Client A | Cash advance | -100.00 € | dd/mm/yyyy | |
| Client A | Refund | 100.00 € | dd/mm/yyyy | |
| Client B | Cash advance | -200.00 € | dd/mm/yyyy | |
| Client B | Cash advance | -50.00 € | dd/mm/yyyy |
For Mejid & Co's clients
- Sign in with an email address or a phone number, and reset their password.
- See their balance and latest transactions and folders on the dashboard.
- Browse disbursements and refunds, with the detail of each entry and its receipt.
- Open their folders and read documents inside the app, including PDFs and photos taken on iPhone in HEIC format.
- Receive a notification when a transaction, folder or file is added to their account.
- Reach Mejid & Co's service request forms from within the app.
For the Mejid & Co team
- Create and edit client accounts, and invite clients to set their password.
- Record an advance or a refund, with an attachment, payment date and linked folder.
- Specify, transaction by transaction, whether a service margin applies; it is shown in both the administration and client areas.
- Create typed folders and upload files to them.
- Follow amounts on a chart by week, month, year or custom period.
- Export a client's transactions to Excel, filtered by period and folder, as well as user lists.
- Delete and restore users, transactions, folders and files through a recycle bin.
05
A PWA rather than a native app
Clients add the app to their home screen without going through a store. It updates as soon as a new release goes live.
Add to home screen
The service worker, generated by Vite's PWA plugin
- Static assets
- Cached.
- API calls
- Network first, cache as fallback.
- New release
- Automatic update.
- French and English
- Light and dark themes
- No app store
06
The technical choices
The back end runs on PocketBase; everything ships as Docker containers, built and deployed by GitLab CI.
React and TypeScript
The app has many forms and filterable tables; typing the data (users, folders, transactions, files) reduces mismatches between the interface and the back end. React Hook Form and Zod for forms, TanStack Table for tables, Redux Toolkit for state.
PocketBase
Database, authentication, access rules and file storage in a single binary. For an app built around a handful of collections, a lightweight foundation that is easy to run, whose JavaScript hooks add server-side logic without an extra service.
OneSignal
In the interface, the SDK handles the user's subscription. On the server, PocketBase hooks send the notification to the right client.
Docker
The front end is compiled and then served by Nginx; PocketBase runs in its own image, together with its hooks. Secrets are injected at build time from Infisical and never stored in the repository.
GitLab CI, on every push
- Lint
- Build both images
- Publish to the registry
- Development branchStaging
- Main branchProduction
Locally, Husky, lint-staged and Prettier check the code before each commit.
In short
Entered once, checkable anywhere
Advances, refunds, folders and receipts: an installable web app connecting Mejid & Co with its clients. The team records each entry in the right place; clients check it from their phone and are told about it, push notifications included.
Tech stack
The project's technologies, and what each one does
- ReactInstallable app: cases, transactions, files and notifications.
- TypeScriptTyping of the application and its forms.
- DockerApplication and PocketBase back end deployed as containers.
- GitLabAutomated build and deployment.
A similar project?
Tell us about your situation. The first conversation is free and without obligation, on site in Nice and the surrounding area.