Scaffold ObjectStack Mobile runtime with Expo Router, NativeWind v4, and shadcn-style UI

.gitignore

@@ -0,0 +1,41 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# generated native folders
+/ios
+/android

README.md

@@ -1,2 +1,50 @@
-# mobile
-mobile app
+# ObjectStack Mobile
+
+Enterprise low-code platform mobile runtime built with Expo, React Native, and TypeScript.
+
+## Tech Stack
+
+- **Framework:** Expo SDK 54 (Managed Workflow)
+- **Navigation:** Expo Router (file-based routing)
+- **Language:** TypeScript (strict mode)
+- **Styling:** NativeWind v4 (Tailwind CSS for React Native)
+- **UI Components:** shadcn/ui pattern (`components/ui/`)
+- **Icons:** lucide-react-native
+- **State Management:** Zustand
+- **Data Fetching:** TanStack Query (React Query)
+
+## Project Structure
+
+```
+├── app/                    # Expo Router pages
+│   ├── _layout.tsx         # Root layout (providers)
+│   └── (tabs)/             # Bottom tab navigation
+│       ├── _layout.tsx     # Tab bar configuration
+│       ├── index.tsx       # Home / Dashboard
+│       ├── apps.tsx        # Apps listing
+│       ├── notifications.tsx
+│       └── profile.tsx
+├── components/
+│   └── ui/                 # Reusable UI components (shadcn pattern)
+│       ├── Button.tsx
+│       ├── Card.tsx
+│       └── Input.tsx
+├── lib/
+│   └── utils.ts            # cn() utility (clsx + tailwind-merge)
+├── global.css              # Tailwind base + CSS variables (light/dark)
+├── tailwind.config.js      # Tailwind configuration
+├── babel.config.js         # Babel + NativeWind preset
+├── metro.config.js         # Metro + NativeWind integration
+└── nativewind-env.d.ts     # NativeWind TypeScript types
+```
+
+## Getting Started
+
+```bash
+npm install
+npx expo start
+```
+
+## Design System
+
+The app uses a CSS-variable-based design token system with light and dark mode support. Color tokens are defined in `global.css` and consumed via Tailwind classes.

app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "ObjectStack Mobile",
+    "slug": "objectstack-mobile",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "scheme": "objectstack",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true
+    },
+    "web": {
+      "favicon": "./assets/favicon.png",
+      "bundler": "metro"
+    },
+    "plugins": ["expo-router"]
+  }
+}

app/(tabs)/_layout.tsx

@@ -0,0 +1,63 @@
+import { Tabs } from "expo-router";
+import {
+  Home,
+  LayoutGrid,
+  Bell,
+  UserCircle,
+} from "lucide-react-native";
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: true,
+        headerStyle: { backgroundColor: "#ffffff" },
+        headerTitleStyle: { fontWeight: "700", fontSize: 17 },
+        headerShadowVisible: false,
+        tabBarActiveTintColor: "#1e40af",
+        tabBarInactiveTintColor: "#94a3b8",
+        tabBarStyle: {
+          borderTopColor: "#e2e8f0",
+          backgroundColor: "#ffffff",
+        },
+        tabBarLabelStyle: {
+          fontSize: 11,
+          fontWeight: "600",
+        },
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Home",
+          tabBarIcon: ({ color, size }) => <Home size={size} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="apps"
+        options={{
+          title: "Apps",
+          tabBarIcon: ({ color, size }) => (
+            <LayoutGrid size={size} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="notifications"
+        options={{
+          title: "Notifications",
+          tabBarIcon: ({ color, size }) => <Bell size={size} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: "Profile",
+          tabBarIcon: ({ color, size }) => (
+            <UserCircle size={size} color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

app/(tabs)/apps.tsx

@@ -0,0 +1,26 @@
+import { View, Text, ScrollView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { LayoutGrid } from "lucide-react-native";
+
+export default function AppsScreen() {
+  return (
+    <SafeAreaView className="flex-1 bg-background" edges={["left", "right"]}>
+      <ScrollView
+        className="flex-1"
+        contentContainerClassName="px-5 pb-8 pt-4"
+      >
+        <View className="flex-1 items-center justify-center pt-20">
+          <View className="rounded-2xl bg-muted p-6">
+            <LayoutGrid size={40} color="#94a3b8" />
+          </View>
+          <Text className="mt-5 text-lg font-semibold text-foreground">
+            Apps
+          </Text>
+          <Text className="mt-2 text-center text-sm text-muted-foreground">
+            Your enterprise applications will appear here.
+          </Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

app/(tabs)/index.tsx

@@ -0,0 +1,106 @@
+import { View, Text, ScrollView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { TrendingUp, TrendingDown, Users, ShoppingCart, DollarSign, Activity } from "lucide-react-native";
+import { Card, CardHeader, CardTitle, CardContent } from "~/components/ui/Card";
+
+interface DashboardCardMeta {
+  type: "card";
+  title: string;
+  value: string;
+  trend: string;
+  icon: string;
+}
+
+const dashboardMetadata: DashboardCardMeta[] = [
+  { type: "card", title: "Monthly Sales", value: "$120,000", trend: "+12%", icon: "dollar-sign" },
+  { type: "card", title: "Active Users", value: "8,420", trend: "+5.2%", icon: "users" },
+  { type: "card", title: "Orders", value: "1,340", trend: "-2.1%", icon: "shopping-cart" },
+  { type: "card", title: "Revenue Growth", value: "23.5%", trend: "+8.7%", icon: "activity" },
+];
+
+const iconMap: Record<string, React.ComponentType<{ size: number; color: string }>> = {
+  "dollar-sign": DollarSign,
+  users: Users,
+  "shopping-cart": ShoppingCart,
+  activity: Activity,
+};
+
+function TrendBadge({ trend }: { trend: string }) {
+  const isPositive = trend.startsWith("+");
+  const TrendIcon = isPositive ? TrendingUp : TrendingDown;
+  return (
+    <View
+      className={`flex-row items-center rounded-full px-2.5 py-1 ${
+        isPositive ? "bg-emerald-50" : "bg-red-50"
+      }`}
+    >
+      <TrendIcon size={12} color={isPositive ? "#059669" : "#dc2626"} />
+      <Text
+        className={`ml-1 text-xs font-semibold ${
+          isPositive ? "text-emerald-700" : "text-red-600"
+        }`}
+      >
+        {trend}
+      </Text>
+    </View>
+  );
+}
+
+function MetadataCardRenderer({ meta }: { meta: DashboardCardMeta }) {
+  const IconComponent = iconMap[meta.icon] ?? Activity;
+
+  return (
+    <Card className="mb-3">
+      <CardHeader className="flex-row items-center justify-between pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {meta.title}
+        </CardTitle>
+        <View className="rounded-lg bg-primary/10 p-2">
+          <IconComponent size={18} color="#1e40af" />
+        </View>
+      </CardHeader>
+      <CardContent>
+        <Text className="text-2xl font-bold text-card-foreground">
+          {meta.value}
+        </Text>
+        <View className="mt-2">
+          <TrendBadge trend={meta.trend} />
+        </View>
+      </CardContent>
+    </Card>
+  );
+}
+
+function renderFromMetadata(metadata: DashboardCardMeta[]) {
+  return metadata.map((item, index) => {
+    switch (item.type) {
+      case "card":
+        return <MetadataCardRenderer key={index} meta={item} />;
+      default:
+        return null;
+    }
+  });
+}
+
+export default function HomeScreen() {
+  return (
+    <SafeAreaView className="flex-1 bg-background" edges={["left", "right"]}>
+      <ScrollView
+        className="flex-1"
+        contentContainerClassName="px-5 pb-8 pt-4"
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="mb-5">
+          <Text className="text-2xl font-bold text-foreground">
+            Dashboard
+          </Text>
+          <Text className="mt-1 text-sm text-muted-foreground">
+            Welcome back. Here&apos;s your overview.
+          </Text>
+        </View>
+
+        {renderFromMetadata(dashboardMetadata)}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

app/(tabs)/notifications.tsx

@@ -0,0 +1,26 @@
+import { View, Text, ScrollView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Bell } from "lucide-react-native";
+
+export default function NotificationsScreen() {
+  return (
+    <SafeAreaView className="flex-1 bg-background" edges={["left", "right"]}>
+      <ScrollView
+        className="flex-1"
+        contentContainerClassName="px-5 pb-8 pt-4"
+      >
+        <View className="flex-1 items-center justify-center pt-20">
+          <View className="rounded-2xl bg-muted p-6">
+            <Bell size={40} color="#94a3b8" />
+          </View>
+          <Text className="mt-5 text-lg font-semibold text-foreground">
+            No Notifications
+          </Text>
+          <Text className="mt-2 text-center text-sm text-muted-foreground">
+            You&apos;re all caught up. New notifications will appear here.
+          </Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

app/(tabs)/profile.tsx

@@ -0,0 +1,34 @@
+import { View, Text, ScrollView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { UserCircle } from "lucide-react-native";
+import { Button } from "~/components/ui/Button";
+
+export default function ProfileScreen() {
+  return (
+    <SafeAreaView className="flex-1 bg-background" edges={["left", "right"]}>
+      <ScrollView
+        className="flex-1"
+        contentContainerClassName="px-5 pb-8 pt-4"
+      >
+        <View className="items-center pt-10">
+          <View className="rounded-full bg-muted p-5">
+            <UserCircle size={56} color="#94a3b8" />
+          </View>
+          <Text className="mt-4 text-xl font-bold text-foreground">
+            John Doe
+          </Text>
+          <Text className="mt-1 text-sm text-muted-foreground">
+            john.doe@company.com
+          </Text>
+        </View>
+
+        <View className="mt-8 gap-3">
+          <Button variant="outline">Edit Profile</Button>
+          <Button variant="outline">Settings</Button>
+          <Button variant="ghost">Help &amp; Support</Button>
+          <Button variant="destructive">Sign Out</Button>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}