🏆 Hackathon Winning project!

🏆 1st Prize Winner - Hackathon Champion! 🎉

Read the Full Winning Announcement & Project Journey on LinkedIn

HappiTrack -CRM ecosystem

The Primary Goal: This entire architecture is designed to capture high resolution user intent data to perfectly fuel the Happilee Chat Bot. Instead of spamming users, the HappiTrack engine ensures the chatbot knows exactly which correct customers to message, at what specific time, and with exactly the right personalized discount (e.g. VIP unlocks, Cart Rescue Links).

It is split into two massive components:

1. Trusty (The Storefront): A fully responsive e-commerce mockup featuring dynamic rendering, functional shopping carts, and UI animations.
2. HappiTrack (The Brain): A Node.js behavioral engine that passively tracks user movements, builds dynamic profiles, issues VIP cryptographic discount tokens, and actively attempts cart-abandonment rescues to feed to the Happilee bot.

---

Problem Statement

Currently, the Happilee Chat Bot infrastructure lacks deep user context and the ability to track user behavior on the storefront. This inevitably forces Happilee to rely on "spray and pray" mass-broadcasting—blasting generic promotional bulk messages to all users without knowing what they are actually interested in. This blind broadcasting heavily impacts the user experience of the customer using the chat bot, leading to annoyed users, blocked WhatsApp numbers, and wasted marketing potential.

The Solution

HappiTrack bridges this gap by acting as an intelligent behavioral pipeline between the storefront and Happilee's Conversational AI. By embedding a lightweight "Spy" tracker into the e-commerce store, the engine passively monitors and quantifies user micro-intents (such as lingering on specific product specs or exhibiting exit intent).

It feeds this high-resolution telemetry directly into the HappiTrack ruleset engine, empowering the Happilee Chat Bot to transition from blind "mass broadcasting" to laser-targeted, highly contextual messaging. Now, Happilee only reaches out to qualified, high-intent users at the perfect moment with hyper-personalized nudges (e.g., "I saw you looking at the Lenovo LOQ laptop, here is a secure 10% off link to finalize your checkout!"). This preserves the customer's User Experience, builds trust, and dramatically increases conversion rates.

---

Architecture Overview

The system is built on a custom "Spy and Brain" architecture telemetry loop.

• The "Spy" (tracker.js): A Javascript tracker (tracker.js) runs invisibly across the store. It captures micro-interactions: mouse coordinates, dwell time on product specifications, button clicks, and "Exit Intent" (the exact millisecond a user tries to leave the page).
• The "Brain" (server.js): An Express.js Node server (server.js) ingesting real-time pings. It maps these events to users, scoring their interest across dozens of product tags, dynamically queuing WhatsApp follow-ups or secure discount tokens based on hardcoded conditional rules.

---

File Structure

Below is the complete blueprint of the platform:

 hack-happi
 ┣  backend
 ┃ ┣  server.js         # The Core Brain: Handles CRM DB, rulesets, and campaign logic.
 ┃ ┗  package.json      # Dependencies (Express, Cors)
 ┣  frontend
 ┃ ┣  css
 ┃ ┃ ┗  style.css       # Core storefront styling.
 ┃ ┣  js
 ┃ ┃ ┣  admin.js        # Engine for the CRM Dashboard (link generation, live fetching).
 ┃ ┃ ┣  analytics.js    # Premium Chart.js configurator processing CRM data into KPIs.
 ┃ ┃ ┣  script.js       # The store's logic (Discount parsers, Cart states, DOM rendering).
 ┃ ┃ ┗  tracker.js      # The Spy: Event listeners tracking the user's browser payload.
 ┃ ┣  index.html        # Main Trusty storefront & featured deal.
 ┃ ┣  product.html      # Dynamic storefront product viewing templates.
 ┃ ┣  checkout.html     # Mock endpoint for testing cryptographic VIP tokens.
 ┃ ┣  admin.html        # Customer Intelligence Dashboard (Private CRM).
 ┃ ┗  analytics.html    # Premium Business Analytics & Chart visualization view.
 ┗  README.md           # Documentation

System Architecture Diagram

graph TD
    subgraph Client [Frontend - Trusty Storefront]
        StoreUI[Store UI<br/>HTML/CSS/JS]
        Tracker["tracker.js<br/>(The Spy)"]
        StoreUI -->|User Interactions| Tracker
    end

    subgraph Admin [Admin & Analytics Dashboard]
        AdminUI[CRM Dashboard<br/>admin.html]
        Analytics[Analytics View<br/>analytics.html]
    end

    subgraph Server [Backend - HappiTrack Brain]
        Express[Express API<br/>server.js]
        Rules[Rulesets & Scoring Engine]
        DB[(In-Memory Data Vault)]
        
        Express --> Rules
        Rules <--> DB
    end
    
    %% Data Flow
    Tracker -->|POST /api/track<br/>Telemetry Data| Express
    AdminUI <-->|Manage CRM State| Express
    Analytics -->|Fetch KPI Metrics| Express
    
    %% External Actions
    Rules -.->|Trigger Actions| Action[WhatsApp Nudges &<br/>VIP Tokens]

Loading

Understanding the Flow: The tracker.js spy operates seamlessly on the frontend, firing silent asynchronous pings to the Express API. The backend processes this telemetry data, builds the CRM profiles via rulesets, and exposes analytical metrics back to the Admin Dashboard.

Feature Enhancement Note: As shown in the diagram, the system is designed to dispatch targeted WhatsApp Nudges (like Cart Rescue messages and VIP upgrades). Currently, these nudges are simulated and queued internally within the backend terminal. Integrating them into Happilee Chat Bot is a planned future enhancement/idea!

---

Technologies Used

• Frontend: Pure HTML, CSS, & Vanilla JS (built this way intentionally so the tracker.js payloads remain lightning-fast and universally integratable).
• Backend: Node.js, Express.js, Cors.
• Analytics Visualization: Chart.js (for premium pie/bar/funnel graphs).

---

Running Locally & Prerequisites

To run this prototype locally, ensure you have Node.js installed on your system.

1. Initialize the Brain (Backend)

Open a terminal and execute the following commands:

cd backend
npm install
node server.js

Expected Output: HappiTrack Brain (Node/Express Server) is running on port 3000

2. Initialize the Storefront (Frontend)

Open a second, separate terminal tab and execute:

cd frontend
npx http-server -p 8080

** CRITICAL NOTE:** Always use npx http-server instead of standard npm serve. Other serving tools strip dynamic query parameters (like VIP Tokens) off URLs.

---

Live Simulation Guide

Once both servers are running locally, here is exactly how you can test the entire ecosystem:

Step 1: Browse as a Customer

1. Navigate your web browser to: http://localhost:8080
2. Lingering Target: Hover your mouse over the "Featured Deal of the Day" specs and sit still for 3 seconds. The tracker realizes you're reading and fires a linger_specs signal, boosting your specific product interest score.
3. Cart Target: Click "ADD TO CART". Your score shoots up massively (+50).
4. Check your backend terminal. If your score crossed 60 points, the Engine internally queues a targeted discount nudge!

Step 2: Trigger Cart Abandonment (Exit Intent)

1. Ensure you have an item in your cart.
2. Quickly drag your mouse cursor up to the absolute top of the browser tab (simulating closing the tab).
3. The tracker.js spy fires an asynchronous beacon, and the backend instantly queues a customized "Cart Rescue" WhatsApp link.

Step 3: Trigger VIP Unlock

1. Open the cart sidebar and click PLACE ORDER. Repeat this until you have "checked out" with 3 total items.
2. The backend will detect you crossed the loyalty threshold and permanently upgrade your profile to vipStatus: true, automatically generating a secure 50% discount cryptographic token.

Step 4: The CRM Intelligence Dashboard

1. Open a new web browser tab and navigate to http://localhost:8080/admin.html.
2. Review the data! You will see your profile rendered live with your General Interest Score, total mock purchases, VIP badge state, and most desired product.
3. You can click "Send Link" to emulate dispatching the generated WhatsApp links, or use the Generator bar to output fresh tracked URLs for new customers.

Step 5: The Analytics View

1. Open http://localhost:8080/analytics.html.
2. Watch the raw telemetry data transform into a premium KPI business dashboard. You will see live computations of your total Buyer Rate, User Conversion Funnel graphs, Cart Abandonment segments, and global aesthetic trends powered by Chart.js.

---

API Reference

If you wish to integrate external tools, the Brain exposes the following hooks natively on Port 3000:

• POST /api/track: The primary ingestion hook for telemetry tracking.
• POST /api/contacts/init: Creates tracked profiles when generating referral links.
• GET /api/contacts: Dumps the entire in-memory happileeCRM vault.
• POST /api/campaign/broadcast: Dispatches segmented / filtered campaign messages.
• GET /api/campaign/logs: Returns live campaign vault broadcasts log.
• GET /checkout.html?token=: VIP cryptographic token validation.

---

Future Roadmap

This application is an active rapid prototype. The upcoming development pipeline consists of:

• Direct Happilee Webhooks: Transitioning the simulated internal WhatsApp Nudges into the live Happilee Chat Bot pipeline to dispatch targeted cart rescues to real phone numbers.
• Persistent Data Vault: Moving the happileeCRM object from local volatile memory into a permanent MongoDB databases.
• Admin Authentication: Implementing a secure Login portal (JWT system) to protect the Customer Intelligence tracking interface.