
Internal Admin Dashboard
Marjon BackOffice
Marjon BackOffice is the internal single-page application used by Marjon's operations team. It monitors GPS tracking devices on live maps with route, heatmap and location history views, and manages the advertising business (orders, contracts and photo report campaigns), the cargo business (orders, cargo types and pricing) and driver payments. It also includes developer tools for inspecting background job runs. Access is protected by SMS one-time-password login with JWT sessions and automatic token refresh, and the interface supports English, Russian and Uzbek.
Project Information
Role: Frontend Developer
Team: Team Project (4+ Frontend Developers, Backend, Mobile)
Duration: 6 months
Year: 2026
Tech Stack
React 19
TypeScript
Vite
Material UI
MUI X Data Grid
Emotion
React Router 7
i18next
Axios
Leaflet
React Leaflet
Day.js
Sentry
GitHub Actions
Key Features
- GPS device management with search, status and project filters
- Live map with routes, heatmap and location history
- Ad orders and contracts management
- Photo report review for ad campaigns
- Cargo orders, cargo types and pricing management
- Driver payments and payment history
- Developer tools for background job runs
- SMS OTP login with JWT and automatic token refresh
- English, Russian and Uzbek interface
My Responsibilities
- Built admin pages with Material UI and the MUI X Data Grid for devices, orders, contracts and payments
- Implemented the GPS device list with live status polling, search and filters
- Built device tracking maps with routes, heatmaps and location history by date range
- Implemented OTP-based login and JWT authentication with a token refresh request queue
- Developed the ads, cargo, photo report and driver payment modules
- Added English, Russian and Uzbek localization with i18next
- Set up Sentry error monitoring and a CI/CD pipeline with lint, build and deploy steps
- Worked in a team following Feature-Sliced Design, Husky hooks and conventional commits
Advantages
- One panel for GPS monitoring, advertising, cargo and driver payments
- Live device status without manual refresh
- Secure access with SMS OTP login and automatic token refresh
- Localized in English, Russian and Uzbek for the whole team
- Structured FSD codebase that is easy for several developers to extend
Challenges
- Keeping device statuses fresh while avoiding unnecessary load
- Showing many devices, routes and location points on a map
- Handling expired tokens while several requests are in flight
- Supporting three languages with no hardcoded text
Solutions
- Used polling hooks that encapsulate API calls and local state
- Used marker clustering, heatmap and GeoJSON tile processing to keep maps fast
- Queued requests during a 401 response and retried them after the token refresh
- Moved every user-facing string into i18next locale files
















