🏗️ Project Structure

src/
├── app/
│   ├── components/
│   │   ├── header/
│   │   ├── footer/
│   │   ├── content-form/
│   │   └── output-display/
│   ├── services/
│   │   └── content.service.ts
│   ├── app.component.ts
│   └── app.module.ts
├── styles.scss
└── assets/

🔧 Configuration

Payload Structure

The application sends the following payload to the AI service:

interface ContentPayload {
  topic: string;        // Main topic/subject
  contentType: string;  // blog, social, product, email
  tone: string;         // professional, casual, friendly, etc.
  keywords: string;     // Comma-separated keywords
}

🎨 Styling

The project uses pure SCSS with a modern design system:

• Color Palette: Indigo primary with carefully selected grays
• Typography: Clean, readable fonts with proper hierarchy
• Layout: Flexbox and CSS Grid for responsive design
• Animations: Smooth transitions and hover effects
• Components: Card-based layout with subtle shadows

🧩 Components

ContentFormComponent

• Handles user input for topic, keywords, content type, and tone
• Integrates with ContentService for AI generation
• Provides real-time validation and loading states

OutputDisplayComponent

• Displays generated content with syntax highlighting
• Includes copy-to-clipboard functionality
• Shows loading and empty states

HeaderComponent & FooterComponent

• Clean branding and navigation
• Responsive design elements

📱 Responsive Design

The application is fully responsive with breakpoints:

• Mobile: < 768px (stacked layout)
• Tablet: 768px - 1024px (2-column grid)
• Desktop: > 1024px (3-column grid for selections)

🔨 Available Scripts

🌟 Modern Angular Features

• Angular 21: Latest Angular version with enhanced performance and features
• Standalone Components: Using modern standalone architecture
• New Control Flow: Utilizing @if and @for syntax
• Signals: Modern reactive programming (where applicable)
• Dependency Injection: Using inject() function
• TypeScript 5.9: Fully typed for better development experience

🔧 Development

Adding New Content Types

1. Update the contentTypes array in ContentFormComponent
2. Add corresponding generation logic in your backend service
3. Update TypeScript interfaces if needed

Adding New Tones

1. Add to the toneTypes array in ContentFormComponent
2. Ensure your AI service handles the new tone

Customizing Styles

Modify the SCSS variables in component files or create a global theme file.

🚀 Deployment

Build for Production

ng build --configuration=production

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Angular Team - For the amazing framework
• Google Genkit - For AI integration capabilities
• Gemini AI - For powerful content generation

📞 Support

If you have any questions or need help with setup, please open an issue in the GitHub repository.

Built with ❤️ using Angular and powered by AI