Admin Portal¶
The Admin Portal is the brand-facing management interface - a React 18 single-page application built with Vite 6 that allows vendors to manage their storefront, products, orders, and account settings.
Stack¶
| Layer | Technology |
|---|---|
| Framework | React 18 |
| Build tool | Vite 6 |
| UI component library | Material UI (MUI) v6 |
| State management | Redux Toolkit |
| Routing | React Router v7 |
| Authentication | Auth0 + JWT |
| Error monitoring | Sentry |
| Analytics | Microsoft Clarity |
Running Locally¶
The Admin Portal starts on port 8080 by default.
Multi-Tenant Setup¶
The Admin Portal is multi-tenant by subdomain. Each vendor accesses their portal via a subdomain of the platform:
- Production:
{vendor}.gotrove.ai - Development:
{vendor}.localhost:8080
The subdomain is used to identify the vendor context on load, and the application fetches the correct configuration and branding for that vendor from the API.
To test locally with a specific vendor, update your /etc/hosts file to point the subdomain to localhost:
Then access the portal at http://myvendor.localhost:8080.
Authentication¶
Authentication is handled by Auth0. On login, Auth0 issues a JWT which is stored client-side and attached to all API requests as a Bearer token.
The portal enforces vendor-scoped access - users can only see and manage data belonging to their vendor account.
Application Structure¶
apps/admin-portal/
├── src/
│ ├── app/ # Root app component and routing setup
│ ├── pages/ # Top-level page components (one per route)
│ ├── components/ # Reusable UI components
│ ├── store/ # Redux Toolkit store, slices, and selectors
│ ├── hooks/ # Custom React hooks
│ ├── services/ # API client functions
│ ├── utils/ # Utility helpers
│ └── main.tsx # Application entry point
Key Features¶
Storefront Management¶
Vendors configure their gifting storefront - including branding, messaging, featured products, and recipient experience settings.
Product Management¶
Vendors manage their product catalogue, including:
- Adding and editing products manually
- Connecting a Shopify store and syncing products
- Setting product availability and pricing
Order Management¶
Vendors view and manage orders placed through their storefront, including order status, fulfilment tracking, and export capabilities.
Account & Settings¶
Vendors manage their account details, connected integrations (Shopify, Xero, Stripe), and notification preferences.
State Management¶
Global state is managed with Redux Toolkit. The store is organised into feature slices (e.g. auth, vendor, products, orders) with async thunks used for API calls.
React Query or similar server-state libraries are not used - API interactions are handled via Redux async thunks and stored in the Redux state tree.
Shared Libraries¶
The Admin Portal uses shared libraries from the monorepo:
libs/frontend- shared React components, hooks, and utilities shared with the Customer Frontendlibs/shared- cross-cutting TypeScript types and constants
Monitoring¶
- Sentry - runtime errors and performance issues are captured automatically
- Microsoft Clarity - session recordings and heatmaps for UX analysis
Building for Production¶
Output is written to dist/apps/admin-portal/. The build is a static SPA - assets are served via a CDN or static file server, with all routes falling back to index.html.