# Happy Homes

A modern dating application built with Next.js, TypeScript, Tailwind CSS, and shadcn/ui components.

## Tech Stack

- **Framework**: [Next.js](https://nextjs.org/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
- **UI Components**: [shadcn/ui](https://ui.shadcn.com/)
- **Code Quality**:
  - [ESLint](https://eslint.org/)
  - [Prettier](https://prettier.io/)
  - [Husky](https://typicode.github.io/husky/)
  - [lint-staged](https://github.com/okonet/lint-staged)

## Getting Started

### Prerequisites

- Node.js (version 18 or later)
- npm or yarn

### Installation

1. Clone the repository:

   ```bash
   git clone https://link-to-project
   cd happy-homes
   ```

2. Install dependencies:

   ```bash
   npm install
   ```

3. Start the development server:

   ```bash
   npm run dev
   ```

4. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.

## Project Structure

```
happy-homes/
├── .husky/                  # Git hooks for code quality
│   ├── pre-commit           # Runs before commits
│   └── post-merge           # Runs after pulling updates
├── public/                  # Static assets
├── src/
│   ├── app/                 # Next.js App Router
│   ├── components/          # UI components
│   │   └── ui/              # shadcn/ui components
│   └── lib/                 # Utility functions
├── .eslintrc.json          # ESLint configuration
├── .prettierrc.json        # Prettier configuration
├── next.config.js          # Next.js configuration
├── package.json            # Project dependencies and scripts
├── tailwind.config.js      # Tailwind CSS configuration
└── tsconfig.json           # TypeScript configuration
```

## Code Quality Tools

### ESLint

ESLint is configured to enforce code quality and catch potential issues:

```json
{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ]
}
```

### Prettier

Prettier is set up for consistent code formatting:

```json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "plugins": ["prettier-plugin-tailwindcss"]
}
```

### Husky & lint-staged

The project uses Git hooks to enforce code quality before commits and after merges:

- **pre-commit**: Runs ESLint and Prettier on staged files
- **post-merge**: Checks all files after pulling updates

Configuration in `package.json`:

```json
"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.{ts,tsx}": [
    "tsc --noEmit"
  ],
  "*.{json,css,md}": [
    "prettier --write"
  ]
}
```

## Available Scripts

- `npm run dev` - Start development server with Turbopack
- `npm run build` - Build the application for production
- `npm run start` - Start the production server
- `npm run lint` - Check for ESLint issues
- `npm run lint:fix` - Fix ESLint issues automatically
- `npm run format` - Format all files with Prettier
- `npm run check-format` - Check if files are formatted properly

## TypeScript Configuration

TypeScript is configured with strict type checking:

```json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noEmit": true
  }
}
```

## Adding New Components

You can easily add new shadcn/ui components:

```bash
npx shadcn@latest add [component-name]
```

Example:

```bash
npx shadcn-ui add button
npx shadcn-ui add card
npx shadcn-ui add dialog
```

## Contributing

1. Make sure your code passes all checks (ESLint, Prettier, TypeScript)
2. Commit your changes - the pre-commit hook will automatically format and lint them
3. Create a pull request to staging branch
