Replit Prompt: TruckTax Pro - AI-Powered Tax & Expense Management Web App ## Project Overview Create a progressive web application (PWA) using React that serves as an intelligent tax and expense management assistant specifically designed for truck drivers. The app should leverage AI/ML capabilities for document processing, automated tax calculations, and provide proactive financial guidance while being mobile-optimized for on-the-road use. ## Technical Requirements ### Framework & Setup - Use React 18 with TypeScript - Implement Vite for fast development and building - Use Tailwind CSS for responsive, mobile-first styling - Implement React Router for navigation - Use Zustand for lightweight state management - Integrate Supabase for backend services (authentication, database, storage) ### Core Features to Implement #### 1. Document Ingestion & Processing System javascript // Create these components: - DocumentUploader for drag-and-drop and mobile camera capture - OCRProcessor using Tesseract.js or Google Vision API - AITextExtractor for intelligent data extraction - DocumentClassifier to categorize different document types Requirements: - Mobile camera integration using getUserMedia() API - Drag-and-drop file upload with preview - OCR implementation using Tesseract.js for client-side processing - AI-powered text extraction that can handle: - Screenshots of digital receipts - Various PDF layouts (fuel statements, repair invoices, toll receipts) - Handwritten notes recognition - PDF.js integration for PDF processing - Cloud storage integration with Supabase Storage #### 2. Intelligent Expense Tracking javascript // Implement these features: - ExpenseForm with smart auto-completion - CategoryPredictor using ML classification - LocationTracker for mileage calculation - QuickEntry modal for rapid expense logging Requirements: - Pre-configured expense categories for truckers - Geolocation API for automatic mileage tracking - Service Worker for offline functionality - Voice input using Web Speech API - Auto-categorization using TensorFlow.js - Real-time expense validation #### 3. Proactive Tax Management System javascript // Build these modules: - TaxCalculator for quarterly estimates - FormGenerator for pre-filled tax forms - AnomalyDetector for expense validation - TaxAdvisor chatbot interface Requirements: - Automated quarterly estimated tax calculations - PDF generation for tax forms using jsPDF - Intelligent reconciliation and anomaly detection - Real-time tax advice using AI - Tax deadline reminders with push notifications - Schedule C form automation #### 4. Mobile-Optimized Trucker Interface javascript // Design these UI components: - TruckerDashboard with large touch targets - QuickActionFAB for common tasks - VoiceCommandInterface for hands-free operation - OfflineIndicator with sync status Requirements: - Large, easily tappable buttons (min 44px) - Dark mode for night driving - Voice command integration - Offline-first architecture with sync - Touch-friendly gestures - Fast loading with lazy loading #### 5. Predictive Analytics & Financial Planning javascript // Implement these analytical features: - CashFlowChart using Chart.js - TaxProjection with visual forecasting - SpendingAnalyzer with recommendations - BenchmarkComparison with industry data Requirements: - Interactive charts and visualizations - Predictive cash flow analysis - Future tax liability estimates - Spending optimization suggestions - Industry trend integration - Financial goal tracking ## File Structure /TruckTaxPro ├── /public │ ├── manifest.json │ ├── sw.js │ └── icons/ ├── /src │ ├── /components │ │ ├── /camera │ │ ├── /documents │ │ ├── /expenses │ │ ├── /tax │ │ ├── /charts │ │ └── /ui │ ├── /services │ │ ├── /ai │ │ ├── /ocr │ │ ├── /tax │ │ ├── /analytics │ │ └── /supabase │ ├── /pages │ │ ├── Dashboard │ │ ├── ExpenseEntry │ │ ├── DocumentScan │ │ ├── TaxCenter │ │ └── Analytics │ ├── /hooks │ ├── /utils │ ├── /types │ └── /stores ├── /styles └── /config ## Implementation Steps ### Phase 1: Core Setup & PWA 1. Initialize React project with Vite 2. Configure PWA with service worker 3. Set up Supabase configuration 4. Implement responsive navigation 5. Create authentication system 6. Design mobile-first UI components ### Phase 2: Document Processing 1. Implement camera capture for mobile 2. Build drag-and-drop file upload 3. Integrate Tesseract.js for OCR 4. Create AI text extraction system 5. Add PDF processing capabilities 6. Set up cloud storage ### Phase 3: Expense Management 1. Build expense entry forms 2. Implement geolocation tracking 3. Create auto-categorization with ML 4. Add offline functionality with sync 5. Develop voice input capabilities 6. Build quick-entry interface ### Phase 4: Tax Intelligence 1. Build quarterly tax calculator 2. Implement PDF form generation 3. Create anomaly detection system 4. Add AI-powered tax advice 5. Set up push notifications 6. Build tax deadline reminders ### Phase 5: Analytics & Optimization 1. Implement interactive charts 2. Build cash flow forecasting 3. Create spending analysis 4. Add industry benchmarking 5. Develop financial planning tools 6. Build recommendation engine ## Key Dependencies json { "dependencies": { "react": "^18.x", "react-dom": "^18.x", "react-router-dom": "^6.x", "zustand": "^4.x", "@supabase/supabase-js": "^2.x", "tesseract.js": "^4.x", "tensorflow": "^4.x", "chart.js": "^4.x", "react-chartjs-2": "^5.x", "jspdf": "^2.x", "pdf-lib": "^1.x", "pdfjs-dist": "^3.x", "framer-motion": "^10.x", "react-hook-form": "^7.x", "zod": "^3.x", "date-fns": "^2.x", "lucide-react": "^0.x" }, "devDependencies": { "@types/react": "^18.x", "@types/react-dom": "^18.x", "@vitejs/plugin-react": "^4.x", "typescript": "^5.x", "vite": "^4.x", "tailwindcss": "^3.x", "autoprefixer": "^10.x", "postcss": "^8.x", "vite-plugin-pwa": "^0.x" } } ## PWA Configuration javascript // vite.config.ts import { VitePWA } from 'vite-plugin-pwa' export default defineConfig({ plugins: [ react(), VitePWA({ registerType: 'autoUpdate', includeAssets: ['favicon.ico', 'apple-touch-icon.png'], manifest: { name: 'TruckTax Pro', short_name: 'TruckTax', description: 'AI-powered tax and expense management for truck drivers', theme_color: '#1f2937', background_color: '#ffffff', display: 'standalone', orientation: 'portrait', icons: [ { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' }, { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' } ] } }) ] }) ## Mobile Optimization Features - Touch-friendly interface: Large buttons, proper spacing - Offline functionality: Service worker with background sync - Fast loading: Code splitting and lazy loading - Voice commands: Web Speech API integration - Camera access: Native camera for document capture - Responsive design: Mobile-first approach with Tailwind - Push notifications: For tax deadlines and reminders ## Key Web APIs to Utilize - Camera API: For document capture - Geolocation API: For mileage tracking - Service Worker: For offline functionality - Web Speech API: For voice commands - Push API: For notifications - IndexedDB: For offline data storage - File API: For document processing ## Success Metrics - Performance: Lighthouse score >90 - OCR Accuracy: >95% text extraction accuracy - User Engagement: Daily active users - Tax Accuracy: Automated calculation precision - Mobile Usage: >80% mobile traffic - Offline Capability: Full functionality without internet ## Deployment Strategy 1. Development: Replit for rapid prototyping 2. Staging: Vercel for testing 3. Production: Vercel with custom domain 4. Backend: Supabase for database and auth 5. CDN: Built-in with Vercel 6. Monitoring: Vercel Analytics + Sentry Start with Phase 1 to establish the PWA foundation, then build incrementally. Focus on mobile-first design and offline capabilities since truck drivers often work in areas with poor connectivity. The web app should feel native while leveraging web technologies for cross-platform compatibility.