Alshammari Faraa needed an order-management back office that matched how their team actually works rather than how the data is shaped. I built the Alshammari Faraa orders dashboard end to end: orders arrive on their own from Instagram, the interface is right-to-left throughout, and it is quick enough to use all day.
The brief
Replace slow, manual order handling with a dashboard the team can move through fast: bulk actions, filtering, invoice printing and Excel export, usable on a phone as well as a desk, with admin and employee roles kept apart. Most orders came in through Instagram direct messages and were being copied out by hand, so capturing those automatically was part of the job.
How I built it
- Frontend: React 19 with Vite and TailwindCSS, with full RTL support rather than a mirrored afterthought.
- Order capture: a ManyChat automation on Instagram that handles the customer conversation in DMs and posts the finished order straight into the Apps Script API. An order placed in a chat shows up in the dashboard without anyone retyping it.
- API: Google Apps Script serving an orders API — CRUD, bulk operations, a status lifecycle and statistics, and the endpoint the Instagram bot writes into.
- Data: Google Sheets as the datastore, reached through those Apps Script endpoints, so the team keeps a familiar view of their own data.
- Deployment: Firebase Hosting with auto-deploy from GitHub Actions.
- Interface: a clear information hierarchy with status badges, toasts and accessibility-friendly interactions.
The result
Alshammari Faraa now run daily operations from one place rather than occasional admin: orders captured straight from Instagram chats, role-based access, bulk work in a few clicks, and a deployment path where changes ship automatically.
Stack
React · React Router · Vite · TailwindCSS · Google Apps Script · Google Sheets API · ManyChat · Instagram automation · Firebase Hosting · GitHub Actions CI/CD · RTL UX
Screenshots
