App Development
Build powerful apps that integrate with the Qumra ecommerce platform. Qumra Apps run as embedded iframes inside the Qumra admin panel, allowing store owners to extend their store functionality.
Quick Start
# 1. Install the Qumra CLI
npm install -g @qumra/cli
# 2. Login to your Qumra account
qumra user login
# 3. Create a new app
npx create-qumra-app my-app
# 4. Install dependencies
cd my-app && npm install
# 5. Start the development server
qumra app dev
Login Required
You must run qumra user login before creating or developing apps. The CLI authenticates via your browser and stores a session token locally.
Key Concepts
| Concept | Description | Learn More |
|---|---|---|
App Framework (@qumra/app-react-router) | Server-side framework for authentication, API calls, and session management | App Framework |
App Bridge (@qumra/jisr) | Communication layer between your app and the Qumra Admin panel | App Bridge |
UI Components (@qumra/manara) | Design system and React component library | UI Components |
UI Extensions (@qumra/riwaq) | Inject custom UI into Admin, Checkout, and Storefront | UI Extensions |
Web Pixels (@qumra/web-pixels-extension) | Analytics and tracking scripts on the storefront | Web Pixels |
| OAuth 2.0 | Secure authentication flow between your app and Qumra stores | Authentication |
| Webhooks | Real-time event notifications when store data changes | Webhooks |
| GraphQL API | Query and mutate store data through the Qumra GraphQL API | API Reference |
SDK Packages
| Package | Purpose |
|---|---|
@qumra/app-react-router | App framework for React Router 7 (authentication, routing, API access) |
@qumra/app-sdk | Core SDK (security, sessions, errors, validation) |
@qumra/app-session-storage-prisma | Prisma session storage adapter (SQLite, PostgreSQL) |
@qumra/app-session-storage-mongodb | MongoDB session storage adapter |
@qumra/jisr | App Bridge for admin panel communication (navigation, toasts, modals) |
@qumra/manara | Design system and UI components (Page, Card, Button, TextField, DataTable) |
@qumra/riwaq | UI Extensions SDK (Admin, Checkout, Storefront targets) |
@qumra/web-pixels-extension | Web Pixels for analytics and tracking |
Tech Stack
Qumra apps are scaffolded with a modern full-stack architecture:
| Technology | Version | Purpose |
|---|---|---|
| React | 19 | UI framework |
| React Router | 7 | File-based routing and SSR |
| TailwindCSS | 4 | Utility-first CSS |
| TypeScript | 5 | Type safety |
| Vite | 7 | Build tool and dev server |
| Node.js | >= 18 | Runtime |