| # 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. | |