Project Structure

• src
  • assets
  • components
    • custom
    • magicui
    • ui
    • mode-theme.tsx
  • contexts
    • chat-context.tsx
    • ScrollToTop.tsx
    • theme-context.tsx
  • hooks
    • use-chat.ts
    • use-countries.ts
    • use-currencies.ts
    • use-file-upload.ts
    • use-menu-items.ts
    • use-mobile.ts
    • use-theme.ts
  • layouts
    • app-layout.tsx
    • auth-layout.tsx
    • settings-layout.tsx
  • pages
  • providers
    • chat-provider.tsx
    • theme-provider.tsx
  • routes
    • index.tsx
  • temp-data
    • flight-data.ts
    • hotel-data.ts
  • lib
• App.tsx
• main.tsx
• index.html

What lives where?

• /src/assets — Static assets like images, icons, or illustration files used across the UI.

• /src/components — All reusable UI elements.

  • custom/ → Page-specific or feature-level components.
  • magicui/ → Pre-styled animated or interactive UI pieces.
  • ui/ → Core design-system primitives (buttons, inputs, modals, etc.).
  • mode-theme.tsx → Light/Dark mode toggle logic.

• /src/contexts — React Contexts managing shared app state (e.g., theme, chat, scroll behavior).

  • chat-context.tsx → Global state for AI chat.
  • theme-context.tsx → Global theme context for dark/light mode.
  • ScrollToTop.tsx → Scroll restoration when navigating.

• /src/hooks — Typed utility hooks for app logic.

  • use-chat.ts → Handles AI chat state & messages.
  • use-countries.ts, use-currencies.ts → Country & currency helpers.
  • use-file-upload.ts → File upload handling.
  • use-menu-items.ts → Sidebar & navigation items.
  • use-mobile.ts → Responsive/mobile detection.
  • use-theme.ts → Theme mode getter & setter.

• /src/layouts — Page shells controlling structure and navigation.

  • app-layout.tsx → Main dashboard layout (header, sidebar, content).
  • auth-layout.tsx → Used for login/register pages.
  • settings-layout.tsx → For user settings & account pages.

• /src/pages — Actual page-level views (home, profile, billing, etc.).

• /src/providers — Global providers wrapping the app.

  • theme-provider.tsx → Supplies theme context globally.
  • chat-provider.tsx → Supplies AI chat context globally.

• /src/routes — Route configuration (React Router v7).

  • index.tsx → Entry point mapping paths → pages.

• /src/temp-data — Mock data for static preview/demo.

  • hotel-data.ts, flight-data.ts → Sample hotel & flight data.

• /src/lib — Shared utilities, helpers, or constants (can extend as needed).

• App.tsx — Root component defining layout + providers.

• main.tsx — App entry point initializing React + Vite.

• index.html — Vite HTML template for mounting the app.