I made an AS FOOD by Muhammad SaifullahI made an AS FOOD by Muhammad Saifullah

I made an AS FOOD

Portfolio project
Muhammad Saifullah
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.

0 likes · 0 views · Aug 11, 2026

I made an AS FOOD ORDERING MOBILE APP using Reactive Native and Firebase. Bellow is Complete Guide😊 🛠️ Architecture & Tech Stack Frontend Framework: React...

Tags