File size: 4,142 Bytes
b8b7791 f201243 addcf34 f201243 |
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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
# PsyAdGenesis - Frontend
**Design ads that stop the scroll.**
Modern Next.js dashboard for generating and managing ad creatives for Home Insurance and GLP-1 niches.
## Features
- **Single Ad Generation**: Generate individual ads with randomized strategies
- **Batch Generation**: Create multiple ads at once for testing
- **Matrix System**: Generate ads using specific angle × concept combinations
- **Gallery**: Browse, filter, and manage all generated ads
- **Testing Matrix Builder**: Create systematic testing matrices
- **Export**: Download images, export JSON/CSV, copy ad copy
## Tech Stack
- **Next.js 16** with App Router
- **TypeScript** for type safety
- **Tailwind CSS** for styling
- **Zustand** for state management
- **React Hook Form** + **Zod** for form validation
- **Axios** for API calls
- **React Hot Toast** for notifications
## Getting Started
### Prerequisites
- Node.js 18+ and npm
- Backend API running on `http://localhost:8000` (or configure `NEXT_PUBLIC_API_URL`)
### Installation
```bash
# Install dependencies
npm install
# Run development server
npm run dev
```
The app will be available at `http://localhost:3000`
### Environment Variables
Create a `.env.local` file:
```env
NEXT_PUBLIC_API_URL=http://localhost:8000
```
## Project Structure
```
frontend/
├── app/ # Next.js pages (App Router)
│ ├── page.tsx # Dashboard
│ ├── generate/ # Generation pages
│ ├── gallery/ # Gallery pages
│ └── matrix/ # Matrix system pages
├── components/ # React components
│ ├── ui/ # Base UI components
│ ├── generation/ # Generation components
│ ├── gallery/ # Gallery components
│ └── matrix/ # Matrix components
├── lib/ # Utilities
│ ├── api/ # API client
│ ├── hooks/ # Custom hooks
│ └── utils/ # Utility functions
├── store/ # Zustand stores
├── types/ # TypeScript types
└── styles/ # Global styles
```
## Available Scripts
- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run start` - Start production server
- `npm run lint` - Run ESLint
## API Integration
The frontend integrates with the FastAPI backend. All API endpoints are defined in `lib/api/endpoints.ts` and use the axios client in `lib/api/client.ts`.
## Features Overview
### Dashboard
- Quick stats (total ads, by niche, system status)
- Recent ads preview
- Quick action buttons
### Generation
- **Single**: Generate one ad using a random angle × concept combination with configurable image count
- **Batch**: Generate multiple ads (1-20) with 1-3 images each, each using random angle × concept combinations
- **Matrix**: Select specific angle and concept combinations for targeted generation
### Gallery
- Grid view of all ads
- Filter by niche, method, search
- Pagination
- Bulk actions (select, delete)
- Ad detail view with full copy and metadata
### Matrix System
- Browse all 100 angles and 100 concepts
- View compatibility between angles and concepts
- Generate testing matrices for systematic optimization
- Export matrices as JSON/CSV
## Development
### Adding New Components
1. Create component in appropriate `components/` subdirectory
2. Use TypeScript for type safety
3. Follow existing patterns for styling (Tailwind CSS)
4. Use UI components from `components/ui/`
### State Management
Use Zustand stores in `store/`:
- `generationStore` - Current generation state
- `galleryStore` - Gallery filters, pagination, selection
- `matrixStore` - Matrix angles, concepts, selections
### API Calls
All API calls should use functions from `lib/api/endpoints.ts` which provide:
- Type safety
- Error handling
- Automatic toast notifications
## Building for Production
```bash
npm run build
npm start
```
The production build will be optimized and ready for deployment.
## License
Same as the main project.
|