Youth CRM by.u (Telkomsel)

Youth CRM by.u (Telkomsel)

Project Overview: Youth CRM

  • Project Name: Youth CRM

  • Client / Company: by.u (Telkomsel)

  • Project Type: Contract Freelance

  • Role: Frontend Engineer

📌 Project Description

Youth CRM is a specialized, mobile-first Customer Relationship Management (CRM) platform engineered for by.u’s field representatives (YAE, Buddies, and YPCR). The application serves as the primary operational tool for field agents managing on-ground promotional booths, product dealings, and school visitation workflows across all regional territories in Indonesia. It bridges the gap between field sales execution and real-time management monitoring.

💻 Tech Stack

  • Framework: Next.js (React)

  • State Management: Zustand

  • Form Handling & Validation: React Hook Form + Zod

  • API Integration: RESTful API

  • Analytics: Google Analytics 4 (GA4) Custom Explorations

🛠️ Key Contributions & Responsibilities

As the sole Frontend Engineer for this contract, I built and maintained both the responsive mobile interface for field operations and the comprehensive desktop administrative dashboard. My work directly translated complex business logic into smooth, performant user interfaces:

1. Mobile-First Field Agent Web App

  • Clock-In / Clock-Out Management: Developed a location-aware attendance system tracking agent check-ins, task durations, and physical site verification.

  • School Visitation & Task Workflows: Built the execution interface where agents track active tasks (e.g., Salam, Survey Sekolah, Presentasi Demo, Dealing Sekolah), provide reasons for unsuccessful deals, and upload required documentation files.

  • Agent Performance & Gamification: Implemented a real-time leaderboard and personal ranking card system to boost field agent motivation and track target achievements (Total akun dikunjungi vs Target).

2. Advanced Admin Dashboard & Analytics

  • Geospatial Data Visualization: Integrated responsive mapping (Leaflet/Map layers) on the main dashboard to visualize regional performance breakdowns across Jawa-Bali-Nusra, Sumatera, Jabotabek & Jabar, and Pamasuka.

  • Granular Administrative Control: Developed a comprehensive management panel handling complex permissions, role assignments, priority account settings, and territory definitions.

  • Bulk Data Processing: Built data-heavy modules supporting specialized workflows like Import Performance Digipos and Import Performance Indiana, complete with structural KPI calculators.

  • Event-Driven User Tracking: Set up custom event tracking through Google Analytics 4 to track explicit funnel behavior, capturing performance metrics such as MSISDN Search Performance, Promotion Apply, Product Clicks, and Banner Clicks.

🚀 Key Highlights & Architectural Impact

  • Strict Client-Side Validation: Leveraged Zod and React Hook Form to ensure all multi-step field survey data and document uploads are completely sanitized and validated before hitting backend endpoints, reducing API errors significantly.

  • Lightweight & Scalable State: Utilized Zustand for centralized, atomic state management across multi-tab configurations (List Account, Performansi Saya, Riwayat Kunjungan), maintaining fluid performance even on low-end mobile devices used on the field.

  • Unified Cross-Platform UI: Designed a clean, highly scannable UI that effortlessly shifts between an intensive mobile viewport for active field operations and an data-dense desktop workspace for Super Admins.