Cross-Platform Mobile App

Tadwerak

30+ screen dual-role recycling & e-commerce platform with wallet system, push notifications, RTL Arabic interface, and full admin dashboard — built and shipped in under 24 hours using DevOps Pilot.

React Native (Expo SDK 54)FirebaseReact Navigation 6

Tadwerak

A full-stack recycling and e-commerce mobile platform with 30+ screens, shipped in under 24 hours. Dual-role system serving both end users and administrators, with complete checkout flow, wallet system, push notifications, and RTL Arabic interface.

The 24-Hour Challenge

The client needed a working Android app — not a prototype, not a mockup, but a functional platform with authentication, order placement, wallet management, e-commerce, pickup scheduling, and a full admin dashboard. The deadline: 24 hours.

I used DevOps Pilot to generate the initial scaffold, then spent the remaining time on product architecture, Firebase integration, and manual refinement. The result: a production-quality dual-role app shipped on time.

Screen Flow

┌─────────────────────────────────────────────────────────────┐
│                      USER FLOW                              │
│                                                             │
│  Splash → Login/Register → Dashboard                        │
│                              │                              │
│           ┌──────────────────┼──────────────────┐           │
│           ▼                  ▼                  ▼           │
│     ┌──────────┐    ┌──────────────┐    ┌────────────┐      │
│     │ Recycle  │    │  E-Commerce  │    │   Wallet   │      │
│     │ Request  │    │    Store     │    │  Balance   │      │
│     │ Schedule │    │  Browse      │    │  History   │      │
│     │ Track    │    │  Cart        │    │  Withdraw  │      │
│     │ History  │    │  Checkout    │    │  Transfer  │      │
│     └──────────┘    │  Track Order │    └────────────┘      │
│                     └──────────────┘                        │
├─────────────────────────────────────────────────────────────┤
│                      ADMIN FLOW                             │
│                                                             │
│  Admin Login → Admin Dashboard                              │
│                    │                                        │
│        ┌───────────┼───────────┬────────────┐               │
│        ▼           ▼           ▼            ▼               │
│  ┌──────────┐┌──────────┐┌──────────┐┌───────────┐          │
│  │  Users   ││  Orders  ││ Pickups  ││Withdrawals│          │
│  │ Manage   ││ Manage   ││ Approve  ││  Process  │          │
│  │ Balance  ││ Status   ││ Points   ││  Review   │          │
│  │ Reward   ││ Details  ││ Reject   ││  Approve  │          │
│  └──────────┘└──────────┘└──────────┘└───────────┘          │
└─────────────────────────────────────────────────────────────┘

Feature Breakdown

User Side (15+ screens)

Dashboard: Points balance, wallet balance, quick action buttons (recycle, transfer, shop). Shows recent activity and pending requests.

Recycling Requests: Schedule pickups by selecting materials and specifying quantity. Track request status through the full lifecycle: Pending → Approved → Picked Up → Points Credited. View history of all past recycling activities.

E-Commerce Store: Browse products purchased with earned recycling points or wallet balance. Add to cart, review order, full checkout flow with address and payment method selection. Order tracking: Pending → Confirmed → Shipped → Delivered.

Wallet System: View current balance (earned from recycling activities). Full transaction history with timestamps. Withdraw via InstaPay or mobile wallet. Transfer balance to other users.

Push Notifications: Real-time updates when pickup requests are approved, orders ship, or withdrawals are processed.

Profile Management: Edit personal information, notification preferences, and account settings.

Admin Side (10+ screens)

Admin Dashboard: Overview metrics — total users, active pickups, pending orders, withdrawal queue. Quick access to each management section.

User Management: View all registered users, check individual balances, manually adjust points/wallet, grant promotional rewards.

Order Management: View all orders across the platform. Update order statuses, view detailed order information including items and delivery addresses.

Pickup Management: Review incoming recycling pickup requests. Approve with point allocation or reject with reason. Assign points based on material type and quantity.

Withdrawal Processing: Review withdrawal requests, verify amounts, approve or reject. Supports multiple payout methods (InstaPay, mobile wallet).

The Build Timeline

TimeWhat Happened
0:00Sent /expo Tadwerak Build a recycling app with wallet and e-commerce to DevOps Pilot
0:25AI generated 30+ screen scaffolds, Expo build validation passed
1:00Designed Firestore data model: users, recycleRequests, orders, transactions, withdrawals
2:00Wired Firebase Auth (email/password + Google)
4:00Built wallet reconciliation logic: credits from recycling, debits from purchases, transfer between users
8:00Completed admin dashboard with all management views
12:00Push notification service, order tracking state machine
16:00RTL Arabic layout — I18nManager.forceRTL(true), bidirectional text handling
20:00Edge cases: offline fallbacks, input validation, error states
24:00Final testing, deployed, delivered

Firebase Architecture

Firestore Collections:
├── users/
│   ├── {uid}/
│   │   ├── displayName, email, phone
│   │   ├── role: "user" | "admin"
│   │   ├── points: number
│   │   └── walletBalance: number
│
├── recycleRequests/
│   ├── {requestId}/
│   │   ├── userId, materials[], quantity
│   │   ├── status: "pending" | "approved" | "completed"
│   │   ├── pointsAwarded: number
│   │   └── timestamps: { created, approved, completed }
│
├── orders/
│   ├── {orderId}/
│   │   ├── userId, items[], totalAmount
│   │   ├── status: "pending" | "confirmed" | "shipped" | "delivered"
│   │   └── shippingAddress: { ... }
│
├── transactions/
│   ├── {txId}/
│   │   ├── userId, type: "credit" | "debit" | "transfer"
│   │   ├── amount, description
│   │   └── timestamp
│
└── withdrawals/
    ├── {withdrawalId}/
    │   ├── userId, amount, method: "instapay" | "mobilewallet"
    │   ├── status: "pending" | "approved" | "rejected"
    │   └── processedAt

Tech Stack

LayerTechnology
FrontendReact Native (Expo SDK 54)
BackendFirebase (Auth, Firestore, Storage)
NotificationsExpo Push Notifications
NavigationReact Navigation 6 (Stack + Bottom Tabs)
StateReact Context API
LanguageRTL Arabic (I18nManager forced RTL)

What This Proves

Shipping under extreme time pressure forces ruthless prioritization. The AI generated the skeleton, but the product decisions — which screens actually matter, how the wallet reconciliation flow works, how to handle RTL layout with bidirectional text, what the admin needs to see first — those were human engineering decisions.

The combination of AI-accelerated scaffolding and human product judgment is how you ship what would normally take a team 2-3 weeks in a single day.