I made an AS FOOD ORDERING MOBILE APP using Reactive Native and Firebase. Bellow is Complete Guid...I made an AS FOOD ORDERING MOBILE APP using Reactive Native and Firebase. Bellow is Complete Guid...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Muhammad's avatar
Muhammad Saifullah
• Aug 11
I made an AS FOOD ORDERING MOBILE APP using Reactive Native and Firebase.
Bellow is Complete Guide😊
🛠️ Architecture & Tech Stack
Frontend Framework: React Native (via Expo or React Native CLI)
UI & Styling: NativeWind (Tailwind CSS) or React Native StyleSheet with custom dark/light theme tokens.
Icons & Components: react-native-vector-icons (Lucide / Ionicons) & React Native Paper or custom components.
Database & Auth: Firebase Firebase Authentication, Cloud Firestore (NoSQL Database), and Firebase Storage (for uploading food/category images).
Navigation: @react-navigation/native with Bottom Tab Navigator (@react-navigation/bottom-tabs) and Stack Navigator.
🔐 1. Login Screen (Admin Authentication)
Features & UI Components
Fields: Email address and Password input fields with visibility toggle (eye icon).
CTA: Gradient / Orange styled Sign In button.
Footer: Copyright and portal title ("AS Foods © 2025 – Admin Portal").
Technical Implementation & Firebase Setup
Firebase Auth Integration: Use signInWithEmailAndPassword(auth, email, password).
Role-Based Security: Store admin UID/roles in a users collection in Firestore. Verify if role === 'admin' before allowing dashboard entry.
State & Validation: React Hook Form or useState with validation (e.g., standard email regex and non-empty password checks).
📊 2. Dashboard Screen
Features & UI Components
Header Bar: Admin welcome banner ("Good Morning, Admin! 👋"), Live clock/timer badge, and Sign Out action button.
Analytics Cards:
Total Revenue (e.g., Rs 20171)
Total Orders Count (12 Orders)
Total Registered Users (4 Users)
Total Food Menu Items (26 Foods)
Visual Data: Weekly Orders Bar Chart showing day-by-day order trends (Mon–Sun).
Technical Implementation & Firebase Setup
Real-time Analytics Listener: Set up onSnapshot listeners on Firestore collections:
orders collection: Sum up total price of completed/confirmed status orders for Revenue and total order counts.
users collection: Read total count of registered clients.
foods collection: Read total menu item count.
Chart Integration: Use react-native-chart-kit or victory-native to render the weekly order dynamic bar graph linked to real-time order timestamps.
🍕 3. Foods Screen (Menu Management)
Features & UI Components
Search Bar & Quick Filters: Search food by name; filter tabs for All, Available, and Unavailable items.
Action Header: Quick stats counters (Total, Active, Hidden) and an + Add button to create new menu items.
Food Cards Grid: Image, title, price (PKR Rs 500.0), discount status, and quick action buttons (+ Add, - Remove, or toggle availability).
Technical Implementation & Firebase Setup
Firestore Data Structure (foods collection):
JSON
{
  "id": "food_123",
  "name": "Chicken Corn Soup",
  "price": 500,
  "category": "Appetizer",
  "imageUrl": "https://firebasestorage...",
  "isAvailable": true
}

Image Storage: Firebase Cloud Storage via ref(storage, 'foods/image.jpg') and uploadBytes() / getDownloadURL().
Search & Filter: Local client-side array filter on fetched foods array using .filter(item => item.name.toLowerCase().includes(query)).
🏷️ 4. Categories Screen
Features & UI Components
Category Grid: Cards for categories like Appetizers, Chicken, Rice & Biryani, Wraps, Sides, and Beverages.
Status Badges & Controls: Quick count of active vs inactive categories, toggle switches, and deletion/edit modal actions.
Technical Implementation & Firebase Setup
Firestore Data Structure (categories collection):
JSON
{
  "id": "cat_01",
  "title": "Appetizer",
  "icon": "fast-food-outline",
  "isActive": true
}

Category-Food Mapping: Link category IDs directly into the foods collection documents for relational querying.
📦 5. Orders Screen
Features & UI Components
Order Filter Pills: Filter by All, Pending, Confirmed, Delivered, or Cancelled.
Order List Cards: Order Hash ID, Customer/Delivery info address, total order amount, timestamp, and colored status pill badges (Yellow = Pending, Green = Confirmed, Red = Cancelled).
Sign Out Confirmation Dialog: Modal overlay asking to confirm user logout.
Technical Implementation & Firebase Setup
Firestore Data Structure (orders collection):
JSON
{
  "orderId": "#627AC8D4",
  "customerAddress": "House #1, St 6...",
  "totalAmount": 2048,
  "status": "Pending",
  "items": [...],
  "createdAt": "Timestamp"
}

Status Updates: Admin tap actions update order state using updateDoc(doc(db, "orders", orderId), { status: "Confirmed" }).
Real-time Push Notifications: Firebase Cloud Messaging (FCM) trigger to notify delivery partners or users when an order status changes.
🚀 Step-by-Step Development Roadmap
Project Setup: Initialize React Native project with Expo/CLI & install dependencies (react-navigation, @react-native-firebase/app, @react-native-firebase/auth, @react-native-firebase/firestore).
Firebase Config: Initialize Firebase SDK in firebaseConfig.js with your Web/Android/iOS API keys.
Navigation & Theme: Configure BottomTabNavigator with custom icons and dark mode styling matched to the dark orange interface theme.
Auth Flow: Build sign-in screen and wrap main tab screens in an onAuthStateChanged auth gate listener.
Firestore Realtime Hooks: Connect screens with real-time listeners (onSnapshot) to reflect live orders and menu management instantly.
mobileappreactnativeFirebaseData VisualizationUI DesignUX DesignReact NativeVisual Studio Code
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started