COMPREHENSIVE APP BUILDING BLUEPRINT FOR AI CODE GENERATORS

Overview

This document provides complete instructions for building your personal assistant app with AI code generators (like GPT-4, Claude, or Qoudo). Each section contains a self-contained prompt designed to be copied and pasted directly into an AI code generation tool. The plan addresses AI memory limitations by breaking the app into standalone modules that can be generated separately and then integrated.

How to use this blueprint:

1. Copy a single module prompt (they're designed to fit in AI memory)
2. Paste it into your AI code generator of choice
3. Save the generated code in the specified file structure
4. Test the module using the included testing instructions
5. Move to the next module
6. Use the integration prompts to connect everything

🔧 Part 0: Project Initialization

PROJECT INITIALIZATION PROMPT

Create a new full-stack application called "LifeOS" with the following structure:

1. Frontend:
   - Framework: React with TypeScript
   - State management: React Context API
   - UI library: Chakra UI
   - File structure using feature-based organization

2. Backend:
   - Framework: FastAPI (Python)
   - Database: SQLite for development (easy to set up)
   - Authentication: JWT tokens
   - File structure using domain-driven design

3. Development environment:
   - Package manager: npm
   - Build tool: Vite
   - Testing: Vitest
   - Linting: ESLint
   - Formatting: Prettier

Please generate:
1. Complete project structure with all necessary directories
2. All configuration files (package.json, tsconfig.json, etc.)
3. Basic setup for frontend and backend
4. Initial README.md with setup instructions
5. A simple "Hello World" page that connects frontend to backend to verify setup

The application should be runnable by someone with no coding knowledge using simple npm commands.

AFTER GENERATING: Save the code in a new directory called "LifeOS". Follow the setup instructions in the README.md file to install dependencies and start the development server.

🔐 Part 1: Authentication System

AUTHENTICATION SYSTEM PROMPT

Extend the LifeOS application with a complete authentication system that includes:

1. User registration with email verification
   - Fields: name, email, password, profile picture (optional)
   - Email verification using a secure token

2. Login with multiple options
   - Email/password
   - Remember me functionality
   - Forgot password flow

3. Security features
   - Password hashing with bcrypt
   - JWT token generation and validation
   - Refresh token mechanism
   - Secure HTTP-only cookies
   - CSRF protection

4. User profile management
   - View profile
   - Edit profile information
   - Change password
   - Account deletion

5. Frontend components
   - Login page with form validation
   - Registration page with form validation
   - Forgot password page
   - Reset password page
   - Profile page
   - Protected route wrapper component

6. Backend endpoints
   - POST /auth/register
   - POST /auth/login
   - POST /auth/refresh
   - POST /auth/forgot-password
   - POST /auth/reset-password
   - GET /auth/profile
   - PUT /auth/profile
   - DELETE /auth/account

All components should be fully styled with Chakra UI and responsive for mobile and desktop. Include form validation on both frontend and backend.

Generate all necessary files, including:
- React components
- API routes
- Database models
- Authentication services
- Context providers for auth state

The system should persist user sessions across page refreshes using local storage or HTTP-only cookies.

AFTER GENERATING: Test the authentication by registering a new user, logging in, and accessing protected routes.

📊 Part 2: Dashboard & Navigation

DASHBOARD & NAVIGATION PROMPT

Create a comprehensive dashboard and navigation system for the LifeOS application that includes:

1. Main dashboard layout with:
   - Sidebar navigation (collapsible on mobile)
   - Top header with search, notifications, and user profile
   - Main content area with responsive grid layout
   - Light/dark theme toggle
   - Responsive design for all screen sizes

2. Dashboard components:
   - Welcome section with user's name and quick stats
   - Recent activity feed
   - Quick action buttons for common tasks
   - Summary cards for each major module
   - Upcoming events/tasks section

3. Navigation structure:
   - Dashboard (home)
   - CRM
   - Finance
   - Site Visits
   - Documents
   - Investing
   - Health
   - Settings

4. Global search functionality:
   - Search across all modules
   - Keyboard shortcut (Ctrl+K) to focus search
   - Search results grouped by category

5. Notification system:
   - Notification bell with unread count
   - Dropdown with recent notifications
   - Read/unread status
   - Notification preferences in settings

All components should use Chakra UI for styling and be fully responsive. Use React context for managing global state like navigation, theme, and notifications. Include animations for transitions and interactions.

Generate all necessary files including:
- Layout components
- Navigation components
- Dashboard widgets
- Context providers for global state
- API endpoints for dashboard data

Ensure all components are properly typed with TypeScript and include proper error handling.

AFTER GENERATING: Verify the dashboard loads correctly and navigation works between different sections.

👥 Part 3: CRM Module

CRM MODULE PROMPT

Create a complete CRM module for the LifeOS application with the following features:

1. Data models:
   - Contacts (personal information, communication history, notes)
   - Companies (details, associated contacts, industry, size)
   - Deals (name, value, stage, probability, associated company/contacts)
   - Activities (calls, meetings, emails, notes, deadlines)

2. User interface components:
   - Contact list view with filtering, sorting, and search
   - Contact detail page with history and related entities
   - Company list and detail views
   - Deal pipeline with kanban board interface
   - Deal detail page with related contacts and activities
   - Activity timeline view
   - Calendar integration for activities

3. Main features:
   - Add/edit/delete contacts, companies, deals, and activities
   - Filter and search functionality for all entities
   - Drag and drop deals between pipeline stages
   - Activity scheduling with reminders
   - Notes and attachment support
   - Communication history tracking
   - Data import/export (CSV)

4. Backend API endpoints:
   - CRUD operations for all entities
   - Search and filter endpoints
   - Activity timeline endpoints
   - Dashboard summary endpoints

All components should use Chakra UI for styling with responsive design. Use React Context for state management. Include form validation for all input forms. Ensure all data is properly typed with TypeScript interfaces.

Generate all necessary files including:
- React components for all views
- API routes for all endpoints
- Database models and schemas
- Service functions for business logic
- Context providers for state management
- Type definitions

AFTER GENERATING: Test creating contacts, companies, and deals. Verify that all CRUD operations work correctly.

💰 Part 4: Finance Module

FINANCE MODULE PROMPT

Create a comprehensive Finance module for the LifeOS application with the following features:

1. Data models:
   - Invoices (client, items, amounts, taxes, status)
   - Expenses (category, amount, date, receipt, notes)
   - Financial accounts (bank, balance, transactions)
   - Budgets (category, planned amount, actual amount, period)
   - Financial reports (type, period, data, generation date)

2. User interface components:
   - Financial dashboard with key metrics and charts
   - Invoice management (creation, editing, PDF generation)
   - Expense tracking with receipt upload and OCR
   - Budget planning and tracking
   - Income vs. expenses visualization
   - Cash flow projection
   - Tax calculation and reporting
   - Export functionality for accounting

3. Main features:
   - Create/edit/delete invoices with line items
   - Track invoice payment status
   - Categorize and track expenses
   - Upload and process receipts
   - Set and monitor budgets
   - Generate financial reports
   - Visualize financial trends
   - Export data for tax purposes

4. Backend API endpoints:
   - CRUD operations for all financial entities
   - PDF generation for invoices
   - OCR processing for receipts
   - Report generation
   - Dashboard summary data
   - Export endpoints

All components should use Chakra UI for consistent styling and be fully responsive. Include interactive charts using React Chart.js or similar library. Implement proper form validation for all inputs. Use TypeScript for type safety.

Generate all necessary files including:
- React components for all views
- API routes for all endpoints
- Database models and schemas
- Service functions for calculations
- Context providers for financial state
- Type definitions

AFTER GENERATING: Test creating invoices and expenses. Verify that calculations are correct and reports can be generated.

🏙️ Part 5: Site Visit Module

SITE VISIT MODULE PROMPT

Create a complete Site Visit module for the LifeOS application with the following features:

1. Data models:
   - Site (location, client, details, history)
   - Visit (date, purpose, attendees, status)
   - Survey (questions, responses, ratings)
   - Photos (image, location, timestamp, notes)
   - Issues (description, priority, status, assignee)
   - Reports (template, data, generation date)

2. User interface components:
   - Site list with map view and list view
   - Site detail page with visit history
   - Visit planning and scheduling
   - Survey form builder and response collection
   - Photo gallery with location tagging
   - Issue tracking board
   - Report generation interface

3. Main features:
   - Plan and schedule site visits
   - Collect structured data during visits
   - Take and organize photos with metadata
   - Track issues and assign follow-ups
   - Generate comprehensive site reports
   - View visit history and trends
   - Export data to PDF/Excel
   - Offline capability for field use

4. Backend API endpoints:
   - CRUD operations for all entities
   - Photo upload and processing
   - Report generation
   - Search and filter
   - Geolocation services
   - Offline data synchronization

All components should use Chakra UI with responsive design. Implement map integration using Leaflet or Google Maps. Include offline storage using IndexedDB. Create a seamless photo capture and upload experience. Use TypeScript for type safety.

Generate all necessary files including:
- React components for all views
- API routes for all endpoints
- Database models and schemas
- Service functions for business logic
- Context providers for state management
- Type definitions

AFTER GENERATING: Test creating sites and scheduling visits. Verify that photos can be uploaded and reports generated.

📁 Part 6: Document Management

DOCUMENT MANAGEMENT MODULE PROMPT

Create a complete Document Management module for the LifeOS application with the following features:

1. Data models:
   - Document (name, type, size, creation date, modified date)
   - Folder (name, parent folder, documents)
   - Tag (name, color, documents)
   - Version (document, version number, changes, date)
   - Permission (user, document, access level)

2. User interface components:
   - Document library with list and grid views
   - Folder navigation with breadcrumb
   - Document preview for different file types
   - Upload interface with drag and drop
   - Version history view
   - Search interface with advanced filters
   - Tag management
   - Sharing and permission settings

3. Main features:
   - Upload files (single and multiple)
   - Organize in folders and subfolders
   - Preview documents (PDF, images, text)
   - Version control and history
   - Full-text search
   - Tag and categorize documents
   - Share documents with specific permissions
   - Bulk operations (move, tag, delete)
   - Export and download

4. Backend API endpoints:
   - CRUD operations for documents and folders
   - File upload and download
   - Search and filtering
   - Version management
   - Permission control
   - File preview generation

All components should use Chakra UI with responsive design. Implement drag and drop using react-dropzone. Create document previews for common file types. Include proper loading states and progress indicators for uploads. Use TypeScript for type safety.

Generate all necessary files including:
- React components for all views
- API routes for all endpoints
- Database models and schemas
- File storage service
- Search service
- Context providers for state management
- Type definitions

AFTER GENERATING: Test uploading documents, organizing them in folders, and searching for specific files.

💹 Part 7: Investment & Trading Module

INVESTMENT & TRADING MODULE PROMPT

Create a comprehensive Investment & Trading module for the LifeOS application with the following features:

1. Data models:
   - Portfolio (name, description, creation date)
   - Asset (type, symbol, name, current price)
   - Position (portfolio, asset, quantity, purchase price, purchase date)
   - Transaction (type, asset, quantity, price, date, fees)
   - Watchlist (name, assets)
   - Performance (portfolio, period, return, benchmark)

2. User interface components:
   - Portfolio dashboard with performance metrics
   - Asset allocation visualization
   - Transaction history table
   - Watchlist management
   - Market data views with charts
   - Trading interface
   - Performance analysis with comparison tools
   - Risk assessment visualization

3. Main features:
   - Track multiple investment portfolios
   - Record buy/sell transactions
   - Monitor portfolio performance over time
   - Visualize asset allocation
   - Compare against benchmarks
   - Set up and monitor watchlists
   - View market data and price charts
   - Analyze risk and return metrics

4. Backend API endpoints:
   - CRUD operations for portfolios, assets, and transactions
   - Market data integration
   - Performance calculation
   - Risk analysis
   - Export functionality

Implement price charts using a library like Highcharts or Recharts. Use mock data for market prices initially, with pluggable architecture for real API integration later. Ensure all calculations are accurate for financial data. Use TypeScript for type safety.

Generate all necessary files including:
- React components for all views
- API routes for all endpoints
- Database models and schemas
- Market data service (mock implementation)
- Calculation services for performance metrics
- Context providers for state management
- Type definitions

AFTER GENERATING: Test creating a portfolio, adding assets, and recording transactions. Verify that performance calculations are correct.

❤️ Part 8: Health & Wellness Module

HEALTH & WELLNESS MODULE PROMPT

Create a complete Health & Wellness module for the LifeOS application with the following features:

1. Data models:
   - Health Metrics (weight, heart rate, blood pressure, sleep, steps, etc.)
   - Workouts (type, duration, intensity, calories burned)
   - Nutrition (meals, calories, macronutrients)
   - Goals (metric, target, deadline, progress)
   - Journal Entries (date, mood, notes, tags)
   - Devices (type, name, last sync, connection status)

2. User interface components:
   - Health dashboard with key metrics
   - Metric tracking with data input forms
   - Trend visualization with charts
   - Goal setting and progress tracking
   - Workout tracking and planning
   - Nutrition logging and analysis
   - Journal for mood and notes
   - Device connection management

3. Main features:
   - Track various health metrics over time
   - Record workouts and physical activities
   - Log nutrition and dietary information
   - Set and monitor health goals
   - Visualize trends and patterns
   - Journal mood and personal notes
   - Connect with health devices and apps
   - Generate health reports and insights

4. Backend API endpoints:
   - CRUD operations for all health entities
   - Trend analysis and calculations
   - Goal progress tracking
   - Data import from third-party services (mock implementation)
   - Report generation
   - Data aggregation for dashboard

All components should use Chakra UI with responsive design. Implement interactive charts for visualizing health trends. Include form validation for all inputs. Create a clean and motivating interface for health tracking. Use TypeScript for type safety.

Generate all necessary files including:
- React components for all views
- API routes for all endpoints
- Database models and schemas
- Calculation services for health metrics
- Device integration service (mock implementation)
- Context providers for state management
- Type definitions

AFTER GENERATING: Test recording health metrics and tracking goals. Verify that trends can be visualized correctly.

🤖 Part 9: AI Assistant Module

AI ASSISTANT MODULE PROMPT

Create a comprehensive AI Assistant module for the LifeOS application with the following features:

1. Data models:
   - Conversation (user, start time, end time, summary)
   - Message (conversation, content, sender, timestamp)
   - Intent (name, description, parameters, actions)
   - Entity (name, value, type, extraction method)
   - Action (name, description, parameters, handler)
   - Knowledge Item (topic, content, sources, last updated)

2. User interface components:
   - Chat interface with message history
   - Voice input button with recording indicator
   - Suggestion chips for quick responses
   - Context panel showing relevant information
   - Multi-modal input (text, voice, image)
   - Rich response rendering (text, links, cards, tables)
   - Command palette for direct actions

3. Main features:
   - Natural language conversation
   - Voice input and text-to-speech output
   - Intent recognition and entity extraction
   - Action execution across other modules
   - Context-aware responses
   - Suggestions based on user history
   - Multi-turn conversation memory
   - Knowledge base integration
   - Learning from user interactions

4. Backend implementation:
   - Mock AI service with predefined responses
   - Intent classification system
   - Entity extraction service
   - Action execution framework
   - Context management service
   - Knowledge base with simple retrieval

Since we're not using paid APIs, implement a mock AI service that simulates intelligence with predefined responses and basic pattern matching. Design the system to be pluggable so that real AI services can be added later. Focus on creating a compelling user experience that feels intelligent.

Generate all necessary files including:
- React components for conversation UI
- API endpoints for conversation management
- Mock AI service implementation
- Intent and entity recognition service
- Action execution framework
- Context management service
- Type definitions

AFTER GENERATING: Test having conversations with the AI assistant. Verify that it can understand basic commands and execute actions in other modules.

🔄 Part 10: Cross-Device Sync

CROSS-DEVICE SYNC MODULE PROMPT

Create a complete Cross-Device Synchronization system for the LifeOS application with the following features:

1. Data models:
   - Device (id, name, type, last sync, status)
   - SyncOperation (type, entity, data, timestamp, status)
   - SyncQueue (operations, priority, retry count)
   - SyncStatus (device, last successful sync, errors)
   - OfflineChange (type, entity, data, timestamp)

2. Implementation components:
   - Offline-first data architecture
   - Change detection and conflict resolution
   - Background sync process
   - Prioritized sync queue
   - Retry mechanism for failed operations
   - Device registration and authentication
   - Sync status monitoring and reporting

3. Main features:
   - Work offline with full functionality
   - Sync changes when connection is restored
   - Register multiple devices per user
   - Handle conflict resolution intelligently
   - Prioritize critical data for syncing
   - Provide sync status and history
   - Manually trigger sync when needed
   - Optimize bandwidth usage

4. Technical implementation:
   - Use IndexedDB for local storage
   - Implement offline detection with service workers
   - Create a change tracking system
   - Develop conflict resolution strategies
   - Build a priority-based sync queue
   - Create background sync processes

This module should work seamlessly with all other modules, allowing users to work offline and have their changes synchronized when they reconnect. Focus on reliability and data integrity.

Generate all necessary files including:
- Core sync service
- IndexedDB wrapper
- Change tracking system
- Conflict resolution service
- Device management API
- Background sync worker
- UI components for sync status
- Type definitions

AFTER GENERATING: Test working offline by disconnecting from the internet, making changes, and then reconnecting to verify that changes sync correctly.

🔌 Part 11: Plugin System

PLUGIN SYSTEM PROMPT

Create a flexible Plugin System for the LifeOS application with the following features:

1. Core architecture:
   - Plugin registry and discovery mechanism
   - Plugin manifest format and validation
   - Lifecycle management (install, enable, disable, uninstall)
   - Version compatibility checking
   - Dependency management
   - Secure sandbox execution environment

2. Extension points:
   - UI extension slots in various modules
   - Data processing pipelines
   - Custom visualization components
   - New sidebar menu items
   - Dashboard widgets
   - Custom settings pages
   - Tool integrations

3. Plugin developer API:
   - React component registration
   - Data access and modification
   - Event subscription
   - Storage API for plugin data
   - UI integration helpers
   - Authentication and permissions

4. Plugin management interface:
   - Available plugins directory
   - Installed plugins list
   - Enable/disable toggles
   - Configuration options
   - Update notifications
   - Plugin search and filtering

The plugin system should allow extending the application without modifying the core codebase. It should be secure, preventing plugins from accessing unauthorized data or performing harmful operations.

Generate all necessary files including:
- Plugin registry service
- Plugin loader
- Extension point system
- Sandbox implementation
- Plugin API definition
- Plugin management UI
- Example plugin implementation
- Type definitions

AFTER GENERATING: Test installing and enabling the example plugin to verify that the plugin system works correctly.

📱 Part 12: Mobile Responsive Implementation

MOBILE RESPONSIVE IMPLEMENTATION PROMPT

Enhance the LifeOS application with comprehensive mobile responsiveness across all modules with the following features:

1. Core responsive framework:
   - Mobile-first design approach
   - Fluid layouts that adapt to screen sizes
   - Touch-optimized interactions
   - Device-specific optimizations (iOS/Android)
   - Orientation change handling
   - Viewport optimization

2. Mobile-specific UI components:
   - Bottom navigation bar for primary actions
   - Swipeable interfaces for common actions
   - Mobile-optimized forms with appropriate keyboards
   - Touch-friendly controls and buttons
   - Pull-to-refresh functionality
   - Mobile-specific gesture support

3. Performance optimizations:
   - Lazy loading for mobile performance
   - Image optimization and responsive images
   - Reduced network payload for mobile
   - Touch event optimization
   - Battery and data usage considerations
   - Progressive loading strategies

4. Mobile testing framework:
   - Device simulation for testing
   - Responsive testing breakpoints
   - Touch event simulation
   - Viewport testing tools
   - Mobile performance metrics

Review and enhance all existing modules to ensure they work flawlessly on mobile devices. Update layout components, forms, tables, and other UI elements to be fully responsive.

Generate all necessary files including:
- Mobile-specific components
- Responsive layout containers
- Media query utilities
- Touch interaction handlers
- Device detection service
- Mobile optimization utilities

AFTER GENERATING: Test the application on various screen sizes (or using browser developer tools) to verify that all modules are fully responsive.

🔒 Part 13: Security Implementation

SECURITY IMPLEMENTATION PROMPT

Enhance the LifeOS application with comprehensive security features across all modules:

1. Authentication security:
   - Multi-factor authentication implementation
   - Secure password policies and validation
   - Account lockout after failed attempts
   - Session management and timeout
   - Remember me implementation with secure tokens

2. Data protection:
   - Data encryption at rest (database)
   - Encryption for sensitive fields
   - Secure file storage and access
   - Data masking for sensitive information
   - Secure data deletion and retention policies

3. API security:
   - Rate limiting and throttling
   - CORS configuration
   - Input validation and sanitization
   - Output encoding to prevent XSS
   - API key management for third-party services
   - JWT token security with proper expiration

4. Application security:
   - CSRF protection implementation
   - Content Security Policy setup
   - Secure HTTP headers configuration
   - Secure cookie settings
   - Cross-site scripting (XSS) prevention
   - SQL injection prevention

5. Security monitoring:
   - Audit logging for sensitive actions
   - Login attempt monitoring
   - Suspicious activity detection
   - Security event alerting
   - Regular security scan integration

Review all existing code and enhance it with these security features. Add middleware, utilities, and components needed to implement comprehensive security.

Generate all necessary files including:
- Security middleware
- Encryption services
- Security utilities
- Audit logging system
- Security monitoring components
- Security configuration

AFTER GENERATING: Test security features by attempting common attack vectors and verifying that they are properly prevented.

🚀 Part 14: Integration & Deployment

INTEGRATION & DEPLOYMENT PROMPT

Create a complete integration and deployment system for the LifeOS application with the following components:

1. Module integration:
   - Cross-module communication framework
   - Shared state management
   - Event system for inter-module notifications
   - Unified data access layer
   - Consistent error handling across modules

2. Build system:
   - Production build configuration
   - Asset optimization (minification, bundling)
   - Code splitting for performance
   - Environment-specific configuration
   - Source maps for debugging

3. Deployment pipeline:
   - Build script automation
   - Environment configuration management
   - Database migration handling
   - Static asset deployment
   - Server configuration

4. Local development setup:
   - Development server configuration
   - Hot module replacement
   - Development tools and utilities
   - Mock API services for development
   - Local environment setup script

5. Documentation:
   - Setup instructions
   - Development workflow
   - Build and deployment process
   - Configuration options
   - Troubleshooting guide

Ensure all modules work together seamlessly and can be deployed as a unified application. Create scripts for building and deploying the application with minimal manual steps.

Generate all necessary files including:
- Integration services
- Build configuration
- Deployment scripts
- Environment configuration
- Documentation files
- Development utilities

AFTER GENERATING: Follow the deployment instructions to build and deploy the application. Verify that all modules work together correctly in the deployed version.

📋 How to Execute This Plan

Step 1: Set Up Your Environment

1. Install required software:

   • Visual Studio Code (free code editor)
   • Node.js (JavaScript runtime)
   • Python (for backend)
   • Git (version control)

2. Create a GitHub account if you don't have one

Step 2: Choose Your AI Code Generator

The best free options are:

• ChatGPT (free tier)
• Claude (free tier)
• Gemini (free tier)
• Replit (has built-in code generation)

Step 3: Follow the Implementation Sequence

1. Copy each prompt section one at a time
2. Paste it into your chosen AI code generator
3. Save the generated code in the appropriate location
4. Test each module before moving to the next one
5. If you encounter issues, ask the AI to debug specific problems

Step 4: Get Help When Needed

If you get stuck:

1. Join developer communities like Stack Overflow or Reddit's r/webdev
2. Use GitHub Copilot (has a free trial) for more targeted coding assistance
3. Look for open source contributors who might be interested in helping

Final Advice

• Start small: Begin with Project Initialization and Authentication first
• Test thoroughly: Verify each module works before moving to the next
• Commit often: Save your progress frequently using Git
• Be patient: Building a complex app takes time, even with AI assistance

Remember, while AI code generators are powerful, they may not produce perfect code every time. Be prepared to iterate and refine the generated code as needed.