AI Football Analytics Dev Assistant
An AI development assistant for building and maintaining a football match analysis application with Next.js 14, TypeScript, and AI-powered predictions.
Project Context
You are working on an AI-powered football match analysis application with the following characteristics:
**Framework**: Next.js 14 with App Router**Language**: TypeScript with strict type safety**Styling**: Tailwind CSS**Database**: Prisma ORM**Authentication**: NextAuth.js**Payments**: Stripe subscription model with 7-day free trial**AI**: OpenAI API for match analysis and predictionsKey Features
1. **AI Match Analysis**: AI-driven football match predictions and insights
2. **Subscription Model**: 7-day free trial with Stripe payment processing
3. **Historical Data**: 5-year match history analysis
4. **User Dashboards**: Match comments, predictions, and analytics
5. **Betting Workspace**: Workspace for betting insights
6. **Team Analytics**: Performance metrics and statistics
Development Guidelines
TypeScript Standards
Use TypeScript for all components, API routes, and utilitiesDefine proper interfaces and types for all data structuresAvoid `any` types; use proper type inferenceCreate type-safe API contracts between client and serverUse generics for reusable components and functionsNext.js App Router
Follow App Router conventions (app directory structure)Use server components by default; mark client components with `"use client"`Implement proper server-side rendering where appropriateUse `loading.tsx` and `error.tsx` for loading and error statesLeverage route groups and parallel routes when neededComponent Architecture
Place reusable UI components in `/src/components`Follow component composition patternsCreate small, focused components with single responsibilitiesImplement proper prop typing with TypeScript interfacesUse React hooks following best practices (dependency arrays, memoization)Styling with Tailwind
Use Tailwind CSS utility classes for all stylingImplement responsive design using Tailwind breakpointsCreate custom Tailwind configurations for brand colors and spacingUse `cn()` utility for conditional class namesFollow mobile-first responsive designAPI Development
Use Next.js API routes in the `app/api` directoryImplement proper authentication middleware with NextAuthUse Prisma for all database operationsFollow RESTful API design principlesReturn proper HTTP status codes and error messagesImplement request validation and sanitizationDatabase with Prisma
Define clear Prisma schema modelsUse Prisma Client for type-safe database queriesImplement proper relations between modelsUse transactions for complex operationsHandle database errors gracefullyAuthentication
Implement NextAuth.js for user authenticationProtect routes and API endpoints requiring authenticationHandle session management properlyImplement role-based access control if neededStripe Integration
Configure Stripe subscription model with 7-day free trialHandle webhook events for subscription lifecycleImplement proper error handling for payment failuresSecure Stripe API keys and webhook secretsError Handling
Implement comprehensive error boundariesProvide user-friendly error messagesLog errors appropriately for debuggingHandle loading and error states in UI componentsUse try-catch blocks in async operationsAccessibility
Follow WCAG accessibility guidelinesUse semantic HTML elementsImplement proper ARIA labels where neededEnsure keyboard navigation worksTest with screen readersPerformance
Optimize images with Next.js Image componentImplement code splitting and lazy loadingUse React.memo and useMemo for expensive computationsMinimize bundle sizeImplement proper caching strategiesCode Examples
When generating code, follow these patterns:
**Server Component (default):**
```typescript
import { prisma } from '@/lib/prisma'
interface Match {
id: string
homeTeam: string
awayTeam: string
}
export default async function MatchList() {
const matches = await prisma.match.findMany()
return (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{matches.map((match) => (
<MatchCard key={match.id} match={match} />
))}
</div>
)
}
```
**Client Component:**
```typescript
'use client'
import { useState } from 'react'
interface PredictionProps {
matchId: string
}
export function PredictionForm({ matchId }: PredictionProps) {
const [prediction, setPrediction] = useState('')
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
// Implementation
}
return (
<form onSubmit={handleSubmit} className="space-y-4">
{/* Form fields */}
</form>
)
}
```
**API Route:**
```typescript
import { NextRequest, NextResponse } from 'next/server'
import { getServerSession } from 'next-auth'
import { prisma } from '@/lib/prisma'
export async function POST(req: NextRequest) {
try {
const session = await getServerSession()
if (!session) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
}
const body = await req.json()
// Database operation
const result = await prisma.prediction.create({
data: body
})
return NextResponse.json(result)
} catch (error) {
return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
}
}
```
Project Structure
```
/src
/app # Next.js App Router
/api # API routes
/(routes) # Application routes
layout.tsx # Root layout
/components # Reusable UI components
/lib # Utilities and configurations
/prisma.ts # Prisma client
/stripe.ts # Stripe configuration
/openai.ts # OpenAI configuration
/types # TypeScript type definitions
```
Important Considerations
Always validate user input on both client and serverImplement proper rate limiting for AI analysis endpointsCache AI predictions when appropriate to reduce API costsHandle subscription status checks before showing premium featuresImplement proper loading states for AI-generated contentUse optimistic UI updates for better user experienceTest subscription flows thoroughly (trial, active, expired)Secure all API keys and sensitive environment variablesWhen assisting with this project, prioritize type safety, user experience, performance, and security.