EnergyTIP Partner App
Full-stack B2B partner portal for energy sales representatives
A comprehensive CRM-integrated platform designed for energy sales partners in Austria. The application provides sales representatives with real-time visibility into their customer pipeline, contract management, commission tracking, and performance analytics—all synchronized with a central CRM as the source of truth.
The Problem
Energy sales partners traditionally relied on fragmented tools and manual processes:
- ✗ Spreadsheets for tracking customer contacts and deals
- ✗ Email chains for document sharing and approvals
- ✗ Manual commission calculations prone to errors
- ✗ No visibility into pipeline performance or forecasting
- ✗ Disconnected systems requiring duplicate data entry
- ✗ Partners couldn't focus on what they do best—selling
The Solution
flowchart LR
subgraph Pipeline["Sales Pipeline"]
L["Leads"]
D["Deals"]
C["Contracts"]
CO["Commissions"]
end
L --> D --> C --> CO
subgraph Sync["Real-Time CRM Sync"]
CRM["CRM System"]
end
Pipeline --> Sync
EnergyTIP Partner App consolidates all partner operations into a single, intuitive platform with real-time CRM synchronization, eliminating manual processes and data silos.
Key Features
Dashboard (Startseite)
Real-time sales performance overview with key metrics including active deals, pending commissions, and pipeline health
Customer Management (Kundenkontakt)
Complete customer lifecycle tracking for both private and business customers with detailed profiles
Deal Pipeline
Kanban-style board with 15-stage workflow, color-coded columns, and drop-off rate tracking
Contract Management (Verträge)
Monitor contract status, metering points, renewal dates, and energy tariffs
Commission Management (Provisionen)
Transparent commission calculations, invoice tracking, and payout history
Document Management (Dokumente)
Centralized access to contracts, invoices, marketing materials, and price sheets
Energy Comparison (Vergleich)
External tariff comparison tool with auto-populated partner ID
Supplier Ratings (Energielieferanten)
Compare and rate suppliers based on pricing, service quality, and reliability
Leaderboard
Gamified partner rankings with monthly/quarterly points-based scoring
FAQ & Help Center
Categorized questions and answers for platform, processes, and policies
Development Roadmap
Transparent view of planned features with partner feedback integration
Customer Offer Portal
Self-service offer verification and acceptance flow for end customers
15-Stage Deal Pipeline
Visual Kanban-style deal board with a comprehensive 15-stage workflow. Each deal progresses through clearly defined stages from creation to completion.
flowchart LR
subgraph Early["Early Stages"]
NEW["NEW"]
DR["DATA RECEIVED"]
DC["DATA COMPLETED"]
end
subgraph Offer["Offer Phase"]
OS["OFFER SENT"]
OA["OFFER ACCEPTED"]
end
subgraph Contract["Contract Phase"]
CS["CONTRACT SENT"]
CSG["CONTRACT SIGNED"]
STS["SENT TO SUPPLIER"]
end
subgraph Completion["Completion"]
CW["CLOSED WON"]
REC["RECEIVED"]
PAID["PAID"]
end
NEW --> DR --> DC --> OS --> OA --> CS --> CSG --> STS --> CW --> REC --> PAID
Pipeline Visualization
- • Color-coded stage columns with deal counts
- • Commission totals per stage
- • Collapsible empty stages for cleaner views
Deal Cards
- • Customer info and contact details
- • Energy consumption data
- • Commission values and drop-off tracking
Customer Offer Portal
Self-service offer verification and acceptance flow for end customers. Customers receive a secure link to review their offer, verify their data, and accept terms—all without partner intervention.
flowchart LR
E["Email Link"] --> V["Verify Identity"] --> R["Review Offer"] --> A["Accept Terms"]
Application Structure
Main Navigation
- 📊 Startseite – Overview & Analytics
- 👥 Kundenkontakt – Customer Management
- 📄 Verträge – Contract Tracking
- 💰 Provisionen – Earnings & Payouts
- 📁 Dokumente – File Management
Help & Information
- ⚖️ Vergleich – External Tariff Calculator
- ❓ FAQ – Frequently Asked Questions
- ⭐ Energielieferanten – Supplier Ratings
- 🗺️ Roadmap – Planned Features
Architecture
flowchart TB
subgraph Frontend["Frontend - SPA"]
UI["Vue.js Application"]
end
subgraph Gateway["API Gateway"]
GW["Auth & Rate Limiting"]
end
subgraph Services["Microservices"]
CORE["Core API"]
OFFER["Offer Service"]
CALC["Calculator Service"]
end
subgraph Data["Data Layer"]
DB[("Relational DB")]
CACHE[("Session Cache")]
end
subgraph External["External Systems"]
IDP["Identity Provider"]
CRM["CRM System"]
end
Frontend --> Gateway
Gateway --> Services
CORE --> DB
OFFER --> CACHE
Services --> IDP
CORE --> CRM
The application is built on a microservices architecture with clear separation of concerns, ensuring scalability, maintainability, and independent deployment of services.
Domain Model
| Entity | Description |
|---|---|
| Sales Partner | Registered energy sales representatives who use the platform |
| Partner Company | Organizations that partners belong to and represent |
| Contact | Customer contacts, supporting both private individuals and businesses |
| Deal | Sales opportunities tracked through 15 pipeline stages |
| Contract | Finalized energy supply agreements with customers |
| Metering Point | Physical energy delivery locations with consumption tracking |
| Commission | Earned commissions calculated per completed deal |
| Supplier | Energy providers with aggregated partner ratings |
Tech Stack
Frontend
Component-based architecture with lazy-loaded routes
Enterprise identity management integration
Data visualizations for analytics dashboards
Responsive design with system preference detection
Backend
Microservices with reactive capabilities
OpenAPI documentation with Swagger UI
Query-based data synchronization with caching
Contracts and invoices document automation
Security
🔒 Transport Security
TLS/HTTPS encryption for all communications with secure cookie handling
🔑 Authentication
OAuth 2.0 / OpenID Connect with JWT tokens and secure session management
👤 Authorization
Role-based access control with partner-level data isolation
🛡️ Data Protection
GDPR-compliant data handling with sensitive field masking
User Experience
Intuitive Navigation
Clean sidebar with flyout menu for secondary pages, keeping main navigation focused
Dark Mode Support
Full implementation respecting system preferences with manual toggle
Responsive Design
Collapsible sidebar on mobile, horizontal scrolling Kanban board
Performance Optimized
Lazy-loaded routes, efficient caching, and optimized API calls
Results & Impact
My Role
As the Systems Architect on this project, I was responsible for the overall technical vision and design, while working with a developer who handled most of the hands-on backend implementation and deployment.
Architecture & Design
- → Designed the microservices architecture
- → Defined API contracts and data models
- → Made technology stack decisions
- → Established coding standards and patterns
Frontend Development
- → Built the Vue.js SPA from the ground up
- → Developed the 15-stage Kanban deal board
- → Created interactive analytics dashboards
- → Implemented responsive design with dark mode
Technical Leadership
- → Conducted code reviews and provided guidance
- → Balanced technical debt with delivery speed
- → Translated business requirements into solutions
CRM Integration
- → Designed the CRM sync strategy and data flow
- → Defined caching and optimization patterns
- → Specified commission calculation logic
Lessons Learned
CRM Integration Complexity — Working with external CRM APIs requires robust error handling, retry logic, and caching strategies to ensure reliability.
Multi-Tenant Security — Partner-level data isolation requires careful attention at every layer, from database queries to API responses.
Pipeline Complexity — A 15-stage deal pipeline requires careful UX design to remain usable. Collapsible empty stages and visual drop-off tracking help partners focus on what matters.
Performance at Scale — Optimizing CRM API calls through intelligent caching significantly improved both performance and cost efficiency.