src/
├── app/
│   ├── core/              # Singleton services, guards, interceptors
│   │   ├── services/
│   │   ├── guards/
│   │   └── interceptors/
│   ├── shared/            # Shared components, pipes, directives
│   │   ├── components/
│   │   ├── pipes/
│   │   └── directives/
│   ├── features/          # Feature modules
│   │   ├── auth/
│   │   ├── dashboard/
│   │   └── users/
│   └── app.component.ts
├── assets/
└── environments/

// Standalone Component with Signals (Angular 17+)
import { toSignal } from "@angular/core/rxjs-interop";

@Component({
  selector: "app-user-list",
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @for (user of users(); track user.id) {
      <div>{{ user.name }}</div>
    }
  `,
})
export class UserListComponent {
  private userService = inject(UserService);

  // ใช้ toSignal() แทน effect() + subscribe
  users = toSignal(this.userService.getUsers(), { initialValue: [] });
}

src/
├── components/          # Shared/reusable components
│   ├── ui/              # Basic UI components
│   └── layout/          # Layout components
├── features/            # Feature-based modules
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   └── api.ts
│   └── users/
├── hooks/               # Shared custom hooks
├── lib/                 # Utilities, helpers
├── services/            # API services
└── stores/              # State management (Zustand/Redux)

// Custom Hook Pattern
function useUsers() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    fetchUsers()
      .then(setUsers)
      .catch(setError)
      .finally(() => setLoading(false));
  }, []);

  return { users, loading, error };
}

// React Query Pattern
function useUsers() {
  return useQuery({
    queryKey: ["users"],
    queryFn: fetchUsers,
    staleTime: 5 * 60 * 1000,
  });
}

src/
├── components/          # Shared components
│   ├── ui/
│   └── layout/
├── composables/         # Composition API functions
├── views/               # Page components
├── stores/              # Pinia stores
├── services/            # API services
├── router/
└── assets/

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useUserStore } from "@/stores/user";

// Props & Emits
const props = defineProps<{
  userId: number;
}>();

const emit = defineEmits<{
  (e: "select", user: User): void;
}>();

// Composables
const userStore = useUserStore();

// Reactive State
const searchQuery = ref("");

// Computed
const filteredUsers = computed(() =>
  userStore.users.filter((u) => u.name.includes(searchQuery.value)),
);

// Lifecycle
onMounted(() => {
  userStore.fetchUsers();
});
</script>

src/
├── app/                   # App Router
│   ├── (auth)/            # Route groups
│   │   ├── login/
│   │   └── register/
│   ├── dashboard/
│   │   ├── page.tsx
│   │   ├── layout.tsx
│   │   └── loading.tsx
│   ├── api/               # API Routes
│   │   └── users/
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── ui/
│   └── features/
├── lib/                   # Utilities
└── services/              # API services

// Server Component (default)
async function UsersPage() {
  const users = await fetchUsers(); // Server-side

  return (
    <div>
      <UserList users={users} />
      <AddUserButton /> {/* Client Component */}
    </div>
  );
}

// Client Component
("use client");

function AddUserButton() {
  const [open, setOpen] = useState(false);

  return <button onClick={() => setOpen(true)}>Add User</button>;
}

// Server Action
async function createUser(formData: FormData) {
  "use server";

  const name = formData.get("name");
  await db.users.create({ name });
  revalidatePath("/users");
}