# ILoveCalculate Project Documentation

> **Project Name**: ILoveCalculate
> **Description**: A comprehensive web application featuring a wide variety of online calculators (Health, Finance, Education, Utilities, Converters).
> **URL**: https://www.ilovecalculate.com

## Tech Stack

- **Framework**: React 18
- **Build Tool**: Vite
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **UI Library**: shadcn/ui (radix-ui primitives)
- **Routing**: react-router-dom
- **State/Data**: @tanstack/react-query
- **SEO**: react-helmet-async
- **Animations**: framer-motion

## Project Structure

The project follows a standard Vite + React structure:

- `src/`
  - `pages/`: Contains all route components (calculators, static pages).
    - Naming convention: `[Name]Calculator.tsx` for calculators.
  - `components/`:
    - `ui/`: Reusable primitive components (buttons, inputs, cards) from shadcn/ui.
    - `CalculatorLayout.tsx`: The standard wrapper layout for all calculator pages.
    - `Header.tsx`, `Footer.tsx`: Global layout components.
    - `SEO.tsx`: Reusable SEO head component.
  - `contexts/`: React contexts (e.g., `AuthContext`).
  - `data/`: Static data and configurations (e.g., `calculatorCategories.ts`).
  - `App.tsx`: Main application entry point handling routing and global providers.

## Routing & Navigation

- **Centralized Routing**: All routes are defined in `src/App.tsx`.
- **Lazy Loading**: Route components are lazy-loaded using `React.lazy` and wrapped in `Suspense` for performance.
- **Dynamic Routes**:
  - `/category/:slug`: Category listing pages.
  - Dynamic calculator routing is supported via `UniversalCalculator` for new path configs.

## Key Components

### CalculatorLayout
Used by almost all calculator pages to ensure consistent structure.
```tsx
<CalculatorLayout
  title="Calculator Name"
  description="Meta description for the calculator"
  keywords={["keyword1", "keyword2"]}
>
  {/* Calculator logic and UI here */}
</CalculatorLayout>
```

### UI Components
Located in `src/components/ui`, these are styled with Tailwind CSS and accessible via Radix UI. Common components include:
- `Button`, `Input`, `Label`
- `Card`, `CardHeader`, `CardContent`
- `Select`

## Conventions

- **State Management**: Local state with `useState` for calculator inputs. React Query for server data (if any).
- **Styling**: Utility-first CSS with Tailwind. `cn()` utility is used for class merging.
- **SEO**: Every page should utilize `Helmet` (via `CalculatorLayout` or `SEO` component) to set title, description, and canonical tags.