CommsFlow AI is a premium, dark-themed enterprise SaaS application and visual editor that enables organizations to compose, manage, and audit all corporate communications (newsletters, HR announcements, changelogs, incident reports, invoices, and billing receipts) from a single on-brand studio workspace.
Modern companies use fragmented tools across departments to compose team updates, client notices, invoices, and product releases. This results in inconsistent visual branding, repetitive developer hours coding raw HTML, and high delivery bounce rates.
CommsFlow AI centralizes the visual layout creation process. HR, Support, Operations, Developers, and Finance teams construct responsive, pixel-perfect, on-brand documents visually on a canvas with absolute brand kit lockdowns, then export directly to clean HTML/PDF code templates.
- Three-Column Interface: Left toolbox with draggable block templates, searchable Lucide icon catalogs, and locked color guidelines swatches. Center interactive canvas with live desktop/tablet/mobile width scaling. Right inspector panel modifying spacing, padding, borders, background hexes, and font sizes.
- Top Toolbar controls: Undo/Redo buffers, contributor sharing layouts, version timeline restore checkpoints, and instant responsive ZIP/PDF mock exports.
- Context-Aware Assistance: Analyzes active document type (e.g. Incident Report) to suggest engaging subject lines, translate content, resolve grammar errors, summarize sections, or write custom layout blocks.
- Typewriter Output Stream: Simulates LLM processing with a fluid character-by-character typewriter effect and dot-bouncing loaders.
- Palette Restrictions: Admins toggle global brand locks to restrict collaborators from altering corporate colors or custom assets.
- Team Seat Management: Manage permissions and invite team members, editing roles (Owner, Admin, Member, Guest) dynamically.
- Security & API Keys: Generate, copy to clipboard, and audit custom webhook security hashes to connect external delivery loops.
- Delivery Area Graphs: Glowing SVG area charts tracking monthly delivery trends.
- Department Donut Charts: Allocate and display delivery distributions across HR, Marketing, Engineering, and Finance folders.
- Timeline Logs: Export logs to CSV/Excel reports and view chronological system audits.
- Zero-Hash Modals: Legal policies (Privacy Policy, Terms of Service, GDPR) and resources open in responsive overlays.
- Browser Back Button Popstates: Intercepts browser/hardware back-actions to dismiss active modals or return to the previously active guide topic.
- Framework: React 19 + Vite + TypeScript
- CSS Styling: Tailwind CSS v4 (using
@import "tailwindcss"and@themevariable utilities) - Transitions: Framer Motion (powering page fades, skeletons, and modal scales)
- Vectors: Lucide React (custom icons mapping)
c:\CommsFlow
├── public/
│ ├── favicon.svg # Custom CommsFlow brand logo SVG vector
│ └── icons.svg # SVG resource markers
├── src/
│ ├── components/
│ │ ├── auth/
│ │ │ ├── AuthLayout.tsx # Glassmorphism auth shell wrapper
│ │ │ ├── Login.tsx # Sign-in form with validation & social SSO
│ │ │ ├── Register.tsx # Signup with password strength gauge
│ │ │ ├── ForgotPassword.tsx # Recovery link triggers
│ │ │ ├── ResetPassword.tsx # Password change forms
│ │ │ └── VerifyEmail.tsx # 6-box OTP verify flow with resend timers
│ │ ├── dashboard/
│ │ │ ├── DashboardSidebar.tsx # Workspace switcher & sidebar selections
│ │ │ ├── DashboardHeader.tsx # Searches, notifications & user profile
│ │ │ ├── OverviewTab.tsx # Sparklines, quick tasks & active drafts
│ │ │ ├── TemplatesTab.tsx # 25 template cards with action menus
│ │ │ ├── AnalyticsTab.tsx # SVG metrics charts & CSV exporters
│ │ │ ├── ActivitiesTab.tsx # Audited transaction timeline logs
│ │ │ └── SettingsTab.tsx # Double-sidebar settings & API generators
│ │ ├── editor/
│ │ │ ├── DocumentEditor.tsx # Visual layout editing canvas
│ │ │ └── AIChatbot.tsx # Sparkles AI chat assistant interface
│ │ ├── landing/
│ │ │ ├── AnimatedBackground.tsx # Grid pattern & floating lighting orbs
│ │ │ ├── Navbar.tsx # Blurring sticky navbar with mobile drawer
│ │ │ ├── Hero.tsx # CTA sections & editor dashboard mockup
│ │ │ ├── TrustedCompanies.tsx # SVGs company marquee ticker
│ │ │ ├── Features.tsx # Grid highlighting visual builder features
│ │ │ ├── IndustrySolutions.tsx # Tabbed team workflow spotlights
│ │ │ ├── Testimonials.tsx # Star reviews & user comments
│ │ │ ├── Pricing.tsx # Monthly/Annual fee calculator
│ │ │ ├── FAQ.tsx # Frequently asked questions list
│ │ │ ├── CTA.tsx # Final conversion banner card
│ │ │ ├── Footer.tsx # Policy guides, resources & email newsletter
│ │ │ └── NotFound.tsx # Space-themed 404 page with mockup terminal logs
│ │ └── ui/
│ │ ├── Button.tsx # Reusable motion-wrapped button component
│ │ ├── Accordion.tsx # Animating FAQ list accordion
│ │ └── Logo.tsx # Custom premium SVG brand logo
│ ├── context/
│ │ └── NavigationContext.tsx # Context router managing client routes
│ ├── App.tsx # Root layout router
│ ├── index.css # Tailwind imports, gradients, & scrollbar styling
│ └── main.tsx # Mounting DOM entrypoint
Follow these commands to clone, install dependencies, and launch the development studio:
npm installnpm run devOpen http://localhost:5173 in your browser to view the application.
npm run buildGenerates minified assets in the dist folder, compiling cleanly with zero warnings or type mismatches.
To bypass standard auth checks and experience the workspace console:
- Email Address:
admin@commsflow.ai(or any valid email structure) - Password:
password123(or any string matching>= 6characters) - Verify OTP Code: Enter any 6 digits (e.g.
123456)
Designed, developed, and maintained by Vijayapandian T.
- GitHub: @VIJAYAPANDIANT
- LinkedIn: Vijayapandian T
- X / Twitter: @Vijayapand33371
- Support Email: vijayapandian112007@gmail.com