Consolidate docs: move design/docs files to docs folder
- Moved DESIGN-GUIDE.md → docs/30-FRONTEND/DESIGN-GUIDE.md - Moved frontend/DESIGN_SYSTEM.md → docs/30-FRONTEND/DESIGN-TOKENS.md - Moved IGNY8-APP.md → docs/00-SYSTEM/IGNY8-APP.md - Moved fixes-kb.md → docs/90-REFERENCE/FIXES-KB.md - Moved FINAL_PRELAUNCH.md → docs/plans/FINAL-PRELAUNCH.md - Updated all references in .rules, README.md, docs/INDEX.md - Updated ESLint plugin documentation comments - Root folder now only contains: .rules, CHANGELOG.md, README.md
This commit is contained in:
IGNY8 VPS (Salman)
383
docs/00-SYSTEM/IGNY8-APP.md
Normal file
383
docs/00-SYSTEM/IGNY8-APP.md
Normal file
@@ -0,0 +1,383 @@
|
||||
# IGNY8 - AI-Powered SEO Content Platform
|
||||
|
||||
**Version:** 1.1.0
|
||||
**Last Updated:** December 25, 2025
|
||||
**Status:** Production Ready
|
||||
|
||||
---
|
||||
|
||||
## What is IGNY8?
|
||||
|
||||
IGNY8 is an enterprise-grade AI content platform that transforms keyword research into published, SEO-optimized articles at scale. The platform automates the entire content lifecycle—from discovering keywords to publishing polished articles with AI-generated images—reducing what typically takes days of manual work into hours.
|
||||
|
||||
**The Problem:** Creating SEO content at scale requires keyword research, content planning, writing, image creation, optimization, and publishing—a process that's labor-intensive and inconsistent.
|
||||
|
||||
**The Solution:** IGNY8 provides an end-to-end automated pipeline where AI handles clustering, ideation, writing, and image generation while you maintain editorial control.
|
||||
|
||||
---
|
||||
|
||||
## Platform Architecture
|
||||
|
||||
| Aspect | Details |
|
||||
|--------|---------|
|
||||
| **Type** | Full-stack SaaS Platform |
|
||||
| **Architecture** | Multi-tenant with complete data isolation |
|
||||
| **Target Users** | Content marketers, SEO agencies, digital publishers |
|
||||
| **Deployment** | Docker-based, cloud-hosted |
|
||||
| **Pricing Model** | Credits + Monthly subscription plans |
|
||||
|
||||
---
|
||||
|
||||
## Core Workflow
|
||||
|
||||
IGNY8 follows a structured 8-stage content pipeline:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ SETUP WORKFLOW │
|
||||
│ ───── ──────── │
|
||||
│ Sites → Keywords → Clusters → Ideas → Tasks → Content → Images → Published │
|
||||
│ ↑ ↑ ↑ │
|
||||
│ Configure AI Groups AI Writes │
|
||||
│ WordPress Related Full Articles │
|
||||
│ Keywords + SEO Meta │
|
||||
└─────────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Manual Mode
|
||||
Walk through each stage with full control—review and edit at every step.
|
||||
|
||||
### Automation Mode
|
||||
Configure once, let IGNY8 process all 7 stages automatically on a schedule (daily, weekly, or monthly). Content lands in your review queue ready for approval.
|
||||
|
||||
---
|
||||
|
||||
## Feature Deep-Dive
|
||||
|
||||
### 1. Keyword Management (Planner)
|
||||
|
||||
**Import Options:**
|
||||
- Upload CSV with thousands of keywords
|
||||
- Browse 50+ industries of pre-curated seed keywords
|
||||
- Filter by country, difficulty, search volume
|
||||
|
||||
**AI Clustering:**
|
||||
- GPT-4 analyzes keyword intent and relationships
|
||||
- Groups related keywords into topical clusters
|
||||
- Enables one comprehensive article per cluster (instead of keyword stuffing)
|
||||
|
||||
**Metrics Tracked:**
|
||||
- Search volume (monthly)
|
||||
- Keyword difficulty (0-100)
|
||||
- CPC (cost-per-click)
|
||||
- Intent classification (informational, commercial, transactional)
|
||||
|
||||
---
|
||||
|
||||
### 2. Content Ideation (Planner)
|
||||
|
||||
**AI-Generated Ideas:**
|
||||
- Each cluster becomes a content brief
|
||||
- Suggested titles, angles, and outlines
|
||||
- Word count recommendations based on competition
|
||||
- Priority scoring by SEO potential
|
||||
|
||||
**Bulk Operations:**
|
||||
- Generate ideas for multiple clusters at once
|
||||
- Queue ideas directly to Writer module
|
||||
- Batch status updates
|
||||
|
||||
---
|
||||
|
||||
### 3. Content Generation (Writer)
|
||||
|
||||
**AI Writing Engine:**
|
||||
- Powered by GPT-4/GPT-4 Turbo
|
||||
- Produces structured articles (H2s, H3s, lists, paragraphs)
|
||||
- SEO-optimized meta titles and descriptions
|
||||
- Configurable length: 500 to 5,000+ words
|
||||
|
||||
**Content Types:**
|
||||
- Blog posts and articles
|
||||
- How-to guides
|
||||
- Product comparisons
|
||||
- Reviews and roundups
|
||||
|
||||
**Customization:**
|
||||
- Custom prompt additions (append to all AI prompts)
|
||||
- Default tone selection (professional, casual, authoritative, etc.)
|
||||
- Default article length preferences
|
||||
|
||||
**Workflow States:**
|
||||
- Queue → Draft → Review → Published
|
||||
- Each stage has dedicated management views
|
||||
|
||||
---
|
||||
|
||||
### 4. Image Generation (Writer)
|
||||
|
||||
**Dual AI Providers:**
|
||||
| Provider | Quality Tier | Best For |
|
||||
|----------|--------------|----------|
|
||||
| DALL-E 2 | Standard | Fast, economical |
|
||||
| DALL-E 3 | Premium | High quality, detailed |
|
||||
| Runware | Best | Alternative variety |
|
||||
|
||||
**Image Types:**
|
||||
- Featured images (hero/thumbnail)
|
||||
- In-article images (embedded in content)
|
||||
- Desktop and mobile sizes (responsive)
|
||||
|
||||
**Smart Features:**
|
||||
- AI extracts image prompts from article content
|
||||
- Negative prompts for style control
|
||||
- Multiple format support (WebP, JPG, PNG)
|
||||
- Configurable max images per article
|
||||
|
||||
---
|
||||
|
||||
### 5. Automation Pipeline
|
||||
|
||||
**7-Stage Automated Workflow:**
|
||||
```
|
||||
Stage 1: Process new keywords
|
||||
Stage 2: AI cluster keywords
|
||||
Stage 3: Generate content ideas
|
||||
Stage 4: Create writer tasks
|
||||
Stage 5: Generate article content
|
||||
Stage 6: Extract image prompts
|
||||
Stage 7: Generate images → Review queue
|
||||
```
|
||||
|
||||
**Configuration:**
|
||||
- Schedule: Daily, weekly, or monthly runs
|
||||
- Run controls: Start, pause, resume
|
||||
- Credit estimation before running
|
||||
- Real-time progress tracking
|
||||
- Activity log and run history
|
||||
|
||||
---
|
||||
|
||||
### 6. WordPress Integration
|
||||
|
||||
**Publishing:**
|
||||
- One-click publish from Review tab
|
||||
- Direct WordPress REST API integration
|
||||
- Supports multiple WordPress sites per account
|
||||
|
||||
**Synchronization:**
|
||||
- Two-way content sync (import/export)
|
||||
- Category and tag mapping
|
||||
- Featured image upload
|
||||
- Post type configuration (posts, pages, custom)
|
||||
|
||||
**Setup:**
|
||||
- Site URL and REST API authentication
|
||||
- Content type mapping in Site Settings
|
||||
- Auto-publish toggle (skip review step)
|
||||
- Auto-sync toggle (keep WordPress updated)
|
||||
|
||||
---
|
||||
|
||||
### 7. Team & Account Management
|
||||
|
||||
**User Roles:**
|
||||
| Role | Permissions |
|
||||
|------|-------------|
|
||||
| Admin | Full access, billing, team management |
|
||||
| Manager | Content + billing view, no team management |
|
||||
| Editor | AI content, clusters, tasks |
|
||||
| Viewer | Read-only dashboards |
|
||||
|
||||
**Team Features:**
|
||||
- Invite team members by email
|
||||
- Remove members
|
||||
- Role display (editing roles coming soon)
|
||||
|
||||
**Account Settings:**
|
||||
- Organization name and billing address
|
||||
- Tax ID / VAT number
|
||||
- Billing email
|
||||
|
||||
---
|
||||
|
||||
### 8. Usage & Billing
|
||||
|
||||
**Credit System:**
|
||||
| Operation | Typical Credits |
|
||||
|-----------|-----------------|
|
||||
| Keyword clustering (batch) | 10 |
|
||||
| Content idea generation | 2 |
|
||||
| Article (per 100 words) | 5 |
|
||||
| Image (standard) | 3 |
|
||||
| Image (premium/best) | 5 |
|
||||
|
||||
**Usage Tracking:**
|
||||
- Real-time credit balance
|
||||
- Monthly usage vs. limits
|
||||
- Transaction history
|
||||
- Hard limits (sites, users, keywords, clusters)
|
||||
- Monthly limits (ideas, words, images)
|
||||
|
||||
**Subscription Plans:**
|
||||
| Plan | Sites | Users | Credits/Month | Best For |
|
||||
|------|-------|-------|---------------|----------|
|
||||
| Free | 1 | 1 | 100 | Trial/Evaluation |
|
||||
| Starter | 3 | 3 | 1,000 | Individual creators |
|
||||
| Growth | 10 | 10 | 5,000 | Small teams |
|
||||
| Scale | Unlimited | Unlimited | 25,000 | Agencies |
|
||||
|
||||
---
|
||||
|
||||
## Module Status
|
||||
|
||||
| Module | Status | Location |
|
||||
|--------|--------|----------|
|
||||
| **Dashboard** | ✅ Active | `/` |
|
||||
| **Add Keywords** | ✅ Active | `/setup/add-keywords` |
|
||||
| **Content Settings** | ✅ Active | `/account/content-settings` |
|
||||
| **Sites** | ✅ Active | `/sites` |
|
||||
| **Thinker** | ✅ Active (Admin) | `/thinker/prompts` |
|
||||
| **Planner** | ✅ Active | `/planner/keywords` |
|
||||
| **Writer** | ✅ Active | `/writer/tasks` |
|
||||
| **Automation** | ✅ Active | `/automation` |
|
||||
| **Account Settings** | ✅ Active | `/account/settings` |
|
||||
| **Plans & Billing** | ✅ Active | `/account/plans` |
|
||||
| **Usage** | ✅ Active | `/account/usage` |
|
||||
| **AI Models** | ✅ Active (Admin) | `/settings/integration` |
|
||||
| **Help** | ✅ Active | `/help` |
|
||||
| **SiteBuilder** | ❌ Deprecated | Removed - was for site structure generation |
|
||||
| **Linker** | ⏸️ Phase 2 | Internal linking suggestions (disabled by default) |
|
||||
| **Optimizer** | ⏸️ Phase 2 | Content optimization (disabled by default) |
|
||||
|
||||
### Module Status Details
|
||||
|
||||
| Module | Status | Notes |
|
||||
|--------|--------|-------|
|
||||
| **SiteBuilder** | ❌ Deprecated | Code exists but feature is removed. Marked for cleanup. |
|
||||
| **Linker** | ⏸️ Phase 2 | Feature flag: `linker_enabled`. Available but disabled by default. |
|
||||
| **Optimizer** | ⏸️ Phase 2 | Feature flag: `optimizer_enabled`. Available but disabled by default. |
|
||||
|
||||
To enable Phase 2 modules, update via Django Admin:
|
||||
- `GlobalModuleSettings` (pk=1) for platform-wide settings
|
||||
- `ModuleEnableSettings` for per-account settings
|
||||
|
||||
---
|
||||
|
||||
## Navigation Structure
|
||||
|
||||
```
|
||||
Sidebar Menu
|
||||
├── Dashboard
|
||||
├── SETUP
|
||||
│ ├── Add Keywords
|
||||
│ ├── Content Settings
|
||||
│ ├── Sites (if enabled)
|
||||
│ └── Thinker (admin only, if enabled)
|
||||
├── WORKFLOW
|
||||
│ ├── Planner (Keywords → Clusters → Ideas)
|
||||
│ ├── Writer (Queue → Drafts → Images → Review → Published)
|
||||
│ ├── Automation
|
||||
│ ├── Linker (if enabled)
|
||||
│ └── Optimizer (if enabled)
|
||||
├── ACCOUNT
|
||||
│ ├── Account Settings (Account → Profile → Team)
|
||||
│ ├── Plans & Billing (Plan → Upgrade → History)
|
||||
│ ├── Usage (Limits → Credit History → API Activity)
|
||||
│ └── AI Models (admin only)
|
||||
└── HELP
|
||||
└── Help & Docs
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Technical Stack
|
||||
|
||||
| Layer | Technology |
|
||||
|-------|------------|
|
||||
| **Backend** | Django 5.x, Django REST Framework, Python 3.11+ |
|
||||
| **Frontend** | React 19, TypeScript, Vite, TailwindCSS |
|
||||
| **Database** | PostgreSQL 15+ |
|
||||
| **Cache/Sessions** | Redis |
|
||||
| **Task Queue** | Celery + Celery Beat |
|
||||
| **AI Services** | OpenAI GPT-4, DALL-E 3, Runware |
|
||||
| **Deployment** | Docker, Docker Compose |
|
||||
|
||||
---
|
||||
|
||||
## Security
|
||||
|
||||
- **Data Isolation:** Complete multi-tenant separation at database level
|
||||
- **Authentication:** JWT tokens with Redis session management
|
||||
- **Encryption:** Data encrypted at rest and in transit
|
||||
- **Access Control:** Role-based permissions per account
|
||||
- **Session Security:** Secure cookie handling, session integrity checks
|
||||
|
||||
---
|
||||
|
||||
## Current Limitations & Known Issues
|
||||
|
||||
**Payment Processing:**
|
||||
- Stripe/PayPal pending production credentials
|
||||
- Manual payment methods available
|
||||
|
||||
**Pending Backend Implementation:**
|
||||
- Content Generation settings (append prompt, tone, length) - UI exists, API pending
|
||||
- Publishing settings (auto-publish, sync) - UI exists, API pending
|
||||
- Profile settings save - UI exists, API pending
|
||||
- Password change functionality
|
||||
- API Activity tracking (currently placeholder data)
|
||||
|
||||
**Disabled Modules:**
|
||||
- Linker (internal linking) - Available but disabled
|
||||
- Optimizer (content optimization) - Available but disabled
|
||||
|
||||
---
|
||||
|
||||
## Getting Started
|
||||
|
||||
### For New Users
|
||||
1. Create account and verify email
|
||||
2. Create your first site (industry + sectors)
|
||||
3. Connect WordPress (optional)
|
||||
4. Add keywords from seed database or import CSV
|
||||
5. Run AI clustering on keywords
|
||||
6. Generate content ideas from clusters
|
||||
7. Queue ideas to Writer
|
||||
8. Generate content and images
|
||||
9. Review and publish
|
||||
|
||||
### For Admins
|
||||
1. Configure AI Models (OpenAI API key, Runware key)
|
||||
2. Customize prompts in Thinker module
|
||||
3. Set up global module settings
|
||||
4. Configure automation schedules
|
||||
|
||||
---
|
||||
|
||||
## Documentation
|
||||
|
||||
| Document | Location |
|
||||
|----------|----------|
|
||||
| Technical Docs | `/docs/INDEX.md` |
|
||||
| API Reference | `/docs/20-API/` |
|
||||
| Pre-Launch Audit | `/PRE-LAUNCH-AUDIT.md` |
|
||||
| Changelog | `/CHANGELOG.md` |
|
||||
|
||||
---
|
||||
|
||||
## Version History
|
||||
|
||||
| Version | Date | Highlights |
|
||||
|---------|------|------------|
|
||||
| **1.1.0** | Dec 25, 2025 | UX overhaul, page consolidation, pre-launch audit |
|
||||
| 1.0.5 | Dec 12, 2025 | Purchase Credits tab |
|
||||
| 1.0.4 | Dec 12, 2025 | Credit Activity tab |
|
||||
| 1.0.3 | Dec 12, 2025 | Usage Limits improvements |
|
||||
| 1.0.2 | Dec 12, 2025 | Design system enforcement |
|
||||
| 1.0.1 | Dec 12, 2025 | Plan limits UI |
|
||||
| 1.0.0 | Dec 12, 2025 | Initial production release |
|
||||
|
||||
---
|
||||
|
||||
*For detailed technical implementation, see the `/docs` folder. For known issues and improvement roadmap, see `/PRE-LAUNCH-AUDIT.md`.*
|
||||
241
docs/30-FRONTEND/DESIGN-GUIDE.md
Normal file
241
docs/30-FRONTEND/DESIGN-GUIDE.md
Normal file
@@ -0,0 +1,241 @@
|
||||
# IGNY8 Design System Guide
|
||||
|
||||
> **Single Source of Truth for UI Components**
|
||||
>
|
||||
> 🔒 **STYLE LOCKED** - This design system is enforced by ESLint. All frontend code must comply.
|
||||
|
||||
**Last Updated:** January 2, 2026
|
||||
|
||||
---
|
||||
|
||||
## Quick Links
|
||||
|
||||
| Resource | Path | Description |
|
||||
|----------|------|-------------|
|
||||
| **Component System** | [COMPONENT-SYSTEM.md](COMPONENT-SYSTEM.md) | Full component reference with props, examples, and usage |
|
||||
| **Design Tokens Doc** | [DESIGN-TOKENS.md](DESIGN-TOKENS.md) | Detailed token documentation |
|
||||
| **ESLint Plugin** | `frontend/eslint/` | Custom rules enforcing design system |
|
||||
| **Live Demo** | `/ui-elements` route | Interactive component showcase |
|
||||
| **CSS Tokens** | `frontend/src/styles/design-system.css` | CSS variables source file |
|
||||
| **Icons** | `frontend/src/icons/` | All SVG icons |
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Color System (CRITICAL!)
|
||||
|
||||
### Only 6 Base Colors in Entire System
|
||||
|
||||
All colors derive from 6 primary hex values defined in `design-system.css`:
|
||||
|
||||
| Token | Hex | Purpose |
|
||||
|-------|-----|---------|
|
||||
| `--color-primary` | #0077B6 | Brand Blue - main CTA, links |
|
||||
| `--color-success` | #2CA18E | Success Green - confirmations |
|
||||
| `--color-warning` | #D9A12C | Warning Amber - alerts |
|
||||
| `--color-danger` | #A12C40 | Danger Red - errors, destructive |
|
||||
| `--color-purple` | #2C40A1 | Purple - premium features |
|
||||
| `--color-gray-base` | #667085 | Neutral gray - text, borders |
|
||||
|
||||
### Tailwind Color Utilities
|
||||
|
||||
**⚠️ Tailwind default colors are DISABLED!** Only use:
|
||||
|
||||
```css
|
||||
/* ✅ AVAILABLE */
|
||||
brand-50 through brand-950 /* Primary blue scale */
|
||||
gray-25 through gray-950 /* Neutral scale */
|
||||
success-25 through success-950 /* Green scale */
|
||||
error-25 through error-950 /* Red scale */
|
||||
warning-25 through warning-950 /* Amber scale */
|
||||
purple-25 through purple-950 /* Purple scale */
|
||||
|
||||
/* ❌ DISABLED - These will NOT work */
|
||||
blue-*, red-*, green-*, emerald-*, amber-*, indigo-*,
|
||||
pink-*, rose-*, sky-*, teal-*, cyan-*, etc.
|
||||
```
|
||||
|
||||
### Usage Examples
|
||||
|
||||
```tsx
|
||||
// ✅ CORRECT
|
||||
<div className="bg-brand-500 text-white">Primary Button</div>
|
||||
<div className="text-gray-700 bg-gray-50">Card content</div>
|
||||
<Badge tone="success">Active</Badge>
|
||||
<Alert variant="error" message="Failed" />
|
||||
|
||||
// ❌ WRONG
|
||||
<div className="bg-blue-500">...</div> // Default blue disabled
|
||||
<div className="bg-[#0693e3]">...</div> // Hardcoded hex
|
||||
<div style={{ color: '#ff0000' }}>...</div> // Inline style
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Core Principles
|
||||
|
||||
### 1. Use Components, Never Raw HTML
|
||||
|
||||
```tsx
|
||||
// ❌ NEVER
|
||||
<button className="...">Click</button>
|
||||
<input type="text" className="..." />
|
||||
<select className="...">...</select>
|
||||
<textarea className="..."></textarea>
|
||||
|
||||
// ✅ ALWAYS
|
||||
<Button variant="primary">Click</Button>
|
||||
<InputField type="text" label="Name" />
|
||||
<Select options={options} />
|
||||
<TextArea rows={4} />
|
||||
```
|
||||
|
||||
### 2. Import Icons from Central Location
|
||||
|
||||
```tsx
|
||||
// ❌ NEVER
|
||||
import { XIcon } from '@heroicons/react/24/outline';
|
||||
import { Trash } from 'lucide-react';
|
||||
|
||||
// ✅ ALWAYS
|
||||
import { CloseIcon, TrashBinIcon } from '../../icons';
|
||||
```
|
||||
|
||||
### 3. Consistent Sizing
|
||||
|
||||
```tsx
|
||||
// Icons in buttons/badges
|
||||
<Icon className="w-4 h-4" />
|
||||
|
||||
// Standalone icons
|
||||
<Icon className="w-5 h-5" />
|
||||
|
||||
// Large/header icons
|
||||
<Icon className="w-6 h-6" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component Quick Reference
|
||||
|
||||
| Need | Component | Import |
|
||||
|------|-----------|--------|
|
||||
| Action button | `Button` | `components/ui/button/Button` |
|
||||
| Icon-only button | `IconButton` | `components/ui/button/IconButton` |
|
||||
| Text input | `InputField` | `components/form/input/InputField` |
|
||||
| Checkbox | `Checkbox` | `components/form/input/Checkbox` |
|
||||
| Radio | `Radio` | `components/form/input/Radio` |
|
||||
| Dropdown | `Select` | `components/form/Select` |
|
||||
| Multi-line text | `TextArea` | `components/form/input/TextArea` |
|
||||
| Toggle | `Switch` | `components/form/switch/Switch` |
|
||||
| Status label | `Badge` | `components/ui/badge/Badge` |
|
||||
| Container | `Card` | `components/ui/card/Card` |
|
||||
| Popup | `Modal` | `components/ui/modal` |
|
||||
| Loading | `Spinner` | `components/ui/spinner/Spinner` |
|
||||
| Notification | `useToast` | `components/ui/toast/ToastContainer` |
|
||||
|
||||
**→ See [COMPONENT-SYSTEM.md](docs/30-FRONTEND/COMPONENT-SYSTEM.md) for full props and examples**
|
||||
|
||||
---
|
||||
|
||||
## ESLint Enforcement
|
||||
|
||||
### Rules
|
||||
|
||||
| Rule | Level | Action |
|
||||
|------|-------|--------|
|
||||
| `no-raw-button` | warn | Use `Button` or `IconButton` |
|
||||
| `no-raw-input` | warn | Use `InputField`, `Checkbox`, `Radio` |
|
||||
| `no-raw-select` | warn | Use `Select` or `SelectDropdown` |
|
||||
| `no-raw-textarea` | warn | Use `TextArea` |
|
||||
| `no-icon-children` | warn | Use `startIcon`/`endIcon` props instead of icon children |
|
||||
| `no-restricted-imports` | error | Block `@heroicons/*`, `lucide-react`, `@mui/icons-material` |
|
||||
|
||||
### Check Violations
|
||||
|
||||
```bash
|
||||
# Inside container
|
||||
docker exec -it igny8_frontend npm run lint
|
||||
|
||||
# Or directly
|
||||
cd frontend
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Plugin Location
|
||||
|
||||
The custom ESLint plugin is at: `frontend/eslint/eslint-plugin-igny8-design-system.cjs`
|
||||
|
||||
---
|
||||
|
||||
## For AI Agents
|
||||
|
||||
When working on this codebase:
|
||||
|
||||
1. **Read first**: [docs/30-FRONTEND/COMPONENT-SYSTEM.md](docs/30-FRONTEND/COMPONENT-SYSTEM.md)
|
||||
2. **Never use**: `<button>`, `<input>`, `<select>`, `<textarea>` tags
|
||||
3. **Import icons from**: `src/icons` only
|
||||
4. **Verify after changes**: `npm run lint`
|
||||
5. **Reference pages**: Planner and Writer modules use correct patterns
|
||||
|
||||
### Correct Import Paths
|
||||
|
||||
```tsx
|
||||
// From a page in src/pages/
|
||||
import Button from '../components/ui/button/Button';
|
||||
import IconButton from '../components/ui/button/IconButton';
|
||||
import InputField from '../components/form/input/InputField';
|
||||
import { PlusIcon, CloseIcon } from '../icons';
|
||||
|
||||
// From a component in src/components/
|
||||
import Button from '../../components/ui/button/Button';
|
||||
import { PlusIcon } from '../../icons';
|
||||
|
||||
// From a nested component
|
||||
// Adjust ../ based on depth
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
frontend/
|
||||
├── eslint/
|
||||
│ └── eslint-plugin-igny8-design-system.cjs # Custom rules
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ ├── ui/ # Display components
|
||||
│ │ │ ├── button/ # Button, IconButton
|
||||
│ │ │ ├── badge/ # Badge
|
||||
│ │ │ ├── card/ # Card
|
||||
│ │ │ ├── modal/ # Modal
|
||||
│ │ │ └── ...
|
||||
│ │ └── form/ # Form components
|
||||
│ │ ├── input/ # InputField, Checkbox, Radio, TextArea
|
||||
│ │ ├── switch/ # Switch
|
||||
│ │ ├── Select.tsx
|
||||
│ │ └── ...
|
||||
│ ├── icons/ # All SVG icons
|
||||
│ │ └── index.ts # Export all icons
|
||||
│ └── styles/
|
||||
│ └── design-system.css # Design tokens
|
||||
docs/
|
||||
└── 30-FRONTEND/
|
||||
└── COMPONENT-SYSTEM.md # Full component documentation
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Migration Checklist
|
||||
|
||||
When fixing violations:
|
||||
|
||||
- [ ] Replace `<button>` with `Button` or `IconButton`
|
||||
- [ ] Replace `<input type="text/email/password/number">` with `InputField`
|
||||
- [ ] Replace `<input type="checkbox">` with `Checkbox`
|
||||
- [ ] Replace `<input type="radio">` with `Radio`
|
||||
- [ ] Replace `<select>` with `Select` or `SelectDropdown`
|
||||
- [ ] Replace `<textarea>` with `TextArea`
|
||||
- [ ] Replace external icon imports with `src/icons`
|
||||
- [ ] Run `npm run lint` to verify
|
||||
- [ ] Run `npm run build` to confirm no errors
|
||||
392
docs/30-FRONTEND/DESIGN-TOKENS.md
Normal file
392
docs/30-FRONTEND/DESIGN-TOKENS.md
Normal file
@@ -0,0 +1,392 @@
|
||||
# Design System & Component Guidelines
|
||||
|
||||
> 🔒 **STYLE SYSTEM LOCKED** - This design system is **LOCKED** as of 2025-01-XX. Read this entire document before making any styling changes.
|
||||
|
||||
## 🎨 Design Token System
|
||||
|
||||
**Single Source of Truth**: All design tokens (colors, gradients, shadows) are defined in `/src/styles/tokens.css`
|
||||
|
||||
### Color Tokens
|
||||
|
||||
Use CSS variables for colors:
|
||||
- `var(--color-primary)` - Primary brand blue (#0693e3)
|
||||
- `var(--color-primary-dark)` - Primary dark (#0472b8)
|
||||
- `var(--color-success)` - Success green (#0bbf87)
|
||||
- `var(--color-warning)` - Warning amber (#ff7a00)
|
||||
- `var(--color-danger)` - Danger red (#ef4444)
|
||||
- `var(--color-purple)` - Purple accent (#5d4ae3)
|
||||
|
||||
### Using Colors
|
||||
|
||||
**✅ DO:**
|
||||
```tsx
|
||||
// Use Tailwind utilities with brand colors
|
||||
<div className="bg-brand-500 text-white">Content</div>
|
||||
|
||||
// Use CSS variables for custom values
|
||||
<div className="bg-[var(--color-primary)]">Content</div>
|
||||
|
||||
// Use React components
|
||||
<Button tone="brand" variant="gradient">Click me</Button>
|
||||
```
|
||||
|
||||
**❌ DON'T:**
|
||||
```tsx
|
||||
// Don't use deprecated .igny8-* utility classes
|
||||
<div className="igny8-bg-blue">Content</div>
|
||||
|
||||
// Don't hardcode color values
|
||||
<div className="bg-[#0693e3]">Content</div>
|
||||
|
||||
// Don't use inline styles
|
||||
<div style={{ backgroundColor: '#0693e3' }}>Content</div>
|
||||
```
|
||||
|
||||
## 🔒 Style System Lock Status
|
||||
|
||||
**DO NOT:**
|
||||
- ❌ Create new CSS classes without documenting in this file
|
||||
- ❌ Duplicate existing styling patterns
|
||||
- ❌ Create custom colors/utilities that already exist
|
||||
- ❌ Use deprecated `.igny8-*` utility classes (except `.igny8-table-*` and `.igny8-header-metric-*`)
|
||||
- ❌ Add inline styles for colors/spacing/typography
|
||||
- ❌ Hardcode color hex values
|
||||
|
||||
**DO:**
|
||||
- ✅ Check this document before creating any styles
|
||||
- ✅ Use design tokens from `tokens.css` via CSS variables
|
||||
- ✅ Use Tailwind utilities (bg-brand-500, text-brand-500, etc.)
|
||||
- ✅ Use React components (Button, Badge, Card) from `/components/ui/`
|
||||
- ✅ Follow component patterns from this guide
|
||||
- ✅ Update this document if you MUST add something new
|
||||
|
||||
---
|
||||
|
||||
## Core Principles
|
||||
|
||||
### 1. **Reuse Existing Components Only**
|
||||
- ✅ **DO**: Use existing components from `/src/components/ui/` and `/src/components/common/`
|
||||
- ❌ **DON'T**: Create new components unless explicitly required and approved
|
||||
- ❌ **DON'T**: Duplicate existing component functionality
|
||||
|
||||
### 2. **No Inline Styles**
|
||||
- ✅ **DO**: Use Tailwind CSS utility classes
|
||||
- ✅ **DO**: Use existing CSS classes from the design system
|
||||
- ✅ **DO**: Use existing component props for styling
|
||||
- ❌ **DON'T**: Use inline `style` attributes
|
||||
- ❌ **DON'T**: Use inline `style={{}}` in JSX
|
||||
|
||||
### 3. **Component Consistency**
|
||||
- All UI Elements pages should follow the same structure:
|
||||
- Use `PageMeta` for SEO
|
||||
- Use `PageBreadcrumb` for navigation
|
||||
- Use `ComponentCard` for consistent card styling
|
||||
- Import and use existing reusable components
|
||||
|
||||
### 4. **Available Component Libraries**
|
||||
|
||||
#### UI Components (`/src/components/ui/`)
|
||||
- `alert/` - Alert components
|
||||
- `avatar/` - Avatar components
|
||||
- `badge/` - Badge components
|
||||
- `breadcrumb/` - Breadcrumb navigation
|
||||
- `button/` - Button components
|
||||
- `button-group/` - Button group components
|
||||
- `card/` - Card components
|
||||
- `dropdown/` - Dropdown menu components
|
||||
- `images/` - Image components
|
||||
- `list/` - List components
|
||||
- `modal/` - Modal components
|
||||
- `pagination/` - Pagination components
|
||||
- `progress/` - Progress bar components
|
||||
- `ribbon/` - Ribbon components
|
||||
- `spinner/` - Spinner/loading components
|
||||
- `tabs/` - Tab components
|
||||
- `table/` - Table components
|
||||
- `toast/` - Toast notification components
|
||||
- `tooltip/` - Tooltip components
|
||||
- `videos/` - Video components
|
||||
|
||||
#### Common Components (`/src/components/common/`)
|
||||
- `ComponentCard` - Consistent card wrapper for component showcases
|
||||
- `PageBreadcrumb` - Breadcrumb navigation
|
||||
- `PageMeta` - SEO meta tags
|
||||
- `ConfirmDialog` - Confirmation dialogs
|
||||
- `FormModal` - Form modals (when available)
|
||||
|
||||
### 5. **Styling Guidelines**
|
||||
- Use Tailwind CSS classes exclusively
|
||||
- Use design tokens from `tokens.css` via CSS variables: `var(--color-primary)`
|
||||
- Use Tailwind brand color utilities: `bg-brand-500`, `text-brand-500`, etc.
|
||||
- Use React components for buttons, badges, cards (Button, Badge, Card)
|
||||
- Use dark mode variants: `dark:bg-gray-900`, `dark:text-white`, etc.
|
||||
- Maintain consistent spacing using Tailwind spacing scale
|
||||
- Use existing utility classes: `shadow-theme-xs`, `text-theme-sm`, etc.
|
||||
|
||||
### 5a. **Deprecated Patterns (DO NOT USE)**
|
||||
- ❌ `.igny8-bg-*`, `.igny8-text-*`, `.igny8-border-*` utility classes
|
||||
- ❌ `var(--igny8-blue)` - use `var(--color-primary)` instead
|
||||
- ❌ Hardcoded hex colors like `#0693e3`
|
||||
- ❌ Inline `style={{ color: ... }}` attributes
|
||||
|
||||
**Exception**: `.igny8-table-*` and `.igny8-header-metric-*` classes are still active and should be used for table/header components.
|
||||
|
||||
### 6. **When Creating New Components is Acceptable**
|
||||
Only create new components if:
|
||||
1. Explicitly requested by the user
|
||||
2. Documented in an approved feature request
|
||||
3. No existing component can be adapted or extended
|
||||
|
||||
### 7. **Checking for Existing Components**
|
||||
Before implementing any UI element:
|
||||
1. Search existing components in `/src/components/ui/`
|
||||
2. Check common components in `/src/components/common/`
|
||||
3. Review existing UI Elements pages for patterns
|
||||
4. Check if similar functionality exists in other modules
|
||||
|
||||
---
|
||||
|
||||
## 📝 Typography Scale
|
||||
|
||||
Typography tokens are defined in `index.css` and should be used consistently:
|
||||
|
||||
### Title Sizes (for page/section headings)
|
||||
| Token | Size | Line Height | Use Case |
|
||||
|-------|------|-------------|----------|
|
||||
| `--text-title-2xl` | 72px | 90px | Hero sections only |
|
||||
| `--text-title-xl` | 60px | 72px | Landing page headings |
|
||||
| `--text-title-lg` | 48px | 60px | Major section headers |
|
||||
| `--text-title-md` | 36px | 44px | Page titles |
|
||||
| `--text-title-sm` | 30px | 38px | Section subtitles |
|
||||
|
||||
### Theme Sizes (for body text)
|
||||
| Token | Size | Line Height | Use Case |
|
||||
|-------|------|-------------|----------|
|
||||
| `--text-theme-xl` | 20px | 30px | Large body text, intro paragraphs |
|
||||
| `--text-theme-sm` | 14px | 20px | Standard body text, menu items |
|
||||
| `--text-theme-xs` | 12px | 18px | Small text, labels, captions |
|
||||
|
||||
### Usage in Tailwind
|
||||
```tsx
|
||||
// Use Tailwind utilities mapped to tokens
|
||||
<h1 className="text-title-md">Page Title</h1>
|
||||
<p className="text-theme-sm">Body text</p>
|
||||
<span className="text-theme-xs">Caption</span>
|
||||
|
||||
// Or use the custom utility classes
|
||||
<h2 className="text-2xl font-semibold">Section Title</h2>
|
||||
<p className="text-base">Body text</p>
|
||||
```
|
||||
|
||||
### Font Weights
|
||||
- `font-normal` (400) - Body text
|
||||
- `font-medium` (500) - Labels, menu items
|
||||
- `font-semibold` (600) - Headings, emphasis
|
||||
- `font-bold` (700) - Strong emphasis
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Module Colors
|
||||
|
||||
Module-specific colors are defined in `src/config/colors.config.ts`:
|
||||
|
||||
| Module | Primary Color | Usage |
|
||||
|--------|---------------|-------|
|
||||
| Keywords | `brand-500` (blue) | Icons, progress bars, badges |
|
||||
| Clusters | `purple-500` | Icons, progress bars, badges |
|
||||
| Ideas | `purple-600` | Icons, progress bars, badges |
|
||||
| Tasks | `success-600` (green) | Icons, progress bars, badges |
|
||||
| Content | `success-500` | Icons, progress bars, badges |
|
||||
| Images | `purple-500` | Icons, progress bars, badges |
|
||||
| Automation | `brand-500` | Pipeline cards |
|
||||
| Billing | `warning-500` (amber) | Credit displays |
|
||||
|
||||
```tsx
|
||||
import { MODULE_COLORS } from '@/config/colors.config';
|
||||
|
||||
// Use in components
|
||||
<div className={MODULE_COLORS.keywords.bg}>Keywords Section</div>
|
||||
<span className={MODULE_COLORS.clusters.text}>Cluster Label</span>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: January 2, 2026
|
||||
**Status**: Active Design System Rules - 🔒 LOCKED
|
||||
|
||||
---
|
||||
|
||||
## 🚨 MANDATORY COMPONENT & STYLING RULES
|
||||
|
||||
> **FOR ALL DEVELOPERS AND AI AGENTS**: This section defines the ONLY allowed sources for components, styling, and colors. Violating these rules will result in inconsistent UI and technical debt.
|
||||
|
||||
### ALLOWED COMPONENT SOURCES
|
||||
|
||||
**ONLY import components from these locations:**
|
||||
|
||||
| Category | Allowed Path | Components |
|
||||
|----------|--------------|------------|
|
||||
| **UI Components** | `@/components/ui/` or relative `../components/ui/` | Button, Card, Modal, Alert, Badge, Dropdown, Tooltip, Spinner, Tabs, Toast, Pagination, Progress, Avatar, Breadcrumb |
|
||||
| **Common Components** | `@/components/common/` | PageHeader, ComponentCard, ConfirmDialog, FormModal, TablePageTemplate |
|
||||
| **Icons** | `@/icons` or `@heroicons/react` | All SVG icons |
|
||||
| **Templates** | `@/templates/` | TablePageTemplate, ContentViewTemplate |
|
||||
|
||||
### BANNED IMPORTS (DO NOT USE)
|
||||
|
||||
```tsx
|
||||
// ❌ BANNED - Material UI
|
||||
import { Button, Dialog, Alert, Box } from '@mui/material';
|
||||
import { SomeIcon } from '@mui/icons-material';
|
||||
|
||||
// ❌ BANNED - Chakra UI
|
||||
import { Button } from '@chakra-ui/react';
|
||||
|
||||
// ❌ BANNED - Ant Design
|
||||
import { Button } from 'antd';
|
||||
|
||||
// ❌ BANNED - Custom inline components
|
||||
const MyButton = () => <button className="...">; // If used more than once, create in ui/
|
||||
```
|
||||
|
||||
### ALLOWED CSS/STYLING SOURCES
|
||||
|
||||
**ONLY these CSS files should be used:**
|
||||
|
||||
| File | Purpose | When to Use |
|
||||
|------|---------|-------------|
|
||||
| `src/index.css` | Main Tailwind config, utilities | Auto-imported, don't import manually |
|
||||
| `src/styles/tokens.css` | CSS variables (colors, shadows) | Use via `var(--color-name)` |
|
||||
|
||||
**DO NOT CREATE OR USE:**
|
||||
- ❌ `styles/global.css` - Deprecated
|
||||
- ❌ `components/shared/blocks/blocks.css` - For marketing only
|
||||
- ❌ `components/shared/layouts/layouts.css` - For marketing only
|
||||
- ❌ Any new `.css` files in component folders
|
||||
|
||||
### COLOR USAGE RULES
|
||||
|
||||
**Allowed Color Methods:**
|
||||
|
||||
```tsx
|
||||
// ✅ Tailwind brand colors (defined in index.css @theme)
|
||||
className="bg-brand-500 text-brand-600 border-brand-200"
|
||||
className="bg-success-500 text-warning-600 bg-error-50"
|
||||
className="bg-gray-100 text-gray-700 border-gray-300"
|
||||
|
||||
// ✅ CSS variables from tokens.css
|
||||
className="bg-[var(--color-primary)]"
|
||||
style={{ '--accent': 'var(--color-success)' }}
|
||||
|
||||
// ✅ Dark mode variants
|
||||
className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
|
||||
```
|
||||
|
||||
**BANNED Color Methods:**
|
||||
|
||||
```tsx
|
||||
// ❌ Hardcoded hex colors
|
||||
className="bg-[#0693e3]"
|
||||
className="text-[#ff7a00]"
|
||||
style={{ color: '#4c1d95' }}
|
||||
|
||||
// ❌ Arbitrary Tailwind colors not in tokens
|
||||
className="bg-[#4c1d95]"
|
||||
|
||||
// ❌ Inline SVG fills with hardcoded colors (use currentColor)
|
||||
<svg fill="#F04438"> // ❌
|
||||
<svg fill="currentColor" className="text-error-500"> // ✅
|
||||
```
|
||||
|
||||
### COMPONENT-SPECIFIC RULES
|
||||
|
||||
#### Button Component
|
||||
```tsx
|
||||
// ✅ CORRECT - Use Button from ui/
|
||||
import Button from '@/components/ui/button/Button';
|
||||
|
||||
<Button variant="primary" tone="brand" size="md">
|
||||
Click Me
|
||||
</Button>
|
||||
|
||||
// ❌ WRONG
|
||||
import { Button } from '@mui/material';
|
||||
<button className="bg-blue-500 px-4 py-2">Click</button> // Use Button component
|
||||
```
|
||||
|
||||
#### Modal/Dialog Component
|
||||
```tsx
|
||||
// ✅ CORRECT - Use Modal from ui/
|
||||
import { Modal } from '@/components/ui/modal';
|
||||
|
||||
<Modal isOpen={open} onClose={() => setOpen(false)}>
|
||||
<div className="p-6">Modal content</div>
|
||||
</Modal>
|
||||
|
||||
// ❌ WRONG
|
||||
import { Dialog } from '@mui/material';
|
||||
```
|
||||
|
||||
#### Alert Component
|
||||
```tsx
|
||||
// ✅ CORRECT
|
||||
import Alert from '@/components/ui/alert/Alert';
|
||||
|
||||
<Alert variant="success" title="Success" message="Action completed" />
|
||||
|
||||
// ❌ WRONG
|
||||
import { Alert } from '@mui/material';
|
||||
```
|
||||
|
||||
#### Badge Component
|
||||
```tsx
|
||||
// ✅ CORRECT
|
||||
import Badge from '@/components/ui/badge/Badge';
|
||||
|
||||
<Badge tone="success" variant="soft">Active</Badge>
|
||||
|
||||
// ❌ WRONG
|
||||
import { Chip } from '@mui/material';
|
||||
```
|
||||
|
||||
### FOLDER STRUCTURE FOR NEW COMPONENTS
|
||||
|
||||
If a new component is absolutely necessary:
|
||||
|
||||
```
|
||||
src/components/ui/
|
||||
├── new-component/
|
||||
│ ├── NewComponent.tsx # Main component
|
||||
│ └── index.ts # Export barrel
|
||||
```
|
||||
|
||||
**Requirements for new components:**
|
||||
1. Must be approved in a feature request
|
||||
2. Must follow existing component patterns (see Button.tsx, Badge.tsx)
|
||||
3. Must use design tokens for all colors
|
||||
4. Must support dark mode
|
||||
5. Must be documented in this file
|
||||
6. Must NOT duplicate existing functionality
|
||||
|
||||
### REFERENCE: PROPERLY STYLED PAGES
|
||||
|
||||
**Use these pages as reference for correct styling:**
|
||||
|
||||
| Module | Pages | Path |
|
||||
|--------|-------|------|
|
||||
| Planner | Keywords, Clusters, Ideas | `src/pages/Planner/` |
|
||||
| Writer | Review, Approved, Content | `src/pages/Writer/` |
|
||||
| Sites | List, Settings | `src/pages/Sites/` |
|
||||
| Dashboard | Home | `src/pages/Dashboard/` |
|
||||
|
||||
### AUDIT CHECKLIST FOR CODE REVIEW
|
||||
|
||||
Before merging any PR, verify:
|
||||
|
||||
- [ ] No imports from `@mui/material` or `@mui/icons-material`
|
||||
- [ ] All buttons use `Button` from `ui/button/Button`
|
||||
- [ ] All modals use `Modal` from `ui/modal`
|
||||
- [ ] All alerts use `Alert` from `ui/alert/Alert`
|
||||
- [ ] No hardcoded hex colors (search for `#[0-9a-fA-F]{3,6}`)
|
||||
- [ ] No new CSS files created
|
||||
- [ ] Dark mode variants included where needed
|
||||
- [ ] Component props match design system (tone, variant, size)
|
||||
552
docs/90-REFERENCE/FIXES-KB.md
Normal file
552
docs/90-REFERENCE/FIXES-KB.md
Normal file
@@ -0,0 +1,552 @@
|
||||
# Architecture Knowledge Base
|
||||
**Last Updated:** December 14, 2025
|
||||
**Purpose:** Critical architectural patterns, common issues, and solutions reference
|
||||
|
||||
---
|
||||
|
||||
## 🔥 CRITICAL FIXES - December 2025
|
||||
|
||||
### PERMANENT FIX: Django Admin Custom Sidebar Not Showing on Subpages
|
||||
**ROOT CAUSE**: Django's `ModelAdmin` view methods (`changelist_view`, `change_view`, etc.) do not call `AdminSite.each_context()`, so custom sidebar logic defined in `site.py` was bypassed on model list/detail/edit pages.
|
||||
|
||||
**SOLUTION IMPLEMENTED**:
|
||||
1. ✅ Created `Igny8ModelAdmin` base class extending `UnfoldModelAdmin`
|
||||
2. ✅ Overrides all view methods to inject `extra_context` with custom sidebar
|
||||
3. ✅ Applied to 46+ admin classes across all modules
|
||||
4. ✅ Sidebar now consistent on homepage, app index, and ALL model pages
|
||||
|
||||
**Files Modified**: `backend/igny8_core/admin/base.py`, all `*/admin.py` files
|
||||
|
||||
### PERMANENT FIX: User Swapping / Random Logout Issue
|
||||
**ROOT CAUSE**: Django's database-backed sessions with in-memory user caching caused cross-request contamination at the process level.
|
||||
|
||||
**SOLUTION IMPLEMENTED**:
|
||||
1. ✅ Redis-backed sessions (`SESSION_ENGINE = 'django.contrib.sessions.backends.cache'`)
|
||||
2. ✅ Custom authentication backend without caching (`NoCacheModelBackend`)
|
||||
3. ✅ Session integrity validation (stores and verifies account_id/user_id on every request)
|
||||
4. ✅ Middleware never mutates `request.user` (uses Django's set value directly)
|
||||
|
||||
**See**: `CRITICAL-BUG-FIXES-DEC-2025.md` for complete details.
|
||||
|
||||
### PERMANENT FIX: useNavigate / useLocation Errors During HMR
|
||||
**ROOT CAUSE**: Individual Suspense boundaries per route lost React Router context during Hot Module Replacement.
|
||||
|
||||
**SOLUTION IMPLEMENTED**:
|
||||
1. ✅ Single top-level Suspense boundary around entire `<Routes>` component
|
||||
2. ✅ Removed 100+ individual Suspense wrappers from route elements
|
||||
3. ✅ Router context now persists through HMR automatically
|
||||
|
||||
**See**: `CRITICAL-BUG-FIXES-DEC-2025.md` for complete details.
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
1. [Authentication & Session Management](#authentication--session-management)
|
||||
2. [Site/Sector Architecture](#sitesector-architecture)
|
||||
3. [State Management & Race Conditions](#state-management--race-conditions)
|
||||
4. [Permission System](#permission-system)
|
||||
5. [Frontend Component Dependencies](#frontend-component-dependencies)
|
||||
6. [Common Pitfalls & Solutions](#common-pitfalls--solutions)
|
||||
|
||||
---
|
||||
|
||||
## Authentication & Session Management
|
||||
|
||||
### Token Persistence Architecture
|
||||
|
||||
**Problem Pattern:**
|
||||
- Zustand persist middleware writes to localStorage asynchronously
|
||||
- API calls can happen before tokens are persisted
|
||||
- Results in 403 "Authentication credentials were not provided" errors
|
||||
|
||||
**Solution Implemented:**
|
||||
```typescript
|
||||
// In authStore.ts login/register functions
|
||||
// CRITICAL: Immediately persist tokens synchronously after setting state
|
||||
const authState = {
|
||||
state: { user, token, refreshToken, isAuthenticated: true },
|
||||
version: 0
|
||||
};
|
||||
localStorage.setItem('auth-storage', JSON.stringify(authState));
|
||||
```
|
||||
|
||||
**Key Principle:** Always write tokens to localStorage synchronously in auth actions, don't rely solely on persist middleware.
|
||||
|
||||
---
|
||||
|
||||
### Logout & State Cleanup
|
||||
|
||||
**WRONG APPROACH (causes race conditions):**
|
||||
```typescript
|
||||
logout: () => {
|
||||
localStorage.clear(); // ❌ BREAKS EVERYTHING
|
||||
set({ user: null, token: null });
|
||||
}
|
||||
```
|
||||
|
||||
**CORRECT APPROACH:**
|
||||
```typescript
|
||||
logout: () => {
|
||||
// ✅ Selective removal - only auth-related keys
|
||||
const authKeys = ['auth-storage', 'site-storage', 'sector-storage', 'billing-storage'];
|
||||
authKeys.forEach(key => localStorage.removeItem(key));
|
||||
|
||||
// ✅ Reset dependent stores explicitly
|
||||
useSiteStore.setState({ activeSite: null });
|
||||
useSectorStore.setState({ activeSector: null, sectors: [] });
|
||||
|
||||
set({ user: null, token: null, isAuthenticated: false });
|
||||
}
|
||||
```
|
||||
|
||||
**Key Principle:** Never use `localStorage.clear()` - it breaks Zustand persist middleware initialization. Always selectively remove keys.
|
||||
|
||||
---
|
||||
|
||||
### 403 Error Handling
|
||||
|
||||
**Problem Pattern:**
|
||||
- 403 errors thrown before checking if it's an auth error
|
||||
- Token validation code becomes unreachable
|
||||
- Invalid tokens persist in localStorage
|
||||
|
||||
**WRONG ORDER:**
|
||||
```typescript
|
||||
// In api.ts
|
||||
if (response.status === 403) {
|
||||
throw new Error(response.statusText); // ❌ Thrown immediately
|
||||
}
|
||||
|
||||
// This code NEVER runs (unreachable):
|
||||
if (errorData?.detail?.includes('Authentication credentials')) {
|
||||
logout(); // Never called!
|
||||
}
|
||||
```
|
||||
|
||||
**CORRECT ORDER:**
|
||||
```typescript
|
||||
// Check for auth errors FIRST, then throw
|
||||
if (response.status === 403) {
|
||||
const errorData = JSON.parse(text);
|
||||
|
||||
// ✅ Check authentication BEFORE throwing
|
||||
if (errorData?.detail?.includes('Authentication credentials')) {
|
||||
const authState = useAuthStore.getState();
|
||||
if (authState?.isAuthenticated) {
|
||||
authState.logout();
|
||||
window.location.href = '/signin';
|
||||
}
|
||||
}
|
||||
|
||||
// Now throw the error
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
```
|
||||
|
||||
**Key Principle:** Handle authentication errors before throwing. Order matters in error handling logic.
|
||||
|
||||
---
|
||||
|
||||
## Site/Sector Architecture
|
||||
|
||||
### Data Hierarchy
|
||||
```
|
||||
Account (Tenant)
|
||||
└── Site (e.g., myblog.com)
|
||||
└── Sector (e.g., Technology, Health)
|
||||
└── Keywords
|
||||
└── Clusters
|
||||
└── Ideas
|
||||
└── Content
|
||||
```
|
||||
|
||||
### Where Sectors Are Used (Global Context)
|
||||
|
||||
**USES SECTORS (requires site/sector selection):**
|
||||
- ✅ Planner Module (Keywords, Clusters, Ideas)
|
||||
- ✅ Writer Module (Tasks, Content, Drafts, Published)
|
||||
- ✅ Linker Module (Internal linking)
|
||||
- ✅ Optimizer Module (Content optimization)
|
||||
- ✅ Setup/Add Keywords page
|
||||
- ✅ Seed Keywords reference data
|
||||
|
||||
**DOES NOT USE SECTORS (account-level only):**
|
||||
- ❌ Billing/Plans pages (`/account/*`)
|
||||
- ❌ Account Settings
|
||||
- ❌ Team Management
|
||||
- ❌ User Profile
|
||||
- ❌ Admin Dashboard
|
||||
- ❌ System Settings
|
||||
|
||||
### Sector Loading Pattern
|
||||
|
||||
**Architecture Decision:**
|
||||
- Sectors loaded by **PageHeader component** (not AppLayout)
|
||||
- Only loads when `hideSiteSector={false}` prop is set
|
||||
- Account/billing pages pass `hideSiteSector={true}` to skip loading
|
||||
|
||||
**Implementation:**
|
||||
```typescript
|
||||
// PageHeader.tsx
|
||||
useEffect(() => {
|
||||
if (hideSiteSector) return; // Skip for account pages
|
||||
|
||||
const currentSiteId = activeSite?.id ?? null;
|
||||
if (currentSiteId && activeSite?.is_active) {
|
||||
loadSectorsForSite(currentSiteId);
|
||||
}
|
||||
}, [activeSite?.id, hideSiteSector]);
|
||||
```
|
||||
|
||||
**Key Principle:** Lazy-load sectors only when components need them. Don't load globally for all pages.
|
||||
|
||||
---
|
||||
|
||||
### Site/Sector Store Persistence
|
||||
|
||||
**Storage Keys:**
|
||||
- `site-storage` - Active site selection
|
||||
- `sector-storage` - Active sector selection
|
||||
|
||||
**Reset Pattern:**
|
||||
```typescript
|
||||
// When site changes, reset sector if it belongs to different site
|
||||
if (currentSector && currentSector.site_id !== newSiteId) {
|
||||
set({ activeSector: null });
|
||||
localStorage.setItem('sector-storage', JSON.stringify({
|
||||
state: { activeSector: null },
|
||||
version: 0
|
||||
}));
|
||||
}
|
||||
```
|
||||
|
||||
**Key Principle:** Sector selection is site-scoped. Always validate sector belongs to active site.
|
||||
|
||||
---
|
||||
|
||||
## State Management & Race Conditions
|
||||
|
||||
### Common Race Condition Patterns
|
||||
|
||||
#### 1. User Switching
|
||||
**Problem:** Rapid logout → login leaves stale state in stores
|
||||
|
||||
**Solution:**
|
||||
```typescript
|
||||
logout: () => {
|
||||
// Reset ALL dependent stores explicitly
|
||||
import('./siteStore').then(({ useSiteStore }) => {
|
||||
useSiteStore.setState({ activeSite: null, loading: false, error: null });
|
||||
});
|
||||
import('./sectorStore').then(({ useSectorStore }) => {
|
||||
useSectorStore.setState({ activeSector: null, sectors: [], loading: false, error: null });
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
#### 2. API Calls Before Token Persistence
|
||||
**Problem:** API calls happen before Zustand persist writes token
|
||||
|
||||
**Solution:** Synchronous localStorage write immediately after state update (see Authentication section)
|
||||
|
||||
#### 3. Module Loading Failures
|
||||
**Problem:** 404 errors during page navigation cause module loading to fail
|
||||
|
||||
**Solution:** Ensure API endpoints exist before pages try to load them. Use conditional rendering based on route.
|
||||
|
||||
---
|
||||
|
||||
### Zustand Persist Middleware Gotchas
|
||||
|
||||
**Issue 1: Version Mismatch**
|
||||
```typescript
|
||||
// Stored format
|
||||
{ state: { user, token }, version: 0 }
|
||||
|
||||
// If version changes, persist middleware clears state
|
||||
```
|
||||
|
||||
**Issue 2: Async Hydration**
|
||||
- State rehydration from localStorage is async
|
||||
- Can cause brief flash of "no user" state
|
||||
|
||||
**Solution:** Use loading states or check both store AND localStorage:
|
||||
```typescript
|
||||
const getAuthToken = (): string | null => {
|
||||
// Try Zustand store first
|
||||
const authState = useAuthStore.getState();
|
||||
if (authState?.token) return authState.token;
|
||||
|
||||
// Fallback to localStorage
|
||||
const stored = localStorage.getItem('auth-storage');
|
||||
return JSON.parse(stored)?.state?.token || null;
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Permission System
|
||||
|
||||
### Superuser/Developer Bypass Pattern
|
||||
|
||||
**Critical Locations for Bypass:**
|
||||
1. Middleware - `auth/middleware.py`
|
||||
2. Permission Classes - `api/permissions.py`
|
||||
3. ViewSet Querysets - `api/base.py`
|
||||
4. Validation Functions - `auth/utils.py`
|
||||
|
||||
**Standard Bypass Check:**
|
||||
```python
|
||||
def check_bypass(user):
|
||||
return (
|
||||
user.is_superuser or
|
||||
user.role == 'developer' or
|
||||
is_system_account_user(user)
|
||||
)
|
||||
```
|
||||
|
||||
**Apply at ALL levels:**
|
||||
- Middleware request validation
|
||||
- DRF permission `has_permission()`
|
||||
- ViewSet `get_queryset()` filtering
|
||||
- Custom validation functions
|
||||
|
||||
**Key Principle:** Bypass checks must be consistent across all permission layers. Missing one layer breaks superuser access.
|
||||
|
||||
---
|
||||
|
||||
### System Account Pattern
|
||||
|
||||
**Reserved Accounts:**
|
||||
- `aws-admin` - System automation account
|
||||
- `default-account` - Default tenant fallback
|
||||
|
||||
**Check Function:**
|
||||
```python
|
||||
def is_system_account_user(user):
|
||||
if not user or not user.account:
|
||||
return False
|
||||
return user.account.slug in ['aws-admin', 'default-account']
|
||||
```
|
||||
|
||||
**Usage:** Always include in bypass checks alongside superuser/developer.
|
||||
|
||||
---
|
||||
|
||||
## Frontend Component Dependencies
|
||||
|
||||
### PageHeader Component
|
||||
**Dependencies:**
|
||||
- `useSiteStore` - Active site
|
||||
- `useSectorStore` - Active sector
|
||||
- `SiteAndSectorSelector` - Dropdown component
|
||||
|
||||
**Props:**
|
||||
- `hideSiteSector: boolean` - Skip site/sector display and loading
|
||||
- `title: string` - Page title
|
||||
- `navigation: ReactNode` - Optional module tabs
|
||||
|
||||
**Used By:**
|
||||
- All Planner pages
|
||||
- All Writer pages
|
||||
- All Optimizer pages
|
||||
- Setup pages
|
||||
- Seed Keywords page
|
||||
|
||||
**NOT Used By:**
|
||||
- Account/billing pages (use plain headers instead)
|
||||
|
||||
---
|
||||
|
||||
### Module Navigation Pattern
|
||||
|
||||
**Component:** `ModuleNavigationTabs.tsx`
|
||||
|
||||
**CRITICAL:** Must be wrapped in `<Router>` context
|
||||
- Uses `useLocation()` and `useNavigate()` hooks
|
||||
- Cannot be used outside `<Routes>` tree
|
||||
|
||||
**Common Error:**
|
||||
```
|
||||
Error: useLocation() may be used only in the context of a <Router> component
|
||||
```
|
||||
|
||||
**Cause:** Component rendered outside React Router context
|
||||
|
||||
**Solution:** Ensure component is within `<Route>` element in App.tsx
|
||||
|
||||
---
|
||||
|
||||
## Common Pitfalls & Solutions
|
||||
|
||||
### Pitfall 1: Frontend 403 Errors After User Switch
|
||||
|
||||
**Symptoms:**
|
||||
- "Authentication credentials were not provided"
|
||||
- User appears logged in but API calls fail
|
||||
- Manually clearing cache fixes it
|
||||
|
||||
**Root Cause:** Invalid tokens persisting in localStorage after logout
|
||||
|
||||
**Solution:**
|
||||
1. Check 403 handler runs BEFORE throwing error
|
||||
2. Ensure logout clears specific auth keys (not `localStorage.clear()`)
|
||||
3. Add immediate token persistence after login
|
||||
|
||||
**Prevention:** See "Authentication & Session Management" section
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 2: Sector 404 Errors on Billing Pages
|
||||
|
||||
**Symptoms:**
|
||||
- `GET /v1/auth/sites/{id}/sectors/` returns 404
|
||||
- "Failed to fetch dynamically imported module" error
|
||||
- Billing pages don't load
|
||||
|
||||
**Root Cause:** AppLayout loading sectors for ALL pages globally
|
||||
|
||||
**Solution:** Move sector loading to PageHeader component (lazy loading)
|
||||
|
||||
**Prevention:** Only load data when components that need it are mounted
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 3: Module Loading Failures After Git Commits
|
||||
|
||||
**Symptoms:**
|
||||
- React Router context errors
|
||||
- "useLocation() may be used only in context of <Router>" errors
|
||||
- Pages work after rebuild but fail after git push
|
||||
|
||||
**Root Cause:** Docker build cache not invalidated properly
|
||||
|
||||
**Solution:**
|
||||
```bash
|
||||
# Force clean rebuild
|
||||
docker compose -f docker-compose.app.yml down
|
||||
docker compose -f docker-compose.app.yml build --no-cache igny8_frontend
|
||||
docker compose -f docker-compose.app.yml up -d
|
||||
```
|
||||
|
||||
**Prevention:** Use `--no-cache` flag when rebuilding after major changes
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 4: Plan Selection Issues in Pricing Page
|
||||
|
||||
**Symptoms:**
|
||||
- Monthly/Annual toggle missing
|
||||
- Pre-selected plan not highlighted
|
||||
- Discount calculation wrong
|
||||
|
||||
**Root Cause:**
|
||||
1. PricingTable component missing `showToggle` prop
|
||||
2. Backend missing `is_featured` and `annual_discount_percent` fields
|
||||
3. Frontend not calculating annual price from discount
|
||||
|
||||
**Solution:**
|
||||
1. Add fields to Plan model with migration
|
||||
2. Pass `annualDiscountPercent` to PricingTable
|
||||
3. Calculate: `annualPrice = monthlyPrice * 12 * (1 - discount/100)`
|
||||
|
||||
**Files Modified:**
|
||||
- `backend/igny8_core/auth/models.py`
|
||||
- `backend/igny8_core/auth/serializers.py`
|
||||
- `frontend/src/services/billing.api.ts`
|
||||
- `frontend/src/components/ui/pricing-table/PricingTable.tsx`
|
||||
|
||||
---
|
||||
|
||||
### Pitfall 5: Adjacent JSX Elements Error
|
||||
|
||||
**Symptoms:**
|
||||
- "Adjacent JSX elements must be wrapped in an enclosing tag"
|
||||
- Build fails but line numbers don't help
|
||||
|
||||
**Root Cause:** Mismatched opening/closing tags (usually missing `</div>`)
|
||||
|
||||
**Debugging Strategy:**
|
||||
1. Use TypeScript compiler: `npx tsc --noEmit <file>`
|
||||
2. Count opening vs closing tags: `grep -c "<div" vs grep -c "</div>"`
|
||||
3. Check conditionals have matching closing parens/braces
|
||||
|
||||
**Common Pattern:**
|
||||
```tsx
|
||||
{condition && (
|
||||
<div>
|
||||
{/* Content */}
|
||||
</div>
|
||||
{/* Missing closing parenthesis causes "adjacent elements" error */}
|
||||
}
|
||||
```
|
||||
|
||||
**Solution:** Ensure every opening bracket has matching close bracket
|
||||
|
||||
---
|
||||
|
||||
## Best Practices Summary
|
||||
|
||||
### State Management
|
||||
✅ **DO:** Immediately persist auth tokens synchronously
|
||||
✅ **DO:** Selectively remove localStorage keys
|
||||
✅ **DO:** Reset dependent stores on logout
|
||||
❌ **DON'T:** Use `localStorage.clear()`
|
||||
❌ **DON'T:** Rely solely on Zustand persist middleware timing
|
||||
|
||||
### Error Handling
|
||||
✅ **DO:** Check authentication errors BEFORE throwing
|
||||
✅ **DO:** Force logout on invalid tokens
|
||||
✅ **DO:** Redirect to login after logout
|
||||
❌ **DON'T:** Throw errors before checking auth status
|
||||
❌ **DON'T:** Leave invalid tokens in storage
|
||||
|
||||
### Component Architecture
|
||||
✅ **DO:** Lazy-load data at component level
|
||||
✅ **DO:** Skip unnecessary data loading (hideSiteSector pattern)
|
||||
✅ **DO:** Keep components in Router context
|
||||
❌ **DON'T:** Load data globally in AppLayout
|
||||
❌ **DON'T:** Use Router hooks outside Router context
|
||||
|
||||
### Permission System
|
||||
✅ **DO:** Implement bypass at ALL permission layers
|
||||
✅ **DO:** Include system accounts in bypass checks
|
||||
✅ **DO:** Use consistent bypass logic everywhere
|
||||
❌ **DON'T:** Forget middleware layer bypass
|
||||
❌ **DON'T:** Mix permission approaches
|
||||
|
||||
### Docker Builds
|
||||
✅ **DO:** Use `--no-cache` after major changes
|
||||
✅ **DO:** Restart containers after rebuilds
|
||||
✅ **DO:** Check logs for module loading errors
|
||||
❌ **DON'T:** Trust build cache after git commits
|
||||
❌ **DON'T:** Deploy without testing fresh build
|
||||
|
||||
---
|
||||
|
||||
## Quick Reference: File Locations
|
||||
|
||||
### Authentication
|
||||
- Token handling: `frontend/src/services/api.ts`
|
||||
- Auth store: `frontend/src/store/authStore.ts`
|
||||
- Middleware: `backend/igny8_core/auth/middleware.py`
|
||||
|
||||
### Permissions
|
||||
- Permission classes: `backend/igny8_core/api/permissions.py`
|
||||
- Base viewsets: `backend/igny8_core/api/base.py`
|
||||
- Validation utils: `backend/igny8_core/auth/utils.py`
|
||||
|
||||
### Site/Sector
|
||||
- Site store: `frontend/src/store/siteStore.ts`
|
||||
- Sector store: `frontend/src/store/sectorStore.ts`
|
||||
- PageHeader: `frontend/src/components/common/PageHeader.tsx`
|
||||
|
||||
### Billing
|
||||
- Billing API: `frontend/src/services/billing.api.ts`
|
||||
- Plans page: `frontend/src/pages/account/PlansAndBillingPage.tsx`
|
||||
- Plan model: `backend/igny8_core/auth/models.py`
|
||||
|
||||
---
|
||||
|
||||
**End of Knowledge Base**
|
||||
*Update this document when architectural patterns change or new common issues are discovered.*
|
||||
@@ -1,7 +1,7 @@
|
||||
# IGNY8 Technical Documentation
|
||||
|
||||
**Version:** 1.2.0
|
||||
**Last Updated:** December 27, 2025
|
||||
**Version:** 1.3.1
|
||||
**Last Updated:** January 2, 2026
|
||||
**Purpose:** Complete technical reference for the IGNY8 AI content platform
|
||||
|
||||
---
|
||||
@@ -11,13 +11,16 @@
|
||||
| I want to... | Go to |
|
||||
|--------------|-------|
|
||||
| Understand system architecture | [00-SYSTEM/ARCHITECTURE.md](00-SYSTEM/ARCHITECTURE.md) |
|
||||
| Read executive summary | [00-SYSTEM/IGNY8-APP.md](00-SYSTEM/IGNY8-APP.md) |
|
||||
| Work with a specific module | [10-MODULES/](#modules) |
|
||||
| Find an API endpoint | [20-API/ENDPOINTS.md](20-API/ENDPOINTS.md) |
|
||||
| **Use UI components** | [30-FRONTEND/COMPONENT-SYSTEM.md](30-FRONTEND/COMPONENT-SYSTEM.md) |
|
||||
| **Check design tokens** | [30-FRONTEND/DESIGN-TOKENS.md](30-FRONTEND/DESIGN-TOKENS.md) |
|
||||
| **Read design guide** | [30-FRONTEND/DESIGN-GUIDE.md](30-FRONTEND/DESIGN-GUIDE.md) |
|
||||
| Understand frontend structure | [30-FRONTEND/PAGES.md](30-FRONTEND/PAGES.md) |
|
||||
| Trace a workflow end-to-end | [40-WORKFLOWS/](#workflows) |
|
||||
| Look up model fields | [90-REFERENCE/MODELS.md](90-REFERENCE/MODELS.md) |
|
||||
| Troubleshoot issues | [90-REFERENCE/TROUBLESHOOTING.md](90-REFERENCE/TROUBLESHOOTING.md) |
|
||||
| See known issues | [/PRE-LAUNCH-AUDIT.md](/PRE-LAUNCH-AUDIT.md) |
|
||||
| See prelaunch checklist | [plans/FINAL-PRELAUNCH.md](plans/FINAL-PRELAUNCH.md) |
|
||||
|
||||
---
|
||||
|
||||
@@ -28,6 +31,7 @@
|
||||
| [ARCHITECTURE.md](00-SYSTEM/ARCHITECTURE.md) | Tech stack, deployment, system design |
|
||||
| [AUTH-FLOWS.md](00-SYSTEM/AUTH-FLOWS.md) | Authentication, JWT, sessions, roles |
|
||||
| [TENANCY.md](00-SYSTEM/TENANCY.md) | Multi-tenant architecture, Account/Site/Sector |
|
||||
| [IGNY8-APP.md](00-SYSTEM/IGNY8-APP.md) | Executive summary (non-technical) |
|
||||
|
||||
---
|
||||
|
||||
@@ -61,8 +65,12 @@
|
||||
|
||||
| Document | Purpose |
|
||||
|----------|---------|
|
||||
| [PAGES.md](30-FRONTEND/PAGES.md) | All pages and routes || [PAGE-REQUIREMENTS.md](30-FRONTEND/PAGE-REQUIREMENTS.md) | Site/sector selector requirements || [STORES.md](30-FRONTEND/STORES.md) | Zustand state management |
|
||||
| [COMPONENTS.md](30-FRONTEND/COMPONENTS.md) | Key reusable components |
|
||||
| [COMPONENT-SYSTEM.md](30-FRONTEND/COMPONENT-SYSTEM.md) | **UI components reference** (Button, InputField, etc.) |
|
||||
| [DESIGN-GUIDE.md](30-FRONTEND/DESIGN-GUIDE.md) | **Design system guide** (colors, rules) |
|
||||
| [DESIGN-TOKENS.md](30-FRONTEND/DESIGN-TOKENS.md) | **Design tokens** (CSS variables, color scales) |
|
||||
| [PAGES.md](30-FRONTEND/PAGES.md) | All pages and routes |
|
||||
| [PAGE-REQUIREMENTS.md](30-FRONTEND/PAGE-REQUIREMENTS.md) | Site/sector selector requirements |
|
||||
| [STORES.md](30-FRONTEND/STORES.md) | Zustand state management |
|
||||
|
||||
### Current Page Structure (v1.2.0)
|
||||
|
||||
|
||||
134
docs/plans/FINAL-PRELAUNCH.md
Normal file
134
docs/plans/FINAL-PRELAUNCH.md
Normal file
@@ -0,0 +1,134 @@
|
||||
# IGNY8 Launch Preparation - Task Organization
|
||||
|
||||
---
|
||||
|
||||
## 1. Design System Consolidation
|
||||
|
||||
Update the rules files, to follow the rules in all changes for styles, for components, for coding rules, to use consistent design
|
||||
|
||||
---
|
||||
|
||||
## 2. Visual Verifications
|
||||
|
||||
2.1 - All logos and images to update for dark and light color scheme layout, and logo design final as well as favicon, and move images to right folder
|
||||
|
||||
2.2 - Sidebar menu rearrange for items that need rearranging, and reduce padding/spacing
|
||||
|
||||
2.3 - Fix the sidebar active/selected menu and hover color
|
||||
|
||||
2.4 - Assign manually the colors to each module, and verify and fix that in each page and progress bar consistent colors are used, across module pages, automation and dashboard
|
||||
|
||||
2.5 - Use colors in setup, sites and account and all its subpages
|
||||
|
||||
---
|
||||
|
||||
## 3. AI Provider Configuration
|
||||
|
||||
3.1 - Add Bria image generation and verify that DALL-E and Bria image generation are working
|
||||
|
||||
3.2 - Add and verify Claude API and models
|
||||
|
||||
3.3 - Update the 2 image sizes to be landscape and 2 square, and update the template to use full width image on full section, and half width content section
|
||||
|
||||
---
|
||||
|
||||
## 4. WordPress & Content Templates
|
||||
|
||||
4.1 - Make the WordPress post template more optimized
|
||||
|
||||
4.2 - Update the header section to show only publicly user and SEO friendly tags and working to show, remove the rest
|
||||
|
||||
---
|
||||
|
||||
## 5. Credits and Pricing
|
||||
|
||||
5.1 - Finalize the credits token costing, limits and per plan structure
|
||||
|
||||
5.2 - Finalize what to show in pricing plans on frontend, and also in app
|
||||
|
||||
5.3 - Upgrade plans for credits package and plan upgrade
|
||||
|
||||
5.4 - Subscription verification correct renewal/reset of credits date
|
||||
|
||||
5.5 - Create packages for setup app (one time) & monthly campaign management (include keyword selection)
|
||||
|
||||
---
|
||||
|
||||
## 6. Fixing All Texts and Highlighting Upcoming Features
|
||||
|
||||
In app and in frontend:
|
||||
- Fixing texts like articles or content or pages / products / service (coming soon)
|
||||
- New site builder (THE SEO HOLY GRAIL)
|
||||
- Interlinking
|
||||
- Backlinks
|
||||
- Optimization
|
||||
- Socializer - integration and posting, to social and video channels
|
||||
- Videos and reels in article and social
|
||||
|
||||
---
|
||||
|
||||
## 7. Frontend Marketing Site
|
||||
|
||||
7.1 - Complete site content based on final docs, features, and help documentation
|
||||
|
||||
7.2 - Simple pricing page with plans (Starter $99, Growth $199, Scale $299) & mentioning credits
|
||||
|
||||
---
|
||||
|
||||
## 8. Email Setup
|
||||
|
||||
| Use Case | Service | Why |
|
||||
|----------|---------|-----|
|
||||
| **Transactional** (password resets, notifications, alerts) | **Resend** | Better deliverability, faster delivery, cleaner API |
|
||||
| **Marketing** (newsletters, campaigns, bulk) | **Brevo** | Higher volume, built-in templates, unsubscribe management, analytics |
|
||||
|
||||
Combined Free Limits:
|
||||
- Resend: 3,000/mo transactional
|
||||
- Brevo: 9,000/mo marketing
|
||||
- Total: 12,000 emails/month free
|
||||
|
||||
---
|
||||
|
||||
## 9. Pipeline Verification
|
||||
|
||||
9.1 - Run complete manual and automated pipeline and fix any issue if there is any issue
|
||||
|
||||
---
|
||||
|
||||
## 10. Data Cleanup & Deployment
|
||||
|
||||
10.1 - Clear all IGNY8 data: sites, images, content, all tables, logs
|
||||
|
||||
10.2 - V1.0 lock config, Final configuration lock for V1.0 release
|
||||
|
||||
10.3 - SIngup 3 new users on each plan and verify, and use one own account deploy perosnal sites
|
||||
|
||||
10.4 - Site Deployments:
|
||||
- homeg8.com
|
||||
- massagersmart.com
|
||||
- Alorig.com
|
||||
- SalmanSadiq.com
|
||||
- AIAI.pk
|
||||
|
||||
---
|
||||
|
||||
## 11. Final QA & Testing
|
||||
|
||||
11.1 - CRUD operations | Collect current implementation from codebase, visually and functionally verify manually
|
||||
|
||||
11.2 - Automation pipeline | Full end-to-end test from clustering to publishing
|
||||
|
||||
11.3 - Credits accuracy | Verify accurate credits and costs consumption
|
||||
|
||||
---
|
||||
|
||||
## 12. Documentation & Media
|
||||
|
||||
12.1 - Feature screencasts | Create screencast of healthy data from each page
|
||||
|
||||
12.2 - Feature explainer videos | Create videos for features explainer
|
||||
|
||||
12.3 - Tutorial videos | Create functional screencast for how-to video tutorials
|
||||
|
||||
|
||||
----
|
||||
Reference in New Issue
Block a user