{"slug":"business/UNIFIED_VITE_APP","title":"IntegrateWise - Unified Vite App","section":"business","sectionLabel":"Business","status":"unclassified","type":"document","path":"business/UNIFIED_VITE_APP.mdx","bytes":5705,"description":null,"updated":null,"source":"integratewise/Integratewise-docs-wiki","content":"\n> **Tier C — Historical.** This document is a point-in-time snapshot preserved for reference. For current architecture, see [CANONICAL_PLATFORM_ARCHITECTURE.md](../architecture/CANONICAL_PLATFORM_ARCHITECTURE.md).\n\n## ✅ Status: READY FOR DEPLOYMENT\n\n---\n\n## What Was Built\n\n### Unified Vite Application\n\nLocation: `integratewise-complete/apps/web-vite/`\n\nCombines **Marketing Site** + **App Dashboard** in a single clean codebase.\n\n---\n\n## Project Structure\n\n```\napps/web-vite/\n├── src/\n│   ├── components/\n│   │   ├── app/              # Dashboard Components\n│   │   │   ├── AppLayout.tsx       # App shell with sidebar\n│   │   │   ├── AppSidebar.tsx      # Navigation sidebar\n│   │   │   ├── AppHeader.tsx       # Top header with search\n│   │   │   ├── DashboardPage.tsx   # Main dashboard\n│   │   │   ├── AccountsPage.tsx    # Account management\n│   │   │   ├── TasksPage.tsx       # Task list\n│   │   │   ├── CalendarPage.tsx    # Calendar view\n│   │   │   ├── IntelligencePage.tsx # AI insights\n│   │   │   └── SettingsPage.tsx    # Settings & integrations\n│   │   ├── pages/            # Marketing Pages\n│   │   │   ├── HomePage.tsx\n│   │   │   ├── PricingPage.tsx\n│   │   │   ├── SecurityPage.tsx\n│   │   │   ├── StoryPage.tsx\n│   │   │   ├── IntegrationsPage.tsx\n│   │   │   └── LoginPage.tsx\n│   │   ├── workspace/        # Workspace Screen (Figma)\n│   │   ├── ui/               # shadcn/ui components (25+)\n│   │   └── motion/           # Animation components\n│   ├── lib/\n│   │   └── api.ts            # API service layer\n│   ├── routes.ts             # React Router config\n│   ├── main.tsx              # App entry\n│   └── index.css             # Tailwind v4 styles\n├── dist/                     # Build output\n├── package.json\n├── vite.config.ts\n├── wrangler.toml             # Cloudflare Pages config\n└── README.md\n```\n\n---\n\n## Routes\n\n### Marketing Site (Public)\n\n| Route           | Page              |\n| --------------- | ----------------- |\n| `/`             | Home              |\n| `/pricing`      | Pricing tiers     |\n| `/security`     | Security features |\n| `/story`        | About us          |\n| `/integrations` | Integrations      |\n| `/login`        | Login             |\n\n### App Dashboard (Authenticated)\n\n| Route               | Page                |\n| ------------------- | ------------------- |\n| `/app`              | Dashboard (default) |\n| `/app/dashboard`    | Main workspace      |\n| `/app/accounts`     | Account management  |\n| `/app/tasks`        | Task list           |\n| `/app/calendar`     | Calendar view       |\n| `/app/intelligence` | AI insights         |\n| `/app/settings`     | Settings            |\n\n---\n\n## Tech Stack\n\n| Layer      | Technology      |\n| ---------- | --------------- |\n| Framework  | Vite + React 18 |\n| Routing    | React Router v7 |\n| Styling    | Tailwind CSS v4 |\n| Components | shadcn/ui       |\n| Animation  | Framer Motion   |\n| Icons      | Lucide React    |\n| Charts     | Recharts        |\n| Forms      | React Hook Form |\n\n---\n\n## Build Status\n\n```\n✅ npm install - SUCCESS\n✅ npm run build - SUCCESS\n✅ Output: dist/ folder ready\n⚠️  Chunk size warning (707KB) - acceptable for now\n```\n\n---\n\n## Deployment\n\n### Cloudflare Pages\n\n```bash\ncd apps/web-vite\n\n# Build\nnpm run build\n\n# Deploy\nwrangler pages deploy dist\n```\n\n### Environment Variables\n\nCreate `.env.local`:\n\n```env\nVITE_SUPABASE_URL=https://your-project.supabase.co\nVITE_SUPABASE_ANON_KEY=your-anon-key\nVITE_API_URL=https://api.integratewise.com\n```\n\n---\n\n## Why Vite vs Next.js?\n\n| Aspect        | Next.js (Old)     | Vite (New)         |\n| ------------- | ----------------- | ------------------ |\n| Dev Speed     | Good              | ⚡ Faster          |\n| Build Output  | Complex           | Clean              |\n| Styling       | Tailwind v3       | Tailwind v4        |\n| Visual Polish | Standard          | Premium (Figma)    |\n| Complexity    | High (App Router) | Low (React Router) |\n| Mental Model  | Multiple concepts | Simple SPA         |\n\n---\n\n## Key Features\n\n### Marketing\n\n- Anti-gravity background animation\n- Responsive design\n- 5 marketing pages\n- Professional polish\n\n### App Dashboard\n\n- Role-based sidebar navigation\n- Real-time data display\n- AI insights feed\n- Integration management\n- Account health tracking\n- Task management\n- Calendar view\n\n---\n\n## Next Steps\n\n1. **Set environment variables**\n\n   ```bash\n   wrangler secret put VITE_SUPABASE_URL\n   wrangler secret put VITE_SUPABASE_ANON_KEY\n   ```\n\n2. **Deploy to Cloudflare Pages**\n\n   ```bash\n   wrangler pages deploy dist\n   ```\n\n3. **Connect to backend**\n   - Wire API calls to L3 services\n   - Add authentication\n   - Enable real-time updates\n\n4. **Test end-to-end**\n   - Marketing → Login → Dashboard flow\n   - All routes working\n   - API integration\n\n---\n\n## Timeline\n\n| Phase             | Status     |\n| ----------------- | ---------- |\n| Vite app setup    | ✅ DONE    |\n| Figma integration | ✅ DONE    |\n| Marketing pages   | ✅ DONE    |\n| Dashboard pages   | ✅ DONE    |\n| Build & test      | ✅ DONE    |\n| Deploy            | ⏳ READY   |\n| Backend wiring    | ⏳ PENDING |\n\n---\n\n## Commands\n\n```bash\n# Development\ncd apps/web-vite\nnpm install\nnpm run dev\n\n# Production build\nnpm run build\n\n# Deploy\nwrangler pages deploy dist\n```\n\n---\n\n**The unified Vite app is ready for deployment!** 🚀\n"}