create-aws-project 1.2.1

package/templates/apps/mobile/src/App.tsx

@@ -0,0 +1,367 @@
+import { StatusBar } from "expo-status-bar";
+import {
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  ActivityIndicator,
+  Alert,
+} from "react-native";
+import { useEffect } from "react";
+import { useUserStore } from "./store/user-store";
+import type { User } from "{{PACKAGE_SCOPE}}/common-types";
+import { apiClient } from "./config/api";
+import { ApiError } from "{{PACKAGE_SCOPE}}/api-client";
+
+export default function App() {
+  const {
+    user,
+    users,
+    setUser,
+    addUser,
+    setUsers,
+    isLoading,
+    error,
+    setLoading,
+    setError,
+    clearError,
+  } = useUserStore();
+
+  // Fetch users on mount
+  useEffect(() => {
+    handleFetchUsers();
+  }, []);
+
+  const handleLoadDemoUser = () => {
+    const demoUser: User = {
+      id: crypto.randomUUID(),
+      email: "demo@example.com",
+      name: "Demo User",
+      createdAt: new Date().toISOString(),
+    };
+    setUser(demoUser);
+    addUser(demoUser);
+    Alert.alert("User loaded", "Demo user has been loaded successfully");
+  };
+
+  const handleClearUser = () => {
+    setUser(null);
+    Alert.alert("User cleared", "Current user has been cleared");
+  };
+
+  const handleFetchUsers = async () => {
+    setLoading(true);
+    clearError();
+    try {
+      const fetchedUsers = await apiClient.getUsers();
+      setUsers(fetchedUsers);
+      Alert.alert(
+        "Users fetched",
+        `Loaded ${fetchedUsers.length} users from API`
+      );
+    } catch (err) {
+      const message =
+        err instanceof ApiError ? err.message : "Failed to fetch users";
+      setError(message);
+      Alert.alert("Error", message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreateUser = async () => {
+    setLoading(true);
+    clearError();
+    try {
+      const newUser = await apiClient.createUser({
+        email: `user${Date.now()}@example.com`,
+        name: `User ${Date.now()}`,
+      });
+      addUser(newUser);
+      Alert.alert("User created", `Created ${newUser.name}`);
+    } catch (err) {
+      const message =
+        err instanceof ApiError ? err.message : "Failed to create user";
+      setError(message);
+      Alert.alert("Error", message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <StatusBar style="light" />
+
+      {/* Header */}
+      <View style={styles.header}>
+        <Text style={styles.title}>{{PROJECT_NAME_TITLE}}</Text>
+        <Text style={styles.subtitle}>
+          Nx Monorepo with React, AWS Lambda, and Shared Types
+        </Text>
+      </View>
+
+      {/* Main Content */}
+      <ScrollView
+        style={styles.content}
+        contentContainerStyle={styles.contentContainer}
+      >
+        {/* Welcome Card */}
+        <View style={styles.card}>
+          <Text style={styles.cardTitle}>Welcome to Mobile Client</Text>
+          <Text style={styles.cardText}>
+            This is a React Native application built with Expo and TypeScript,
+            managed by Nx in a monorepo structure.
+          </Text>
+        </View>
+
+        {/* Features Card */}
+        <View style={styles.card}>
+          <Text style={styles.cardTitle}>Features:</Text>
+          <View style={styles.featureList}>
+            <Text style={styles.featureItem}>- React Native with Expo</Text>
+            <Text style={styles.featureItem}>- TypeScript Support</Text>
+            <Text style={styles.featureItem}>
+              - Cross-platform (iOS & Android)
+            </Text>
+            <Text style={styles.featureItem}>
+              - Zustand for state management
+            </Text>
+            <Text style={styles.featureItem}>- Jest for testing</Text>
+            <Text style={styles.featureItem}>
+              - Shared types from common-types library
+            </Text>
+            <Text style={styles.featureItem}>- Nx for monorepo management</Text>
+            <Text style={styles.featureItem}>
+              - Type-safe API client with Axios
+            </Text>
+            <Text style={styles.featureItem}>
+              - AWS CDK infrastructure deployment
+            </Text>
+          </View>
+        </View>
+
+        {/* API Actions Card */}
+        <View style={styles.card}>
+          <Text style={styles.cardTitle}>API Actions:</Text>
+          <View style={styles.buttonGroup}>
+            <TouchableOpacity
+              style={[styles.button, styles.buttonPrimary]}
+              onPress={handleFetchUsers}
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <ActivityIndicator color="#fff" />
+              ) : (
+                <Text style={styles.buttonText}>Fetch Users</Text>
+              )}
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={[styles.button, styles.buttonSuccess]}
+              onPress={handleCreateUser}
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <ActivityIndicator color="#fff" />
+              ) : (
+                <Text style={styles.buttonText}>Create Test User</Text>
+              )}
+            </TouchableOpacity>
+          </View>
+          {error && <Text style={styles.errorText}>Error: {error}</Text>}
+        </View>
+
+        {/* Current User Card */}
+        {user ? (
+          <View style={styles.card}>
+            <Text style={styles.cardTitle}>Current User:</Text>
+            <View style={styles.userInfo}>
+              <View style={styles.userInfoRow}>
+                <Text style={styles.userInfoLabel}>ID:</Text>
+                <Text style={styles.userInfoValue}>{user.id}</Text>
+              </View>
+              <View style={styles.userInfoRow}>
+                <Text style={styles.userInfoLabel}>Email:</Text>
+                <Text style={styles.userInfoValue}>{user.email}</Text>
+              </View>
+              <View style={styles.userInfoRow}>
+                <Text style={styles.userInfoLabel}>Name:</Text>
+                <Text style={styles.userInfoValue}>{user.name}</Text>
+              </View>
+              <View style={styles.userInfoRow}>
+                <Text style={styles.userInfoLabel}>Created:</Text>
+                <Text style={styles.userInfoValue}>
+                  {new Date(user.createdAt).toLocaleString()}
+                </Text>
+              </View>
+            </View>
+            <TouchableOpacity
+              style={[styles.button, styles.buttonDanger]}
+              onPress={handleClearUser}
+            >
+              <Text style={styles.buttonText}>Clear User</Text>
+            </TouchableOpacity>
+          </View>
+        ) : (
+          <TouchableOpacity
+            style={[styles.button, styles.buttonPrimary]}
+            onPress={handleLoadDemoUser}
+          >
+            <Text style={styles.buttonText}>Load Demo User</Text>
+          </TouchableOpacity>
+        )}
+
+        {/* Users Count */}
+        {users.length > 0 && (
+          <View style={styles.statsCard}>
+            <Text style={styles.statsText}>
+              Total users in store: {users.length}
+            </Text>
+          </View>
+        )}
+
+        {/* Footer Spacer */}
+        <View style={{ height: 20 }} />
+      </ScrollView>
+
+      {/* Footer */}
+      <View style={styles.footer}>
+        <Text style={styles.footerText}>
+          Built with React Native, TypeScript, Expo, and Zustand
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#0f172a",
+  },
+  header: {
+    backgroundColor: "#3B82F6",
+    paddingTop: 60,
+    paddingBottom: 30,
+    paddingHorizontal: 20,
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "bold",
+    color: "#fff",
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: "#e0e7ff",
+  },
+  content: {
+    flex: 1,
+  },
+  contentContainer: {
+    padding: 20,
+  },
+  card: {
+    backgroundColor: "#1e293b",
+    borderRadius: 12,
+    padding: 20,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: "#334155",
+  },
+  cardTitle: {
+    fontSize: 20,
+    fontWeight: "bold",
+    color: "#fff",
+    marginBottom: 12,
+  },
+  cardText: {
+    fontSize: 14,
+    color: "#94a3b8",
+    lineHeight: 20,
+  },
+  featureList: {
+    gap: 8,
+  },
+  featureItem: {
+    fontSize: 14,
+    color: "#94a3b8",
+    lineHeight: 20,
+  },
+  buttonGroup: {
+    gap: 12,
+  },
+  button: {
+    paddingVertical: 14,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 50,
+  },
+  buttonPrimary: {
+    backgroundColor: "#8b5cf6",
+  },
+  buttonSuccess: {
+    backgroundColor: "#10b981",
+  },
+  buttonDanger: {
+    backgroundColor: "#ef4444",
+    marginTop: 12,
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  errorText: {
+    color: "#f87171",
+    fontSize: 14,
+    marginTop: 8,
+  },
+  userInfo: {
+    gap: 12,
+    marginBottom: 12,
+  },
+  userInfoRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  userInfoLabel: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#94a3b8",
+    width: 80,
+  },
+  userInfoValue: {
+    fontSize: 14,
+    color: "#e2e8f0",
+    flex: 1,
+  },
+  statsCard: {
+    backgroundColor: "#1e293b",
+    borderRadius: 8,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: "#334155",
+  },
+  statsText: {
+    color: "#94a3b8",
+    fontSize: 14,
+  },
+  footer: {
+    backgroundColor: "#1e293b",
+    paddingVertical: 20,
+    paddingHorizontal: 20,
+    borderTopWidth: 1,
+    borderTopColor: "#374151",
+  },
+  footerText: {
+    textAlign: "center",
+    color: "#94a3b8",
+    fontSize: 12,
+  },
+});

package/templates/apps/mobile/src/__tests__/App.spec.tsx

@@ -0,0 +1,46 @@
+// Note: @testing-library/react-native uses react-test-renderer which
+// is not yet compatible with React 19. These tests are skipped until
+// the library is updated. See: https://github.com/callstack/react-native-testing-library/issues/1531
+
+// Skipping tests due to React 19 incompatibility with react-test-renderer
+describe.skip("App", () => {
+  it("should render the app title", () => {
+    // Test skipped - waiting for react-test-renderer React 19 support
+  });
+
+  it("should render the subtitle", () => {
+    // Test skipped
+  });
+
+  it("should render welcome message", () => {
+    // Test skipped
+  });
+
+  it("should render feature list", () => {
+    // Test skipped
+  });
+
+  it("should render Load Demo User button when no user", () => {
+    // Test skipped
+  });
+
+  it("should load demo user when button is pressed", () => {
+    // Test skipped
+  });
+
+  it("should clear user when Clear User button is pressed", () => {
+    // Test skipped
+  });
+
+  it("should render API action buttons", () => {
+    // Test skipped
+  });
+
+  it("should display users count when users exist", () => {
+    // Test skipped
+  });
+
+  it("should render footer", () => {
+    // Test skipped
+  });
+});

package/templates/apps/mobile/src/__tests__/store/user-store.spec.ts

@@ -0,0 +1,156 @@
+import { useUserStore } from '../../store/user-store';
+import type { User } from '{{PACKAGE_SCOPE}}/common-types';
+
+describe('useUserStore', () => {
+  const mockUser: User = {
+    id: '1',
+    email: 'test@example.com',
+    name: 'Test User',
+    createdAt: '2024-01-01T00:00:00.000Z',
+  };
+
+  beforeEach(() => {
+    // Reset store before each test
+    useUserStore.setState({
+      user: null,
+      users: [],
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  describe('initial state', () => {
+    it('should have null user', () => {
+      expect(useUserStore.getState().user).toBeNull();
+    });
+
+    it('should have empty users array', () => {
+      expect(useUserStore.getState().users).toEqual([]);
+    });
+
+    it('should not be loading', () => {
+      expect(useUserStore.getState().isLoading).toBe(false);
+    });
+
+    it('should have no error', () => {
+      expect(useUserStore.getState().error).toBeNull();
+    });
+  });
+
+  describe('setUser', () => {
+    it('should set the current user', () => {
+      useUserStore.getState().setUser(mockUser);
+      expect(useUserStore.getState().user).toEqual(mockUser);
+    });
+
+    it('should clear the current user when set to null', () => {
+      useUserStore.getState().setUser(mockUser);
+      useUserStore.getState().setUser(null);
+      expect(useUserStore.getState().user).toBeNull();
+    });
+  });
+
+  describe('setUsers', () => {
+    it('should set the users array', () => {
+      const users = [mockUser, { ...mockUser, id: '2', email: 'test2@example.com' }];
+      useUserStore.getState().setUsers(users);
+      expect(useUserStore.getState().users).toEqual(users);
+    });
+  });
+
+  describe('addUser', () => {
+    it('should add a user to the array', () => {
+      useUserStore.getState().addUser(mockUser);
+      expect(useUserStore.getState().users).toContainEqual(mockUser);
+    });
+
+    it('should append to existing users', () => {
+      const existingUser = { ...mockUser, id: '0' };
+      useUserStore.setState({ users: [existingUser] });
+
+      useUserStore.getState().addUser(mockUser);
+
+      expect(useUserStore.getState().users).toHaveLength(2);
+      expect(useUserStore.getState().users[0]).toEqual(existingUser);
+      expect(useUserStore.getState().users[1]).toEqual(mockUser);
+    });
+  });
+
+  describe('updateUser', () => {
+    it('should update a user in the array', () => {
+      useUserStore.setState({ users: [mockUser] });
+
+      useUserStore.getState().updateUser('1', { name: 'Updated Name' });
+
+      expect(useUserStore.getState().users[0].name).toBe('Updated Name');
+    });
+
+    it('should update the current user if it matches', () => {
+      useUserStore.setState({ user: mockUser, users: [mockUser] });
+
+      useUserStore.getState().updateUser('1', { name: 'Updated Name' });
+
+      expect(useUserStore.getState().user?.name).toBe('Updated Name');
+    });
+
+    it('should not update current user if id does not match', () => {
+      useUserStore.setState({ user: mockUser, users: [mockUser] });
+
+      useUserStore.getState().updateUser('different-id', { name: 'Updated Name' });
+
+      expect(useUserStore.getState().user?.name).toBe('Test User');
+    });
+  });
+
+  describe('removeUser', () => {
+    it('should remove a user from the array', () => {
+      useUserStore.setState({ users: [mockUser] });
+
+      useUserStore.getState().removeUser('1');
+
+      expect(useUserStore.getState().users).toHaveLength(0);
+    });
+
+    it('should clear current user if it matches removed user', () => {
+      useUserStore.setState({ user: mockUser, users: [mockUser] });
+
+      useUserStore.getState().removeUser('1');
+
+      expect(useUserStore.getState().user).toBeNull();
+    });
+
+    it('should not clear current user if id does not match', () => {
+      useUserStore.setState({ user: mockUser, users: [mockUser] });
+
+      useUserStore.getState().removeUser('different-id');
+
+      expect(useUserStore.getState().user).toEqual(mockUser);
+    });
+  });
+
+  describe('loading state', () => {
+    it('should set loading to true', () => {
+      useUserStore.getState().setLoading(true);
+      expect(useUserStore.getState().isLoading).toBe(true);
+    });
+
+    it('should set loading to false', () => {
+      useUserStore.setState({ isLoading: true });
+      useUserStore.getState().setLoading(false);
+      expect(useUserStore.getState().isLoading).toBe(false);
+    });
+  });
+
+  describe('error handling', () => {
+    it('should set error message', () => {
+      useUserStore.getState().setError('Something went wrong');
+      expect(useUserStore.getState().error).toBe('Something went wrong');
+    });
+
+    it('should clear error', () => {
+      useUserStore.setState({ error: 'Some error' });
+      useUserStore.getState().clearError();
+      expect(useUserStore.getState().error).toBeNull();
+    });
+  });
+});

package/templates/apps/mobile/src/config/api.ts

@@ -0,0 +1,16 @@
+import { createApiClient, createConfigFromEnv } from '{{PACKAGE_SCOPE}}/api-client';
+
+/**
+ * Configured API client instance
+ *
+ * Configuration is loaded from environment variables:
+ * - EXPO_PUBLIC_API_BASE_URL: API base URL (default: http://localhost:3000)
+ * - EXPO_PUBLIC_API_TIMEOUT: Request timeout in milliseconds
+ * - EXPO_PUBLIC_API_KEY: API key for authentication
+ * - EXPO_PUBLIC_API_WITH_CREDENTIALS: Whether to send credentials
+ * - EXPO_PUBLIC_API_DEBUG: Enable debug logging
+ *
+ * Create a .env file in the mobile app directory with these variables.
+ * See ENV_EXAMPLE.md in the api-client package for more details.
+ */
+export const apiClient = createApiClient(createConfigFromEnv());

package/templates/apps/mobile/src/store/user-store.ts

@@ -0,0 +1,56 @@
+import { create } from 'zustand';
+import type { User } from '{{PACKAGE_SCOPE}}/common-types';
+
+interface UserState {
+  user: User | null;
+  users: User[];
+  isLoading: boolean;
+  error: string | null;
+  setUser: (user: User | null) => void;
+  setUsers: (users: User[]) => void;
+  addUser: (user: User) => void;
+  updateUser: (id: string, updates: Partial<User>) => void;
+  removeUser: (id: string) => void;
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+  clearError: () => void;
+}
+
+export const useUserStore = create<UserState>((set) => ({
+  user: null,
+  users: [],
+  isLoading: false,
+  error: null,
+
+  setUser: (user) => set({ user }),
+
+  setUsers: (users) => set({ users }),
+
+  addUser: (user) =>
+    set((state) => ({
+      users: [...state.users, user],
+    })),
+
+  updateUser: (id, updates) =>
+    set((state) => ({
+      users: state.users.map((u) =>
+        u.id === id ? { ...u, ...updates } : u
+      ),
+      user:
+        state.user?.id === id
+          ? { ...state.user, ...updates }
+          : state.user,
+    })),
+
+  removeUser: (id) =>
+    set((state) => ({
+      users: state.users.filter((u) => u.id !== id),
+      user: state.user?.id === id ? null : state.user,
+    })),
+
+  setLoading: (loading) => set({ isLoading: loading }),
+
+  setError: (error) => set({ error }),
+
+  clearError: () => set({ error: null }),
+}));

package/templates/apps/mobile/src/test-setup.ts

@@ -0,0 +1,10 @@
+import '@testing-library/jest-native/extend-expect';
+
+// Mock expo-status-bar
+jest.mock('expo-status-bar', () => ({
+  StatusBar: 'StatusBar',
+}));
+
+// Silence console warnings in tests
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+jest.spyOn(console, 'warn').mockImplementation(() => { });

package/templates/apps/mobile/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/templates/apps/web/.env.example

@@ -0,0 +1,13 @@
+# API Configuration
+VITE_API_BASE_URL=https://your-api-domain.cloudfront.net
+
+# Cognito Configuration (when using Cognito auth provider)
+VITE_COGNITO_USER_POOL_ID=
+VITE_COGNITO_CLIENT_ID=
+# Optional: Identity Pool for AWS credentials (when social-login enabled)
+# VITE_COGNITO_IDENTITY_POOL_ID=
+
+# Auth0 Configuration (when using Auth0 auth provider)
+VITE_AUTH0_DOMAIN=your-tenant.auth0.com
+VITE_AUTH0_CLIENT_ID=your-client-id
+VITE_AUTH0_AUDIENCE=https://your-api-identifier