frontend/README.md

Recipe Recommendation Chatbot Frontend

🚀 Getting Started

1. Install dependencies:

   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:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev
   

4. Open the app: Visit 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