React Package

{
  "name": "frontend",
  "version": "0.0.0",
  "private": true,
  "type": "module"
}

react/
├── src/
│   ├── api/              # API client and service layer
│   ├── components/       # Reusable UI components
│   │   ├── docs/         # Documentation components
│   │   ├── home/         # Home page components
│   │   ├── layout/       # Layout components
│   │   ├── ui/           # Shadcn UI components
│   │   └── weather/      # Weather demo components
│   ├── config/           # Application configuration
│   ├── constants/        # Constants and enums
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility libraries
│   ├── pages/            # Application pages/screens
│   │   └── docs/         # Documentation pages
│   ├── types/            # TypeScript type definitions
│   ├── App.tsx           # Root application component
│   └── main.tsx          # Application entry point
├── public/               # Static assets
├── vite.config.ts        # Vite configuration
├── tsconfig.json         # TypeScript configuration
└── package.json          # Dependencies and scripts

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

// Example API structure
api/
├── client.ts       // Axios instance configuration
├── endpoints.ts    // API endpoint definitions
└── services.ts     // Service layer functions

pnpm build

// Recommended component structure
components/
├── ui/              // Shadcn UI primitives
├── layout/          // Layout components
├── [feature]/       // Feature-specific components
└── shared/          // Shared utility components

// Use path aliases
import { Button } from "@/components/ui/button"
import { useAuth } from "@/hooks/useAuth"
import { API_URL } from "@/config/constants"

// Instead of relative imports
import { Button } from "../../components/ui/button"

// Define types for components
interface ButtonProps {
  variant: "primary" | "secondary"
  size: "sm" | "md" | "lg"
  onClick: () => void
}

export const Button: React.FC<ButtonProps> = ({ variant, size, onClick }) => {
  // Component implementation
}