CoCoding.ai Logococoding.ai

connectors

Hubspot

🎯 How to Build a HubSpot App with Cocoding.ai

For Non-Technical People - No Coding Required!

🌟 What is Cocoding.ai?

Cocoding.ai is an AI that builds complete, production-ready applications for you. Just tell it what you want in plain English, and it creates everything automatically.

Think of it like:

  • Ordering food: You describe what you want, the chef makes it
  • Cocoding.ai: You describe your app, AI builds it

🚀 Building Your HubSpot Pipeline App

Step 1: Access Cocoding.ai

  1. Go to:
  2. Sign up or log in
  3. Start a new project

Step 2: Tell Cocoding.ai What You Want

Describe your app in plain English. Here are some examples:

Example 1 - Pipeline Monitor:

Build me a HubSpot deal monitoring app where I can:
- View all my deals in a dashboard
- See which deals are "stuck" or at-risk
- Update deal stages and next steps
- Create tasks and notes for deals
- Use HubSpot OAuth for secure connection

Example 2 - Deal Health Tracker:

Create a deal health scoring app that:
- Pulls deals from HubSpot pipelines
- Shows RED/YELLOW/GREEN health status
- Highlights inactive deals
- Tracks overdue tasks and missing next steps
- Connects to HubSpot via OAuth

Example 3 - Sales Pipeline Manager:

Build a pipeline manager that:
- Syncs with HubSpot deals
- Shows deal health scores (0-100)
- Allows bulk stage updates
- Creates tasks for multiple deals
- Uses secure HubSpot integration

Cocoding.ai will:

  • Create a React frontend with beautiful UI
  • Build a Node.js backend
  • Set up PostgreSQL database
  • Configure HubSpot OAuth integration
  • Add security and encryption
  • Generate documentation

Step 3: Wait for Cocoding.ai to Build

What happens next:

  1. ⚡ Cocoding.ai reads your requirements (5 seconds)
  2. 🏗️ Creates complete application structure (30 seconds)
  3. 📝 Writes all code files (1-2 minutes)
  4. 🎨 Designs beautiful UI (included)
  5. 🔐 Sets up security (automatic)
  6. 📚 Generates documentation (automatic)

Total time: 2-3 minutes!

You'll see Cocoding.ai:

  • Creating files
  • Installing dependencies
  • Setting up database
  • Starting servers

Step 4: Your App is Ready!

Cocoding.ai automatically:

  • ✅ Creates frontend (React app)
  • ✅ Creates backend (API server)
  • ✅ Sets up database (PostgreSQL)
  • ✅ Configures HubSpot integration
  • ✅ Adds security (encryption, JWT)
  • ✅ Starts both servers

You get:

  • Working application at http://localhost:8000
  • Complete documentation
  • Setup guides
  • Ready to use!

🔑 Now Connect to HubSpot

Step 1: Get HubSpot Developer Account (FREE)

Don't have HubSpot?

  1. Go to:
  2. Sign up for a FREE developer account
  3. You now have access to HubSpot's tools!

Step 2: Create HubSpot Public App

Follow these simple steps:

  1. Login to HubSpot Developers

- Go to

- Log in with your HubSpot account

  1. Go to Your Apps

- Click the "your apps" icon in the top navigation

- Click "Create app"

  1. Fill in the form:

App name: Pipeline Pulse (or your preferred name)

  1. Choose Auth Method

- Select "OAuth 2.0"

  1. Configure OAuth Settings

Redirect URL:

```

http://localhost:8001/api/integrations/hubspot/callback

```

  1. Add Scopes (Required permissions)

Copy and paste these scopes:

```

crm.objects.deals.read

crm.objects.deals.write

crm.objects.owners.read

crm.schemas.deals.read

crm.objects.contacts.read

crm.objects.companies.read

crm.objects.notes.write

crm.objects.tasks.write

crm.objects.tasks.read

```

Click "Add" after each one

  1. Save

- Click "Save" button at the bottom

- You'll see your Client ID and Client Secret

  1. Copy Your Credentials

- Copy the Client ID (looks like: a1b2c3d4-e5f6-7890-abcd-ef1234567890)

- Click "Show" to reveal Client Secret

- Copy the Client Secret (looks like: 12345678-90ab-cdef-ghij-klmnopqrstuv)

Save these somewhere safe!

Step 3: Configure Your App

Cocoding.ai created a `.env` file for you. Edit it:

  1. Find the `.env` file in your backend project folder
  2. Open with Notepad (Windows) or TextEdit (Mac)
  3. Paste your HubSpot keys:
HUBSPOT_CLIENT_ID=paste-your-client-id-here
HUBSPOT_CLIENT_SECRET=paste-your-client-secret-here
HUBSPOT_REDIRECT_URI=http://localhost:8001/api/integrations/hubspot/callback
  1. Generate security keys:

On Mac/Linux:

openssl rand -base64 32

On Windows:

node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"

Run this command three times, copy each result, and paste:

JWT_SECRET=paste-first-key-here
COOKIE_SECRET=paste-second-key-here
ENCRYPTION_KEY=paste-third-key-here
  1. Save the file (Ctrl+S or Cmd+S)

Step 4: Restart Your App

If servers are still running:

  1. Stop them: Press Ctrl+C in both terminal windows
  2. Start again:

Terminal 1 (Backend):

cd backend
pnpm dev

Terminal 2 (Frontend):

pnpm dev

Step 5: Connect HubSpot

  1. Open your browser: http://localhost:8000
  2. Sign up for an account in the app
  3. Log in

📸 Screenshot placeholder: App homepage at localhost:8000

  1. Click "HubSpot Integration" in sidebar

📸 Screenshot placeholder: Sidebar showing HubSpot Integration menu item

  1. Click "Connect HubSpot Account" button

📸 Screenshot placeholder: HubSpot Integration page with "Connect HubSpot Account" button

  1. You'll be redirected to HubSpot

📸 Screenshot placeholder: HubSpot OAuth authorization screen

  1. Click "Grant Access" to authorize
  2. Done! You're redirected back to your app

🎉 Start Using Your App!

View Your Dashboard

  • Click "Dashboard" in sidebar
  • See deal health KPIs
  • View RED/YELLOW/GREEN distribution

📸 Screenshot placeholder: Dashboard showing KPI cards and health distribution

View Your Deals

  • Click "Deals" in sidebar
  • See all your HubSpot deals
  • Filter by health status
  • Sort by stuck score

📸 Screenshot placeholder: Deals list view with health status badges and stuck scores

Update Deal Details

  • Click any deal to view details
  • See deal properties, activities, tasks
  • Update stage, next step, amount

📸 Screenshot placeholder: Deal detail page with properties and activity timeline

Create Tasks and Notes

  • Open a deal detail page
  • Scroll to "Create Task"
  • Fill in task details
  • Click "Create Task"

📸 Screenshot placeholder: Create Task form with subject, due date, and type fields

Bulk Operations

  • Check boxes next to multiple deals
  • Click "Bulk Actions"
  • Choose: Change Stage, Create Tasks

📸 Screenshot placeholder: Bulk Actions menu with stage change and task creation options

🎯 What Cocoding.ai Built For You

Complete Application

  • ✅ Beautiful React frontend
  • ✅ Secure Node.js backend
  • ✅ PostgreSQL database
  • ✅ HubSpot OAuth integration
  • ✅ Automatic token refresh
  • ✅ Deal health scoring
  • ✅ User authentication
  • ✅ Responsive design

Security Features

  • ✅ Encrypted HubSpot tokens (AES-256)
  • ✅ JWT authentication
  • ✅ Secure password hashing
  • ✅ Rate limiting
  • ✅ CSRF protection

Documentation

  • ✅ Setup guides
  • ✅ User manual
  • ✅ FAQ
  • ✅ Troubleshooting
  • ✅ API documentation

All this in 2-3 minutes!

🧠 Understanding Deal Health Scoring

Health Status Colors

🔴 RED - Needs urgent attention if:

  • Close date has passed
  • No activity for >14 days
  • Has overdue tasks
  • Missing next step

🟡 YELLOW - At risk if:

  • No activity for 7-14 days
  • Close date within 7 days AND no next step

🟢 GREEN - Healthy if:

  • Recent activity
  • Has clear next step
  • On track for close date

Stuck Score (0-100)

Higher score = More stuck:

Points added for:

  • Inactivity: 2 points per day (max 40)
  • Close date passed: +30 points
  • Missing next step: +20 points
  • High amount: +5-10 points (prioritizes valuable deals)

🔧 Troubleshooting

"HubSpot not connected"

  • Check your Client ID and Secret are correct
  • Make sure callback URL is exact
  • Verify all scopes are granted

"Invalid or expired token"

  • Token may have expired
  • Re-authorize in HubSpot Integration page
  • Clear cookies and log in again

"Failed to fetch deals"

  • Verify HubSpot scopes are granted
  • Check token hasn't been revoked in HubSpot
  • Ensure you have deals in your pipeline

Database connection errors

  • Verify PostgreSQL is running on localhost:5432
  • Check DATABASE_URL in backend/.env
  • Run migrations: pnpm prisma:migrate

🌐 Making it Available to Your Team

Option 1: Local Network (Free)

If everyone is in your office:

  1. Find your computer's IP address
  2. Share: http://YOUR-IP:8000
  3. Team members access from their browsers

Option 2: Cloud Deployment (Recommended)

Cocoding.ai can help deploy to:

  • Vercel (Frontend) - FREE
  • Railway (Backend) - $5/month
  • Supabase (Database) - FREE tier available

Just ask Cocoding.ai:

Deploy my HubSpot app to production with:
- Frontend on Vercel
- Backend on Railway
- Database on Supabase
- HTTPS enabled

Cocoding.ai will handle everything!

💡 Pro Tips

Customize Your App

Want to change something? Just ask Cocoding.ai:

Examples:

  • "Add a filter for deal amount range"
  • "Change health score thresholds"
  • "Add export to CSV feature"
  • "Show last activity date for each deal"
  • "Add email notifications for RED deals"

Cocoding.ai will modify the code for you!

Add More Features

"Add a reports page showing pipeline velocity"
"Integrate with Slack to notify of stuck deals"
"Add a calendar view for task due dates"
"Create a mobile-friendly version"

Integrate Other Services

"Add Salesforce to sync deals across platforms"
"Integrate with Gmail to email deal updates"
"Connect to Stripe to track payments"
"Add Zoom to schedule meetings from deals"

Cocoding.ai builds it all!

🎓 Understanding What You Have

Your Application Has 3 Parts:

  1. Frontend (Port 8000)

- The website you see in your browser

- React application with beautiful UI

- Talks to backend for data

  1. Backend (Port 8001)

- Handles HubSpot communication

- Manages security and encryption

- Calculates deal health scores

- Stores audit logs

  1. Database (PostgreSQL)

- Stores your app users

- Stores encrypted HubSpot tokens

- Stores action logs

- Caches owner data

All three work together seamlessly!

📊 What Data is Stored Where

In Your Database (PostgreSQL)

  • ✅ Your app login credentials
  • ✅ Encrypted HubSpot tokens
  • ✅ Audit logs (who did what, when)
  • ✅ Cached HubSpot owner data

In HubSpot (stays there)

  • ✅ All your deals
  • ✅ All your contacts and companies
  • ✅ All your tasks and notes
  • ✅ All your pipeline data

Your app just reads and updates HubSpot - data stays in HubSpot!

🔐 Security You Get Automatically

Cocoding.ai built enterprise-grade security:

  • ✅ Encrypted tokens - HubSpot credentials protected
  • ✅ Hashed passwords - Your login is secure
  • ✅ JWT authentication - Industry standard
  • ✅ httpOnly cookies - Tokens never exposed to JavaScript
  • ✅ HTTPS ready - For production deployment
  • ✅ Rate limiting - Prevents attacks
  • ✅ Audit logging - Track all actions
  • ✅ CORS protection - Controls who can access your API

You didn't write a single line of security code!

🚀 Next Steps

1. Use Your App Daily

  • Check dashboard for stuck deals
  • Update deal stages regularly
  • Create tasks for at-risk deals
  • Monitor health score changes

2. Customize with Cocoding.ai

  • Adjust health score thresholds
  • Add custom deal properties
  • Create custom views
  • Build reports and analytics

3. Deploy for Your Team

  • Get a domain name
  • Deploy to cloud
  • Enable HTTPS
  • Invite team members

4. Build More Apps

Cocoding.ai can build anything:

  • Customer portals
  • Inventory systems
  • Project management tools
  • Analytics dashboards
  • E-commerce sites
  • And much more!

🎁 What You Get with Cocoding.ai

Instant Development

  • ⚡ 2-3 minutes to complete app
  • 🎨 Beautiful UI automatically
  • 🔐 Security built-in
  • 📚 Documentation included

Production-Ready Code

  • ✅ Best practices followed
  • ✅ Clean architecture
  • ✅ Fully tested
  • ✅ Scalable design

Complete Package

  • ✅ Frontend + Backend
  • ✅ Database setup
  • ✅ API integration
  • ✅ User authentication
  • ✅ Deployment ready

No Technical Knowledge Needed

  • ✅ Plain English instructions
  • ✅ Automatic setup
  • ✅ Guided configuration
  • ✅ Troubleshooting help

📞 Getting Help

Cocoding.ai Support

  • Visit:
  • Ask questions in plain English
  • Get instant code modifications
  • Deploy to production

HubSpot Help

  • Developer docs:
  • CRM Overview:
  • Community forums:

✅ Quick Checklist

Before you start using your app:

  • [ ] Cocoding.ai built the application (2-3 minutes)
  • [ ] Created HubSpot developer account (FREE)
  • [ ] Created public app in HubSpot
  • [ ] Configured OAuth 2.0 with correct redirect URL
  • [ ] Added all required scopes
  • [ ] Copied Client ID and Client Secret to .env
  • [ ] Generated JWTSECRET, COOKIESECRET, ENCRYPTION_KEY
  • [ ] Both servers are running (8000 and 8001)
  • [ ] Created account in the app
  • [ ] Connected HubSpot successfully
  • [ ] Can see your deals!

🎉 Success!

You now have a professional HubSpot application:

  • Built in minutes by AI
  • No coding required
  • Production-ready
  • Fully customizable
  • Secure and scalable

All thanks to Cocoding.ai!

🌟 Real-World Example

Alex's Story:

Before Cocoding.ai:

  • Logged into HubSpot multiple times daily
  • Manually checked each deal for activity
  • Forgot which deals needed attention
  • No way to prioritize stuck deals
  • Took 2 hours daily to review pipeline

After Cocoding.ai (3 minutes to build):

  • Dashboard shows all at-risk deals instantly
  • Health scores highlight top priorities
  • Bulk updates for multiple deals
  • One-click task creation
  • Takes 20 minutes daily to manage pipeline

Time saved: 1 hour 40 minutes per day!

🎯 Your Turn!

Ready to Build?

  1. Go to:
  2. Describe your app in plain English
  3. Wait 2-3 minutes
  4. Follow HubSpot setup (this guide)
  5. Start using your app!

Want Something Different?

Just describe it to Cocoding.ai:

  • "Build me a contact management system"
  • "Create a lead scoring application"
  • "Make a sales analytics dashboard"
  • "Build a customer onboarding tracker"

Cocoding.ai builds it all!

🚀 Final Words

You just learned how to:

  • ✅ Build a complete application with AI
  • ✅ Integrate with HubSpot
  • ✅ Deploy production-ready software
  • ✅ Customize and extend features

No coding required. Just plain English.

Welcome to the future of software development!

Visit to build your next app!

Last Updated: January 2025

Version: 1.0.0

Built with: Cocoding.ai - The AI that builds production-ready applications