Taptico AI - Elite Marketing Strategy Generator

Live Demo: View Project
Current Version: bb5d11d3
Status: Active Development

Overview

Taptico AI is an AI-powered marketing strategy platform that generates comprehensive, actionable marketing plans for service businesses in minutes. Built with React 19, Tailwind CSS 4, tRPC, and Express.

Key Features

• 🎯 AI-Generated Strategies: Complete marketing plans with channel recommendations, budgets, and timelines
• 📊 Interactive Strategy Preview: Detailed example showing Ralph's Roofing (Atlanta) with 90-day action plan
• 💰 Cost & ROI Projections: Specific tool costs, monthly budgets, and expected returns
• 🎨 Premium Animations: Cursor-following glows, floating effects, particle animations
• ♿ ADA Compliant: WCAG 2.1 Level AA standards with proper contrast ratios
• 📱 Fully Responsive: Optimized for desktop, tablet, and mobile

Tech Stack

• Frontend: React 19, Tailwind CSS 4, TypeScript
• Backend: Express 4, tRPC 11, Node.js 22
• Database: MySQL/TiDB with Drizzle ORM
• Auth: Manus OAuth integration
• UI Components: shadcn/ui
• Animations: CSS transforms, Framer Motion patterns

Project Structure

client/
  src/
    pages/              # Page components (Home, Pricing, Dashboard)
    components/         # Reusable UI components
      PricingCard.tsx   # Animated pricing cards with cursor glow
      FeatureCard.tsx   # Animated feature cards
      StrategySampleModal.tsx  # Strategy preview modal
      StrategyGenerationAnimation.tsx  # Hero background animation
    lib/trpc.ts         # tRPC client setup
    index.css           # Global styles and animations
server/
  routers.ts            # tRPC API routes
  db.ts                 # Database query helpers
drizzle/
  schema.ts             # Database schema

Getting Started

Prerequisites

• Node.js 22+
• pnpm
• MySQL/TiDB database

Installation

# Clone the repository
git clone https://github.com/nicktapp/taptico-ai.git
cd taptico-ai

# Install dependencies
pnpm install

# Set up environment variables
# Copy .env.example to .env and fill in your values

# Push database schema
pnpm db:push

# Start development server
pnpm dev

The app will be available at http://localhost:3000

Key Features Implemented

1. Landing Page

• Animated hero section with strategy generation background
• 30+ floating particles
• Cursor-following glow effects on CTA buttons
• Animated feature cards with staggered animations
• Interactive "How It Works" section

2. Pricing Page

• Three pricing tiers (Starter $49, Professional $149, Enterprise $299)
• Animated pricing cards with cursor-following glows
• Monthly/Annual billing toggle
• "Most Popular" badge
• Pay-per-strategy option ($49/strategy)
• Comprehensive plan comparison table

3. Strategy Sample Modal

Example Business: Ralph's Roofing - Atlanta, Georgia

Content Includes:

• Executive summary (business context, goals, challenges)
• Target audience breakdown
• 3 marketing channels with costs and ROI:
  • Google Local Search: $4,200/month, 20-25 leads, 12x ROI
  • Facebook & Nextdoor: $2,800/month, 12-15 leads, 10x ROI
  • Reviews & Referrals: $1,500/month, 8-10 leads, 8x ROI
• 90-day action plan with weekly tasks
• Specific costs and time estimates for each task
• "Why This Works" reasoning sections
• Success metrics and ROI projections (13x return)
• Export buttons (Notion, Asana, Google/Apple Calendar)

Writing Style:

• 7th grade reading level
• Clear, approachable language
• Actionable tasks with specific steps
• Transparent about costs and realistic results

4. Animations & Interactions

• Cursor-following glow effects on cards
• Floating animations with staggered delays
• Animated gradient backgrounds
• Particle effects (30+ floating dots)
• Shimmer overlays on hover
• Smooth transitions throughout
• Respects prefers-reduced-motion

Development Roadmap

High Priority

• Live ROI Calculator - Interactive widget on pricing page
• FAQ Accordion - Address common objections
• Testimonials Section - Customer success stories

Medium Priority

• "Trusted By" Logo Bar - Build credibility
• Live Strategy Counter - Show active usage
• Email Capture - Grow email list

Lower Priority

• Case Studies Page - Detailed success stories
• Keyboard Focus Indicators - Improve accessibility
• Sticky Compare Button - UX enhancement

Design Principles

Visual Design

• Colors: Black background, royal blue (#3B82F6) accents, white text
• Typography: Clean sans-serif with clear hierarchy
• Spacing: Generous whitespace for readability
• Animations: Premium feel without distraction

Content Strategy

• Reading Level: 7th grade for accessibility
• Tone: Approachable, helpful, transparent
• Structure: Clear reasoning for every recommendation
• Actionability: Specific tasks with time/cost estimates

Target Audience (ICP)

• Service businesses (home services, attorneys, consultants)
• Non-tech founders and marketers
• Need clear, actionable guidance
• Value ROI and specific results

Environment Variables

Required environment variables (managed by Manus platform):

DATABASE_URL=              # MySQL connection string
JWT_SECRET=                # Session signing secret
VITE_APP_ID=              # OAuth app ID
OAUTH_SERVER_URL=         # OAuth backend URL
VITE_OAUTH_PORTAL_URL=    # OAuth frontend URL
BUILT_IN_FORGE_API_URL=   # Manus APIs URL
BUILT_IN_FORGE_API_KEY=   # Manus APIs key

Available Scripts

pnpm dev          # Start dev server
pnpm build        # Build for production
pnpm preview      # Preview production build
pnpm db:push      # Push schema changes to database
pnpm test         # Run tests

Contributing

This is a private project. For questions or access, contact the project owner.

License

Proprietary - All rights reserved

Contact

Project Owner: Nick Tapp
GitHub: @nicktapp

---

Current Checkpoint: v1.0-bb5d11d3
Last Updated: December 13, 2025

Force rebuild Mon Dec 15 11:34:55 EST 2025