Component Organization
Relevant source files
The following files were used as context for generating this wiki page: - [README.md](https://github.com/HaoNgo232/frontend-luan-van/blob/main/README.md) - [features/products/components/products-content.tsx](https://github.com/HaoNgo232/frontend-luan-van/blob/main/features/products/components/products-content.tsx) - [app/admin/layout.tsx](https://github.com/HaoNgo232/frontend-luan-van/blob/main/app/admin/layout.tsx) - [app/home/page.tsx](https://github.com/HaoNgo232/frontend-luan-van/blob/main/app/home/page.tsx) - [components/layout/admin-sidebar.tsx](https://github.com/HaoNgo232/frontend-luan-van/blob/main/components/layout/admin-sidebar.tsx) - [components.json](https://github.com/HaoNgo232/frontend-luan-van/blob/main/components.json) - [package.json](https://github.com/HaoNgo232/frontend-luan-van/blob/main/package.json) - [app/admin/products/page.tsx](https://github.com/HaoNgo232/frontend-luan-van/blob/main/app/admin/products/page.tsx) - [components/ui/sheet.tsx](https://github.com/HaoNgo232/frontend-luan-van/blob/main/components/ui/sheet.tsx)This document outlines the component architecture and organization within the frontend-luan-van project. The structure is designed to be modular and scalable, primarily following a feature-based organization principle. This approach promotes separation of concerns, reusability, and maintainability by grouping related UI, logic, and types.
The project leverages Next.js's App Router, with components categorized into distinct directories based on their scope and purpose. These categories include feature-specific components, shared UI primitives, layout structures, and high-level page sections.
Sources: README.md
Core Principles & Directory Structure
The project's component strategy is built on a clear directory structure that separates concerns. The README.md file establishes the foundational architecture.
Sources: README.md:13-43
Directory Overview
The following diagram illustrates the high-level directory structure for components and related files.
This diagram shows the main directories for pages (app), shared components (components), and feature modules (features).
Sources: README.md:13-43
Component Directory Table
| Directory | Purpose | Examples |
|---|---|---|
features/ | Contains self-contained feature modules. Each feature has its own components, hooks, and types. | features/products/, features/orders/ |
components/ui/ | Houses general-purpose, reusable UI components, largely based on shadcn/ui. | Button, Card, Sheet, Table |
components/layout/ | Defines the overall structure of the application, such as sidebars and footers. | AdminSidebar, Footer |
components/sections/ | Comprises larger, composite components that make up sections of a page. | HeroSection, CategoriesSection |
components/skeletons/ | Contains loading state skeleton components for a better user experience. | ProductCardSkeleton |
Sources: README.md:13-43, app/home/page.tsx:1-5, features/products/components/products-content.tsx:9
Component Categories
Components are categorized by their location and responsibility within the application.
Feature Components (features/)
This is the cornerstone of the project's architecture. Each business domain or "feature" (e.g., Products, Orders, Cart) is encapsulated in its own directory under features/. This modular approach keeps all related logic, UI, and type definitions together, making features easy to develop, maintain, and understand in isolation.
A typical feature directory contains:
components/: React components specific to this feature.hooks/: Custom React hooks for state management and data fetching.types/orschemas/: TypeScript types and Zod schemas.services/: API interaction logic.
The diagram below shows the internal structure of the products feature.
This demonstrates how a feature like "products" is self-contained with its own specific components, hooks, and services.
Sources: README.md:46-52, features/products/components/products-content.tsx, features/products/services/admin-products.service.ts
Shared UI Components (components/ui/)
The components/ui/ directory contains a library of generic, reusable UI primitives. This project uses shadcn/ui, which is built upon Radix UI and styled with Tailwind CSS. The configuration for these components is defined in components.json.
These components are foundational and are used to build more complex feature components and page layouts. They are designed to be application-agnostic.
Key Dependencies:
@radix-ui/*: Provides accessible, unstyled component primitives.lucide-react: For icons.class-variance-authority&tailwind-merge: For managing component variants and styles.
An example is the Sheet component, which is a wrapper around @radix-ui/react-dialog to create a slide-out panel. It's composed of several sub-components like SheetTrigger, SheetContent, and SheetHeader.
Sources: package.json:15-46, components.json, components/ui/sheet.tsx
Layout Components (components/layout/)
Layout components are responsible for the high-level structure of the application's pages. They define common elements like headers, footers, and sidebars.
A prime example is the AdminLayout, which constructs the admin dashboard interface. It uses the AdminSidebar component and other UI primitives to create a consistent layout for all admin pages.
The following diagram shows how AdminLayout assembles the admin interface.
This flow shows AdminLayout wrapping page content with a protected route and a sidebar provider, which then renders the AdminSidebar and the main content area.
Sources: app/admin/layout.tsx, components/layout/admin-sidebar.tsx
Section Components (components/sections/)
Section components are large, self-contained parts of a page, often used on marketing or landing pages. They are composed of smaller UI and feature components. The home page is a clear example of composing a page from multiple section components.
The HomePage component at app/home/page.tsx is assembled by stacking several section components:
HeroSectionFeaturedProductsSectionCategoriesSectionBenefitsSectionNewsletterSection
This composition allows for easy reordering and reuse of large content blocks across different pages.
Sources: app/home/page.tsx, components/sections/categories-section.tsx
Component Composition in Practice
To see how these different component types work together, we can analyze the Admin Products page (/admin/products).
This page combines layout, UI, and feature-specific components to create a complete user experience for managing products.
The diagram below illustrates the component hierarchy for the AdminProductsPage.
This shows that the AdminProductsPage uses shared Card and Button components from components/ui/ to structure its content, while embedding complex, feature-specific components like AdminProductFilters and ProductsListCard from features/products/components/admin/. The entire view is wrapped by the AdminLayout.
Sources: app/admin/products/page.tsx, features/products/components/products-content.tsx
Summary
The component organization in frontend-luan-van is a well-defined system that prioritizes modularity and separation of concerns. By categorizing components into features, components/ui, components/layout, and components/sections, the codebase remains organized, scalable, and easier for developers to navigate. The feature-based approach, in particular, ensures that business logic is encapsulated, promoting code reuse and simplifying maintenance.
Sources: README.md:46-52