The native WordPress app for iOS & Android — by Infragate Solutions LTD
A full-stack SaaS platform that turns any WordPress site into a native mobile app — without writing a single line of mobile code.
Live Demo • Architecture • Setup • API Docs • Contribute
"WordPress powers 43% of the web, but turning a WordPress site into a real mobile app still costs $10,000+ and takes months. We built Mobile-WP to change that — a platform where any website owner can create a professional, native-quality mobile app in minutes, not months."
— Infragate Solutions LTD, Creator & Architect
Mobile-WP is designed, architected, and built from the ground up by Infragate Solutions LTD — the visual builder, the backend API, the WordPress plugin, the template system, and the deployment infrastructure. Every component, every API endpoint, every drag-and-drop interaction is engineered by our team to solve a real problem we saw in the market.
Most "WordPress to app" tools either:
- Wrap your website in a WebView (rejected by Apple, terrible UX)
- Require you to learn Flutter/React Native (defeats the purpose)
- Cost $299/month and lock you into their platform
Mobile-WP takes a different approach:
| Feature | Why It Matters |
|---|---|
| JSON-driven architecture | The builder outputs declarative JSON, not code. Mobile apps can update instantly without App Store resubmission — Apple-compliant. |
| Real widget rendering | Not a WebView. The Flutter runtime interprets JSON and renders actual native widgets at 60fps. |
| WordPress-native | Custom plugin that deeply integrates with WordPress and WooCommerce, not just scraping your site's HTML. |
| Template-first | 25 business-specific templates so users start with a working app, not a blank canvas. |
12 widget types across 5 categories, all configurable with real-time preview:
| Category | Widgets |
|---|---|
| Layout | Banner, Image Slider, Divider |
| Content | Text Block, HTML Block, Blog Posts |
| Commerce | Product Grid, Category List |
| Media | Video Player, Map |
| Interactive | Search Bar, Button |
Purpose-built for real businesses, not generic placeholders:
| Category | Templates |
|---|---|
| News & Magazine | News Classic, Tech News, Magazine, Minimal Reader |
| Blog | Personal Blog, Travel Blog, Lifestyle Blog |
| E-Commerce | General Store, Fashion, Grocery, Digital Products |
| Restaurant & Food | Restaurant Menu, Food Delivery, Recipe App |
| Portfolio | Clean Portfolio, Photography, Agency |
| Education | Online Courses, School App |
| Service Business | Local Service, Consulting, Real Estate |
| Entertainment | Streaming, Podcast, Events |
- iPhone 15 Pro frame with Dynamic Island, SVG status bar icons, home indicator
- Android frame with punch-hole camera, navigation bar
- Device switcher toggle
- Multi-layer box shadows for premium look
Custom PHP plugin (mobilewp-connector) with:
- 13 REST API endpoints for content, products, menus, media
- 15+ webhook events for real-time content sync
- WooCommerce integration (conditional)
- HMAC-SHA256 signed webhooks
- Admin settings page with webhook logs
- Auth system (signup, login, logout, sessions)
- Auth-aware TopBar with user avatar and dropdown
- Dark mode across all panels (zinc-950/900/800)
- Mobile responsive with collapsible sidebar
- Stepped build pipeline with 5-stage progress
- Build history with status badges
I designed a clean 5-layer architecture that separates concerns and scales independently:
LAYER 1: SaaS Control Plane
Auth | Projects | Billing | Admin | Audit
│
LAYER 2: Content Connectors
WordPress Plugin <-> Sync Service | Webhooks
│
LAYER 3: App Config & Design Schema
Visual Builder | Schema Engine | Templates
│
LAYER 4: Mobile Runtime
Flutter Shell | Widget Factory | Data Layer
│
LAYER 5: Build & Release System
Build Queue | Signing | CI/CD | Publishing
See ARCHITECTURE.md for the full technical breakdown.
| Layer | Technology |
|---|---|
| Frontend | React 19 + Vite 7.3 + TypeScript |
| Styling | Tailwind CSS v4 + shadcn/ui (57 components) |
| Drag & Drop | @dnd-kit/core + @dnd-kit/sortable |
| Routing | Wouter (2KB router) |
| State | TanStack Query |
| Animations | Framer Motion |
| Backend | Express 5 + TypeScript |
| Database | PostgreSQL 16 + Drizzle ORM |
| Auth | crypto.scrypt + HttpOnly cookies |
| Monorepo | pnpm workspaces |
| WordPress | Custom PHP 8.1+ plugin |
Mobile-WP/
├── README.md # You are here
├── CONTRIBUTING.md # How to contribute
├── LICENSE # MIT License
├── docs/ # Full documentation
│ ├── ARCHITECTURE.md # System design
│ ├── SETUP.md # Local dev setup
│ ├── DATABASE.md # DB schema + migrations
│ ├── DEPLOYMENT.md # Production deployment
│ └── API.md # Complete API reference
│
├── fluxbuilder-project/ # Main SaaS application (monorepo)
│ ├── .env.example # Environment template
│ ├── artifacts/
│ │ ├── fluxbuilder/ # React frontend (13,800+ lines)
│ │ │ └── src/pages/Dashboard/ # 21 modular components
│ │ │ ├── WidgetBuilder.tsx # Drag-and-drop builder (1,718 lines)
│ │ │ ├── data/templates.ts # 25 template configs
│ │ │ └── components/ # Phone preview, sidebar, etc.
│ │ └── api-server/ # Express backend
│ └── lib/ # Shared packages (db, types)
│
└── wp-plugin/
└── mobilewp-connector/ # WordPress plugin (2,200 lines)
├── includes/ # 6 PHP classes
├── admin/ # Settings UI
└── assets/ # JS + CSS
Total: ~16,400 lines of hand-crafted code across 167 files.
- Node.js 20+
- pnpm 10+
- PostgreSQL 14+ (for backend, optional for frontend-only dev)
# Clone
git clone https://github.com/alahdal262/Web-Mobile-Flux.git
cd Web-Mobile-Flux/fluxbuilder-project
# Install
pnpm install
# Copy environment template
cp .env.example .env
# Edit .env with your database credentials
# Push database schema
pnpm --filter @workspace/db run db:push
# Run frontend (Terminal 1)
PORT=5173 BASE_PATH=/ API_PORT=3001 pnpm --filter @workspace/fluxbuilder run dev
# Run backend (Terminal 2)
pnpm --filter @workspace/api-server run devOpen http://localhost:5173 in your browser.
Need more detail? See docs/SETUP.md for the complete setup guide.
The live instance runs on a Hostinger VPS:
Internet -> Cloudflare -> Traefik (TLS) -> nginx (:3090) -> Express (:3001) -> PostgreSQL
ssh root@your-vps
cd /projects/fluxbuilder/fluxbuilder-project
pnpm install --frozen-lockfile
PORT=3090 API_PORT=3001 BASE_PATH=/ pnpm --filter @workspace/fluxbuilder run build
pm2 reload fluxbuilder-apiSee docs/DEPLOYMENT.md for the full production deployment guide.
cd wp-plugin
zip -r mobilewp-connector.zip mobilewp-connector/- Upload
mobilewp-connector.zipvia WP Admin > Plugins > Add New > Upload - Activate the plugin
- Navigate to MobileWP in the sidebar
- Generate API keys
- Set the webhook URL to your Mobile-WP instance
# Status check (no auth required)
curl https://yoursite.com/wp-json/mobilewp/v1/status
# Get posts (requires API key)
curl -H "X-MobileWP-Platform-Key: YOUR_KEY" \
https://yoursite.com/wp-json/mobilewp/v1/postsSee docs/API.md for the complete plugin API reference.
| Document | Description |
|---|---|
| ARCHITECTURE.md | System design, 5-layer architecture, technology decisions |
| SETUP.md | Local development setup with troubleshooting |
| DATABASE.md | Schema, migrations, connection strings, backup/restore |
| DEPLOYMENT.md | Production deployment on a VPS with Traefik + nginx + PM2 |
| API.md | Complete REST API reference with curl examples |
| CONTRIBUTING.md | How to contribute your first PR |
- Visual drag-and-drop builder with 12 widgets
- 25 business templates with one-click apply
- WordPress plugin (REST API + webhooks + WooCommerce)
- Auth system (signup/login/sessions)
- Realistic phone preview (iPhone/Android)
- Dark mode across all panels
- Mobile responsive dashboard
- Build pipeline UI
- Live deployment at flutter.streamtvlive.cloud
- Full documentation suite
- Flutter runtime consuming JSON config
- Cloud builds via Codemagic
- Config publishing to CDN
- WooCommerce checkout integration
- Stripe billing
- Analytics dashboard
- White-label / agency mode
- Template marketplace
- Custom connectors (Shopify, Webflow)
- Multi-language support
- Enterprise SSO
- MPAOP Platform integration
Contributions are welcome and appreciated! Mobile-WP is built to grow with community input.
- Fork the repo
- Create a feature branch:
git checkout -b feat/my-feature - Commit with Conventional Commits:
git commit -m "feat: add carousel widget" - Push and open a PR
Look for issues labeled good first issue — these are specifically selected for new contributors.
| Area | Skills Needed |
|---|---|
| Flutter Runtime | Dart, Flutter, state management |
| New Widget Types | React, TypeScript, CSS |
| Template Designs | UI/UX, Tailwind CSS |
| WordPress Plugin | PHP, WordPress API |
| WooCommerce | PHP, WooCommerce internals |
| Documentation | Technical writing |
| Tests | Jest, React Testing Library |
| Accessibility | WCAG, ARIA, screen readers |
| Internationalization | i18n, translations |
See CONTRIBUTING.md for the full contribution guide.
Mobile-WP is part of a larger ecosystem of open-source SaaS infrastructure I'm building:
| Project | Description |
|---|---|
| Mobile-WP | Visual mobile app builder (this project) |
| MPAOP Platform | Multi-project AI orchestration layer with Claude Code + MCP |
| yemen-tv-app | Flutter mobile app for Yemen TV news network |
| yemen-tv-ai-assistant | AI editorial assistant WordPress plugin |
| yementv-native-suite | WordPress plugin suite for Yemen TV |
All these projects share the same VPS infrastructure (PostgreSQL, Redis, Traefik) and demonstrate different facets of the same architectural philosophy: config-driven, multi-tenant, cloud-native SaaS.
|
Infragate Solutions LTD Creator & Architect of Mobile-WP infragatesolutions.com | GitHub | Based in the United Kingdom Infragate Solutions LTD is a software engineering company specialising in cloud-native SaaS platforms, WordPress ecosystems, and mobile application infrastructure. We conceived, designed, and built Mobile-WP from the ground up — from the initial product vision to the architecture design, from the React builder to the WordPress plugin, from the database schema to the production deployment. Our philosophy: think big, ship fast, build things that solve real problems. |
- Website: infragatesolutions.com
- GitHub: Web-Mobile-Flux
- Issues: Report a bug or request a feature
- Discussions: Ask a question
MIT License — see LICENSE for details.
You are free to use, modify, and distribute this software for any purpose, including commercial use. Attribution to the original author is appreciated but not required.
This project stands on the shoulders of giants:
- React — UI framework
- Vite — Build tool
- Tailwind CSS — Styling
- shadcn/ui — Component library
- Lucide — Icons
- @dnd-kit — Drag and drop
- Drizzle ORM — Database ORM
- Express — Backend framework
- PostgreSQL — Database
- WordPress — CMS integration target
Conceived, designed, and built by Infragate Solutions LTD
16,400+ lines of code | 167 files | 25 templates | 1 vision
If this project helps you, consider giving it a ⭐ on GitHub