476 lines
12 KiB
Markdown
476 lines
12 KiB
Markdown
# IGNY8 Launch Tasks - Complete Implementation Guide
|
|
|
|
---
|
|
# PHASE 0 ✅ Completed
|
|
|
|
## 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
|
|
|
|
---
|
|
# PHASE 1: App UI Quick Fixes
|
|
|
|
## 1.1 - Credits Display Fix ✅
|
|
|
|
**Location**: App header component
|
|
|
|
**Current**: Shows abbreviated format (e.g., "12k")
|
|
|
|
**Required**: Show full number (e.g., "12,000")
|
|
|
|
---
|
|
|
|
## 1.2 - Sites Card Redesign ✅
|
|
|
|
**Location**: Sites listing/grid component
|
|
|
|
**Changes required**:
|
|
- Reduce padding to half of current value
|
|
- Use smaller badges for all 3 badges
|
|
- Move URL to below the site title (currently beside or above)
|
|
- Show description only when not empty (hide element completely if empty)
|
|
|
|
---
|
|
|
|
## 1.3 - Page Loading Standardization ✅
|
|
|
|
**Current problem**: Each page has its own loading spinner/text implementation
|
|
|
|
**Required solution**:
|
|
- Remove all individual page loading implementations
|
|
- Implement loading state in global app wrapper (same component where sidebar/header resides)
|
|
- Single consistent spinner/text across entire app
|
|
- Same approach as standard page margins/padding (defined once globally)
|
|
|
|
**Location**: App layout wrapper component (where sidebar/header are defined)
|
|
|
|
---
|
|
|
|
## 1.4 - Global Layout Spacing ✅
|
|
|
|
**Required**:
|
|
- Define exact padding in global app layout ONLY:
|
|
- Below header: 12px
|
|
- After sidebar: 12px
|
|
- Top/bottom: 12px
|
|
- Left/right: 12px
|
|
- Remove ALL inner margins and padding from internal page main wrappers
|
|
- Every page should inherit spacing from global layout, not define its own
|
|
|
|
**Location**: Global app layout component
|
|
|
|
---
|
|
|
|
## 1.5 - Button Standardization ✅
|
|
|
|
**Current problems**:
|
|
1. Icon-on-top bug: Some buttons render icon above text instead of inline
|
|
2. Inconsistent `type` attribute: Some buttons have `type="button"`, some don't
|
|
3. No unified component usage across app
|
|
|
|
**Required solution**:
|
|
|
|
Create/enforce global button components for each variant:
|
|
|
|
| Variant | Component | Usage |
|
|
|---------|-----------|-------|
|
|
| Standard button | `<Button>` | Default actions |
|
|
| Button with icon | `<Button icon={...}>` | Actions with icon left/right of text |
|
|
| Icon-only button | `<IconButton>` | Toolbar actions, compact UI |
|
|
| Button group | `<ButtonGroup>` | Related actions grouped together |
|
|
| Toggle button | `<ToggleButton>` | On/off states |
|
|
|
|
**Implementation requirements**:
|
|
- All variants should NOT require `type="button"` in the HTML output (handle internally in component)
|
|
- Icon must render INLINE with text (flex row), never on top (flex column)
|
|
- Single source of truth for each button type
|
|
- Audit entire codebase and replace all ad-hoc button implementations
|
|
|
|
**Audit command**:
|
|
```bash
|
|
grep -rn "<button" src/ --include="*.jsx" --include="*.tsx"
|
|
```
|
|
|
|
---
|
|
|
|
## 1.6 - Legacy Cleanup ❌
|
|
|
|
**Action**: Remove all unused pages, routes, and related data from:
|
|
- System codebase
|
|
- Documentation
|
|
|
|
**Note**: Identify specific legacy items before removal
|
|
|
|
---
|
|
|
|
# PHASE 2: App Features & Improvements
|
|
|
|
## 2.1 - Setup Wizard Redesign ✅
|
|
|
|
**Current problems**:
|
|
- Converted from modal - not a good design
|
|
- Unnecessary header and icon on wizard main page
|
|
- Unclear intro cards
|
|
|
|
**Required changes**:
|
|
1. Convert to proper page style (like other app pages)
|
|
2. Remove unnecessary header from wizard main page
|
|
3. Create cleaner, better intro cards that clearly explain:
|
|
- What is being provided through wizard
|
|
- What each step accomplishes
|
|
- What user will have after completion
|
|
|
|
---
|
|
|
|
## 2.2 - Dashboard Widgets (3 new) ✅
|
|
|
|
**Location**: Home/Dashboard page
|
|
|
|
### Widget 1: Sites Overview
|
|
- Show sites with small data/status info
|
|
- Include action buttons to directly navigate to:
|
|
- Site settings
|
|
- Site actions
|
|
- Compact format showing key site health indicators
|
|
|
|
### Widget 2: Credits Usage
|
|
- Remaining credits display
|
|
- AI runs count
|
|
- Style: Match existing site dashboard widget style
|
|
- Visual progress indicator for usage
|
|
|
|
### Widget 3: Account Info
|
|
Display the following account-related information:
|
|
- Credits consumed (this billing period)
|
|
- Credits remaining
|
|
- Reset day (when credits refresh)
|
|
- Last payment date
|
|
- Next payment due date
|
|
- Current plan/package type
|
|
|
|
**Note**: Evaluate and track what account-related info is most valuable to display
|
|
|
|
---
|
|
|
|
## 2.3 - WordPress & Content Templates ❌
|
|
|
|
### 2.3.1 - Post Template Optimization
|
|
- Review and optimize WordPress post template structure
|
|
- Improve SEO elements
|
|
- Ensure clean HTML output
|
|
|
|
### 2.3.2 - Header Section Cleanup
|
|
**Current**: Shows various tags including non-public/non-SEO-friendly ones
|
|
|
|
**Required**:
|
|
- Show ONLY publicly visible, SEO-friendly tags
|
|
- Show ONLY tags that are working/functional
|
|
- Remove all other tags from header section
|
|
|
|
---
|
|
|
|
# PHASE 3: Credits, Pricing & Payments
|
|
|
|
## 3.1 - Credits Structure
|
|
|
|
### 3.1.1 - Token Costing
|
|
- Finalize credits token costing
|
|
- Define limits per plan
|
|
- Document per-plan structure
|
|
|
|
### 3.1.2 - Pricing Display
|
|
- Finalize what to show in pricing plans on frontend
|
|
- Finalize what to show in pricing plans in-app
|
|
- Ensure consistency between both
|
|
|
|
### 3.1.3 - Subscription Verification
|
|
- Verify correct renewal date logic
|
|
- Verify correct reset of credits date
|
|
- Test edge cases (upgrades, downgrades, mid-cycle changes)
|
|
|
|
---
|
|
|
|
## 3.2 - Payment Integration
|
|
|
|
### 3.2.1 - Stripe Integration
|
|
- Full payment flow integration
|
|
- Subscription management
|
|
- Webhook handling
|
|
|
|
### 3.2.2 - PayPal Integration
|
|
- Full payment flow integration
|
|
- Subscription management
|
|
- Webhook handling
|
|
|
|
---
|
|
|
|
## 3.3 - Plans & Packages
|
|
|
|
### 3.3.1 - Upgrade Flow
|
|
- Credits package upgrade flow
|
|
- Plan upgrade flow
|
|
- Proration handling
|
|
|
|
### 3.3.2 - Service Packages
|
|
Create two package types:
|
|
|
|
| Package | Type | Includes |
|
|
|---------|------|----------|
|
|
| Setup App | One-time | Initial configuration, onboarding |
|
|
| Campaign Management | Monthly | Keyword selection, ongoing management |
|
|
|
|
---
|
|
|
|
# PHASE 4: Email Setup
|
|
|
|
## 4.1 - Email Services
|
|
|
|
| Use Case | Service | Free Limit | Why |
|
|
|----------|---------|------------|-----|
|
|
| **Transactional** | **Resend** | 3,000/mo | Better deliverability, faster delivery, cleaner API |
|
|
| **Marketing** | **Brevo** | 9,000/mo | Higher volume, built-in templates, unsubscribe management, analytics |
|
|
|
|
**Total free capacity**: 12,000 emails/month
|
|
|
|
---
|
|
|
|
## 4.2 - Email Implementation
|
|
|
|
### 4.2.1 - Service Configuration
|
|
- Configure Resend for transactional emails
|
|
- Configure Brevo for marketing emails
|
|
- Set up API keys and authentication
|
|
|
|
### 4.2.2 - App Integration
|
|
- Integrate both providers into app backend
|
|
- Create email service abstraction layer
|
|
- Route emails to correct provider based on type
|
|
|
|
### 4.2.3 - Email Triggers Definition
|
|
Define and configure when emails are triggered:
|
|
|
|
| Email Type | Trigger | Service |
|
|
|------------|---------|---------|
|
|
| Signup confirmation | User registration | Resend |
|
|
| Password reset | User request | Resend |
|
|
| Alert notifications | System events | Resend |
|
|
| Newsletters | Scheduled/manual | Brevo |
|
|
| Marketing campaigns | Scheduled/manual | Brevo |
|
|
|
|
**Action**: Audit backend/frontend to ensure all triggers are configured
|
|
|
|
### 4.2.4 - Mail History Log
|
|
**Requirements**:
|
|
- Store small mail details (not full content)
|
|
- Archive every 30 days
|
|
- Compact format to minimize database clutter
|
|
- Must remain accessible for later reference
|
|
|
|
**Suggested schema**:
|
|
```
|
|
- id
|
|
- email_type (transactional/marketing)
|
|
- recipient_email (hashed or partial)
|
|
- subject_summary
|
|
- status (sent/failed/bounced)
|
|
- sent_at
|
|
- archived_at
|
|
```
|
|
|
|
### 4.2.5 - Verification
|
|
- Verify all signup emails sending successfully
|
|
- Verify all alert emails sending successfully
|
|
- Verify all notification emails sending successfully
|
|
- Create test suite for email delivery
|
|
|
|
---
|
|
|
|
# PHASE 5: Pipeline & Testing
|
|
|
|
## 5.1 - Pipeline Verification
|
|
|
|
- Run complete manual pipeline end-to-end
|
|
- Run complete automated pipeline end-to-end
|
|
- Document and fix any issues found
|
|
|
|
---
|
|
|
|
## 5.2 - QA & Testing
|
|
|
|
### 5.2.1 - CRUD Operations
|
|
- Collect current CRUD implementation from codebase
|
|
- Visually verify each operation
|
|
- Functionally verify each operation manually
|
|
- Document any issues
|
|
|
|
### 5.2.2 - Automation Pipeline
|
|
- Full end-to-end test
|
|
- From clustering to publishing
|
|
- Verify each stage completes correctly
|
|
|
|
### 5.2.3 - Credits Accuracy
|
|
- Verify accurate credits consumption
|
|
- Verify accurate cost calculations
|
|
- Test edge cases (zero credits, negative, overflow)
|
|
|
|
---
|
|
|
|
# PHASE 6: Data Cleanup & Deployment
|
|
|
|
## 6.1 - Data Cleanup
|
|
|
|
Clear ALL IGNY8 data:
|
|
- Sites
|
|
- Images
|
|
- Content
|
|
- All database tables
|
|
- All logs
|
|
|
|
---
|
|
|
|
## 6.2 - V1.0 Configuration Lock
|
|
|
|
- Final configuration lock for V1.0 release
|
|
- Document all configuration values
|
|
- No changes after lock without version bump
|
|
|
|
---
|
|
|
|
## 6.3 - User Testing
|
|
|
|
### New User Signup Test
|
|
- Signup 3 new users on Starter plan - verify
|
|
- Signup 3 new users on Growth plan - verify
|
|
- Signup 3 new users on Scale plan - verify
|
|
|
|
### Personal Deployment
|
|
- Use own account to deploy personal sites
|
|
|
|
---
|
|
|
|
## 6.4 - Site Deployments
|
|
|
|
Deploy and verify the following sites:
|
|
- [ ] homeg8.com
|
|
- [ ] massagersmart.com
|
|
- [ ] Alorig.com
|
|
- [ ] SalmanSadiq.com
|
|
- [ ] AIAI.pk
|
|
|
|
---
|
|
|
|
# PHASE 7: Documentation & Media
|
|
|
|
## 7.1 - Documentation Updates
|
|
|
|
- Update all feature documentation
|
|
- Finalize help documentation
|
|
- Ensure accuracy with V1.0 release features
|
|
|
|
---
|
|
|
|
## 7.2 - Media Creation
|
|
|
|
### 7.2.1 - Feature Screencasts
|
|
- Create screencast of healthy data from each page
|
|
- Show real/representative data, not empty states
|
|
|
|
### 7.2.2 - Feature Explainer Videos
|
|
- Create videos explaining each feature
|
|
- Focus on value proposition and use cases
|
|
|
|
### 7.2.3 - Tutorial Videos
|
|
- Create functional screencasts
|
|
- How-to video tutorials for common workflows
|
|
|
|
---
|
|
|
|
# PHASE 8: Frontend Marketing Site
|
|
|
|
> ⚠️ **DEPENDENCY**: This phase can ONLY be finalized after Phase 7 documentation is complete
|
|
|
|
## 8.1 - Site Content
|
|
|
|
- Complete site content based on:
|
|
- Final documentation
|
|
- Final feature set
|
|
- Help documentation
|
|
- Ensure messaging matches actual V1.0 capabilities
|
|
|
|
---
|
|
|
|
## 8.2 - Pricing Page
|
|
|
|
Simple pricing page with three plans:
|
|
|
|
| Plan | Price |
|
|
|------|-------|
|
|
| Starter | $99/mo |
|
|
| Growth | $199/mo |
|
|
| Scale | $299/mo |
|
|
|
|
- Include credits information for each plan
|
|
- Clear feature comparison
|
|
|
|
---
|
|
|
|
## 8.3 - Upcoming Features Section
|
|
|
|
**Location**: Frontend marketing site ONLY (not in-app)
|
|
|
|
Highlight coming soon features:
|
|
- 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
|
|
- Products / Services pages (coming soon)
|
|
|
|
**Texts to fix**:
|
|
- Standardize terminology: "articles" vs "content" vs "pages"
|
|
- Mark Products/Services as "(coming soon)"
|
|
|
|
---
|
|
|
|
# Execution Summary
|
|
|
|
| Phase | Scope | Difficulty | Dependencies |
|
|
|-------|-------|------------|--------------|
|
|
| 1 | App UI quick fixes | Easy | None |
|
|
| 2 | App features | Medium | Phase 1 |
|
|
| 3 | Credits/Payments | Medium | None |
|
|
| 4 | Email setup | Medium | None |
|
|
| 5 | Pipeline/Testing | Medium | Phases 1-4 |
|
|
| 6 | Cleanup/Deploy | Medium | Phase 5 |
|
|
| 7 | Documentation | Medium | Phase 6 |
|
|
| 8 | Frontend site | Easy-Medium | **Phase 7 (hard dependency)** |
|
|
|
|
---
|
|
|
|
# Parallel Execution
|
|
|
|
**Can run simultaneously**:
|
|
- Phase 1 + Phase 3 + Phase 4 (all independent)
|
|
- Phase 2 (after Phase 1) + Phase 3 + Phase 4
|
|
|
|
**Must be sequential**:
|
|
- Phase 5 → Phase 6 → Phase 7 → Phase 8 |