# Frontend Application

Next.js frontend application for Yannick Vignon's portfolio.

## 🚀 Quick Start

```bash
# Install dependencies
pnpm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local and add your Strapi API token

# Run development server
pnpm dev
```

Visit [http://localhost:3000](http://localhost:3000)

## 📦 Tech Stack

- **Next.js 16** - React framework
- **React 19** - UI library
- **TypeScript** - Type safety
- **Tailwind CSS** - Styling
- **Axios** - HTTP client for API requests

## 🔧 Configuration

### Environment Variables

See [ENV.md](./ENV.md) for detailed environment variable documentation.

Required variables:
- `NEXT_PUBLIC_API_URL` - Strapi API URL
- `NEXT_PUBLIC_SITE_URL` - Frontend URL
- `NEXT_PUBLIC_STRAPI_TOKEN` - Strapi API token (required for API access)

### Strapi Integration

See [API.md](./API.md) for detailed API integration documentation.

The app uses axios with interceptors to communicate with Strapi:
- Automatic authorization headers
- Request/response logging (dev mode)
- Centralized error handling

## 📁 Project Structure

```
src/
├── app/                    # Next.js app directory
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home page
│   └── globals.css        # Global styles
├── components/            # React components
│   └── VideoBackground.tsx # Example Strapi integration
├── lib/                   # Utilities and configuration
│   ├── axios.ts          # Axios instance with interceptors
│   └── env.ts            # Environment variables helper
├── services/             # API service layer
│   └── strapi.ts        # Strapi API services
└── types/               # TypeScript type definitions
    └── strapi.ts       # Strapi types
```

## 📚 Documentation

- [ENV.md](./ENV.md) - Environment variables guide
- [API.md](./API.md) - API integration documentation
- [SETUP_SUMMARY.md](./SETUP_SUMMARY.md) - Setup summary and quick reference

## 🛠️ Available Scripts

```bash
# Development server
pnpm dev

# Production build
pnpm build

# Start production server
pnpm start

# Lint code
pnpm lint
```

## 🔗 Integration with Strapi

This frontend integrates with the Strapi backend located in `packages/strapi`.

### Setup Steps:

1. **Start Strapi backend**:
   ```bash
   cd ../strapi
   pnpm dev
   ```

2. **Get API token**:
   - Go to http://localhost:1337/admin
   - Settings → API Tokens
   - Create new token
   - Copy to `.env.local`

3. **Start frontend**:
   ```bash
   pnpm dev
   ```

### Example Usage:

```typescript
import { getVideoUrl, getMediaUrl } from '@/services/strapi';

// Fetch video data from Strapi
const videoData = await getVideoUrl();

// Get full media URL
const url = getMediaUrl(videoData?.background);
```

## 🎨 Features

- ✅ Environment variable management
- ✅ Axios with automatic auth headers
- ✅ TypeScript types for Strapi
- ✅ Request/response interceptors
- ✅ Error handling
- ✅ Media URL helpers
- ✅ Development logging

## 🐛 Troubleshooting

### Common Issues

**"Unauthorized" error**
- Check `NEXT_PUBLIC_STRAPI_TOKEN` is set in `.env.local`
- Restart dev server after changing env vars
- Verify token is valid in Strapi admin

**"No video data found"**
- Ensure content is published in Strapi
- Check Strapi permissions for the endpoint
- Verify Strapi is running

**CORS errors**
- Check Strapi CORS configuration
- Ensure frontend URL is allowed in Strapi

See [API.md](./API.md) for more troubleshooting tips.

## 📝 Adding New Features

### Adding a New Strapi Endpoint

1. Define types in `src/services/strapi.ts`
2. Create service function
3. Use in components

Example:

```typescript
// 1. Define type
export interface Article {
  id: number;
  title: string;
  content: string;
}

// 2. Create service
export async function getArticles() {
  const response = await axiosInstance.get('/api/articles');
  return response.data.data;
}

// 3. Use in component
const articles = await getArticles();
```

## 🚢 Deployment

Before deploying to production:

1. Set environment variables on your hosting platform
2. Remove or disable development logging
3. Build the application: `pnpm build`
4. Test the production build: `pnpm start`

## 📄 License

Private project for Yannick Vignon