# Setup Summary - Strapi Integration

## ✅ What Was Installed

- **axios** (^1.13.2) - HTTP client for API requests

## 📁 Files Created

### Configuration Files
- `.env.example` - Template for environment variables
- `.env.local` - Local environment variables (gitignored)

### Core Integration Files
- `src/lib/axios.ts` - Axios instance with interceptors
- `src/lib/env.ts` - Environment variables helper (updated with strapiToken)
- `src/services/strapi.ts` - Strapi API service layer
- `src/types/strapi.ts` - TypeScript types for Strapi

### Components
- `src/components/VideoBackground.tsx` - Example component fetching video data

### Documentation
- `ENV.md` - Environment variables guide
- `API.md` - API integration documentation
- `SETUP_SUMMARY.md` - This file

## 🔧 Configuration Updates

### `.gitignore`
Added rules to ignore environment files:
```
.env
.env*.local
.env.local
!.env.example
```

### `src/app/page.tsx`
Updated to demonstrate:
- Environment variable usage
- Strapi API integration
- Video data fetching

## 🚀 Quick Start

### 1. Set Up Environment Variables

```bash
cd packages/front
cp .env.example .env.local
```

Edit `.env.local` and add your Strapi token:
```env
NEXT_PUBLIC_API_URL=http://localhost:1337
NEXT_PUBLIC_SITE_URL=http://localhost:3000
NEXT_PUBLIC_STRAPI_TOKEN=your-strapi-api-token-here
```

### 2. Get Strapi API Token

1. Start Strapi: `cd packages/strapi && pnpm dev`
2. Go to: http://localhost:1337/admin
3. Navigate to: Settings → API Tokens
4. Create new token with appropriate permissions
5. Copy token to `.env.local`

### 3. Start Development Server

```bash
cd packages/front
pnpm dev
```

Visit http://localhost:3000 to see the integration in action!

## 📚 Key Features

### Axios Interceptors
- ✅ Automatic Authorization header injection
- ✅ Request/response logging (development only)
- ✅ Centralized error handling
- ✅ Specific error messages for common status codes

### Type Safety
- ✅ Full TypeScript support
- ✅ Strapi response types
- ✅ Media/file types
- ✅ Error types

### Service Layer
- ✅ `getVideoUrl()` - Fetch video-url data
- ✅ `getMediaUrl()` - Get full media URLs
- ✅ `getMediaFormatUrl()` - Get specific format URLs
- ✅ Easy to extend with new endpoints

## 🔍 How It Works

1. **Component** calls service function (e.g., `getVideoUrl()`)
2. **Service** uses axios instance to make API request
3. **Axios interceptor** adds Authorization header automatically
4. **Strapi** processes request and returns data
5. **Response interceptor** logs response (dev mode)
6. **Service** returns typed data to component

## 📝 Adding New Endpoints

To integrate a new Strapi content type:

1. **Define types** in `src/services/strapi.ts`:
```typescript
export interface MyContentType {
  id: number;
  title: string;
  // ... fields
}
```

2. **Create service function**:
```typescript
export async function getMyContent() {
  const response = await axiosInstance.get('/api/my-content', {
    params: { populate: '*' }
  });
  return response.data.data;
}
```

3. **Use in component**:
```typescript
import { getMyContent } from '@/services/strapi';

const data = await getMyContent();
```

## 🐛 Troubleshooting

### Token Issues
- Restart dev server after changing `.env.local`
- Verify token in Strapi admin panel
- Check token hasn't expired

### CORS Errors
- Ensure Strapi allows your frontend URL
- Check `packages/strapi/config/middlewares.ts`

### No Data Returned
- Verify content is published in Strapi
- Check Strapi permissions for the endpoint
- Look at browser console for detailed error logs

## 📖 Documentation

- **ENV.md** - Environment variables guide
- **API.md** - Detailed API integration documentation
- **Strapi Docs** - https://docs.strapi.io/

## 🎯 Next Steps

1. Configure Strapi API token with appropriate permissions
2. Test the video-url endpoint
3. Add more service functions as needed
4. Customize error handling for your use case
5. Remove development logging before production deployment