WasteLess — A social waste management platform that helps users track their waste, join recycling challenges, share posts, and interact with the community through likes, comments, and profiles.

• Framework: Vite 7 + React 19 + TypeScript (strict mode)
• Routing: vite-plugin-pages (file-based routing)
• Styling: Tailwind CSS 4.1.14 + shadcn/ui components
• Validation: Zod
• API Client: Custom fetch wrapper in src/lib/api/client.ts
• Path Alias: @ maps to src/

The backend exposes REST APIs consumed by this frontend. Copilot should never assume backend code, only use documented endpoints.

src/
├── components/          # UI + shared components
│   ├── ui/             # shadcn primitives (do NOT edit)
│   └── common/         # wrapped or composed variants
├── routes/             # file-based pages (_index.tsx for index routes)
├── lib/
│   └── api/            # api client, endpoints, schemas
├── hooks/              # custom React hooks
├── layouts/            # global and page-level layouts
└── styles/             # Tailwind + global styles

Use @/... imports (no ../../../).

• Tailwind CSS: Use utility classes exclusively; use cn() from @/lib/utils to merge class names
• shadcn/ui: Use components like Button, Card, Dialog, Table as the base for all UI
• DO NOT EDIT: Files under components/ui/* are generated primitives—wrap or extend them in components/common/*
• Accessibility: Maintain WCAG AA contrast, responsive design, and accessible interactions (focus-visible, proper labels)
• Best Practices:
  • Prefer semantic HTML
  • Use composition over duplication
  • All components must be functional, typed, and exported as default

• React Hooks Only: Use useState, useEffect, useMemo, useCallback — no class components.
• Size & Modularity: Keep components small, modular, and reusable.
• Logic Placement: Extract logic-heavy code into custom hooks (src/hooks) or API modules.
• API Calls: Avoid inline fetch calls — always use centralized endpoint functions.
• TypeScript: Props must be explicitly typed with interfaces:

  interface ComponentNameProps {
    // props here
  }

• Render Logic: Return early on empty or loading states to keep render logic clean.

• Centralized API: Use functions from @/lib/api/* only—never call fetch directly in components
• Module Organization: Each module (e.g., auth.ts, users.ts) defines clear verbs like login, getProfile
• Validation: Validate requests/responses with Zod schemas in @/lib/api/schemas/*
• Error Handling: Use async/await, handle errors gracefully, display feedback via shadcn components (e.g., Toast)

Example Pattern:

const { data, error, isLoading } = useQuery({
  queryKey: ['profile'],
  queryFn: getProfile,
});

• Naming Conventions:
  • Variables: camelCase
  • Components: PascalCase
  • Files: kebab-case
• Functions: Prefer arrow functions and const.
• Types: Avoid unnecessary any; use unknown or explicit types.
• Imports: Sort imports: external → internal → styles.

• Always use <button>, <a>, <label> correctly.
• Inputs have labels or aria-label.
• Maintain focus rings and keyboard navigation.
• Error messages and success states must be perceivable and distinct.

• Use fetch or direct API URLs inside components
• Modify files under components/ui/ (shadcn generated)
• Use inline CSS styles or global style overrides
• Import layouts inside pages (handled automatically by routing)
• Use magic strings or hard-coded values from backend