# Honey Frontend

Telegram mini-app game frontend with a bee/honey theme. Built as a single-page application targeting mobile-first layout.

## Tech Stack

- **React 19** + **TypeScript 5.9** (strict mode)
- **Vite 7** with SWC (`@vitejs/plugin-react-swc`)
- **TanStack Router** (file-based routing, auto code-splitting) + **React Query**
- **Tailwind CSS v4** (`@tailwindcss/vite` plugin)
- **i18next** + react-i18next (EN, RU — loaded via HTTP backend from `public/locales/`)
- **axios** for HTTP requests
- **arktype** for runtime validation
- **motion** (Framer Motion) for animations
- **oxlint** / **oxfmt** for linting and formatting
- **pnpm** package manager

## Getting Started

### Prerequisites

- Node.js (see `.nvmrc` for a version) / NVM
- pnpm

### Setup

```bash
nvm use
pnpm install
cp .env.example .env  # fill in required variables
pnpm dev
```

### Environment Variables

| Variable            | Description          |
| ------------------- | -------------------- |
| `VITE_APP_NAME`     | Application name     |
| `VITE_APP_URL`      | Application URL      |
| `VITE_API_BASE_URL` | Backend API base URL |

## Scripts

| Command              | Description                      |
| -------------------- | -------------------------------- |
| `pnpm dev`           | Start dev server                 |
| `pnpm build`         | Typecheck + production build     |
| `pnpm build:staging` | Typecheck + staging build        |
| `pnpm lint`          | Run oxlint                       |
| `pnpm lint:fix`      | Run oxlint with auto-fix         |
| `pnpm fmt`           | Format code with oxfmt           |
| `pnpm fmt:check`     | Check formatting without writing |

## Project Structure

```
src/
  api/           — Axios instance and API utilities
  components/
    atoms/       — Generic reusable components
    form/        — Components for user inputs
    icons/       — SVG icon components
    modals/      — Application modals with shared interface
    surface/     — Themed containers
  i18n/          — i18n runtime setup
  routes/        — TanStack file-based routes
  styles/        — Global CSS, fonts
  main.tsx       — App entry point
public/
  locales/       — Translation JSON files
plugins/         — Custom Vite plugins
  dynamic-json.ts      — JSON templating with env var interpolation
```

### Path Aliases

- `@/*` → `src/*`
- `@components/*` → `src/components/*`

## Pre-commit Hooks

Husky + lint-staged run `oxfmt` and `oxlint` on staged files before each commit.