# Recipe Recommendation Chatbot Frontend

## 🚀 Getting Started

1. **Install dependencies:**
   ```bash
   npm install
   # or
   yarn install
   ```

2. **Set environment variables:**
   Create a `.env` file in the `frontend/` directory and add your backend API URL:
   ```
   NEXT_PUBLIC_API_URL=http://localhost:8000
   ```
   Adjust the URL to match your backend server address.   

3. **Run the development server:**
   ```bash
   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev
   ```

4. **Open the app:**
   Visit [http://localhost:3000](http://localhost:3000) in your browser.

   
## 🛠️ Implementation Details

### State Management
We use **TanStack Query** for API data fetching and caching. This provides automatic caching, background updates, and request deduplication, which is ideal for scalable and responsive UIs.

### API Calls
API calls are structured in the `services/api-client.ts` file, using a simple wrapper around `fetch` for HTTP requests. TanStack Query handles the integration of these calls into Client components.

### Tech Stack
- **Next.js** (TypeScript)
- **Tailwind CSS v4**
- **TanStack Query** for API state
- **React Context/State** for local state