File size: 1,222 Bytes
c59d808 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
# 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
|